w3cbootstrap 响应式布局 - CSDN
精华内容
参与话题
  • 初学者如何写移动端响应式布局

    万次阅读 2017-04-25 13:08:33
    一、百分比布局刚入前端坑的时候就是使用百分比布局,觉得百分比布局可以解决移动端的响应式布局问题,但是图样图森破,最常见的情况莫过于设计师说:“你没有按照我的设计稿来做呀”然后就是设计师在我旁边,我们...

    该篇文章首发于我的个人博客:http://cherryblog.site/ 使用github+coding+hexo搭建的静态博客,更多文章请移步至我的个人博客

    一、百分比布局

    刚入前端坑的时候就是使用百分比布局,觉得百分比布局可以解决移动端的响应式布局问题,但是图样图森破,最常见的情况莫过于设计师说:“你没有按照我的设计稿来做呀”然后就是设计师在我旁边,我们一起开始调整位置….

    之后我学会了,基本上都是按照设计稿的位置来的(将设计稿缩放成chrom响应式中那么大,然后两个重叠开始比对位置= =),然后设计师再也没有说过位置不对了…但是身为一个程序员,这样做好丢人呀,设计师说这里再大一点小一点的时候我都直接说,你给我修改好的设计稿!

    使用百分比布局还会出现一个问题,就是当某些需要高度固定的部分会因为使用百分比然后不同分辨率会有误差。

    很明显,百分比布局还原设计稿能力还是有限。

    二、固定的设备宽度

    在做移动开发的时候很多人都会加上viewport的配置,
    那么固定设备宽度的布局就是根据这个来设置的,将viewport里面的宽度width设置成设计稿的宽度,也就是说原本是width=device-width,即宽度为设备的宽度,假如在iphone6上显示的时候,那么页面的宽度就是375px; 当我们将width设置成设计稿的宽度的,假如设计稿是750px,而我们的css也按设计的尺寸来做,例如一个图片是200px*200px,那么在css上也是宽高都是写200px,也就是1:1的比例。那么在375px的手机上显示的时候,就会缩小2倍显示,以此类推,在320px的宽度的时候,就会缩小2.3倍显示,在414px的宽度的时候就会缩小1.8倍。
    这样的写法是会比较好的还原设计稿,而且速度也会比较快,但是这样也有缺点,在缩>小的时候有些设备会比较模糊,因为你强行将设备放大了。

    三、rem布局

    基础知识参考以下两篇博客:

    http://isux.tencent.com/web-a

    http://www.w3cplus.com/css3/d
    使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦。
    页面上html的font-size不是预先通过媒介查询在css里定义好的,而是通过js计算出来的,所以当分辨率发生变化时,html的font-size就会变,不过这得在你调整分辨率后,刷新页面才能看得到效果。你看代码就知道为啥font-size是直接写到html的style上面的了

    它是根据什么计算的,这就跟设计稿有关了,拿网易来说,它的设计稿应该是基于iphone4或者iphone5来的,所以它的设计稿竖直放时的横向分辨率为640px,为了计算方便,取一个100px的font-size为参照,那么body元素的宽度就可以设置为width: 6.4rem,于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。

    视口做如下设置:

    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

    1 用js根据屏幕分辨率动态生成fontsize:

    (function () {
       document.addEventListener('DOMContentLoaded', function () {
    var deviceWidth = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = deviceWidth / 10 + 'px';
       }, false);
    window.onresize = function(){
    var deviceWidth = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = deviceWidth / 70 + 'px';
    };
    })();

    2、利用sass设置px和rem互相转化的函数

    @function px2rem($x) {
      @return $x / 108 * 1rem; //按1080的设计稿,统一宽度10rem;
    }

    3、在我们设置长度的时候就可以直接用设计稿上标注的长度了

    #translateBtn{
      @include base-style(px2rem(53), px2rem(919), px2rem(94))
    }
    展开全文
  • bootstrap的响应式布局详解

    千次阅读 2018-07-23 09:11:17
    栅格系统英文为“grid systems”,也有人翻译为“网格系统”,运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。 1692年,新登基的法国国王路易十四感到法国的...

    栅格系统英文为“grid systems”,也有人翻译为“网格系统”,运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。

    1692年,新登基的法国国王路易十四感到法国的印刷水平差强人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的, 重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方格单位,每个方格单位再分成36个小格,这样,一个印刷版面就有2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是世界上最早对字体和版面进行科学实验的活动,也是栅格系统最早的雏形。

    我给网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。

    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。

    也就是说Bootstrap把一个元素的宽度划分成12份。我们则在这个被划分成12份的行安排元素。

    一、基本目标

    制作如下的两行,这两行因为设备的不同里面各个单元格的宽度会改变:

     

     

    在手机小屏幕上,上行A占2份B占10份,AB分享了这12份,下行A占1份B占1份C占10份,ABC分享了这12份。

    在平板的中等屏幕上,上行A占8份B占4份,AB分享了这12份,下行A占10份B占1份C占1份,ABC分享了这12份。

    在PC的大屏幕上,上行A占4份B占8份,AB分享了这12份,下行A占1份B占10份C占1份,ABC分享了这12份。

    二、制作过程

    先在网页文件夹中配置好Bootstrap,在官网(点击打开链接)下载组件即可,用于生产环境的Bootstrap版本(点击打开链接),Bootstrap3对2并不兼容,建议直接根据其开发文档使用Bootstrap3。将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点目录下面。如果是Eclipse的JSP Web Project的话就把它们放到WebRoot文件夹下面。

    之后代码如下,详情请看注释:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <!--网页编码,要使用的外部文件,自动适应屏幕-->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="css/bootstrap.css" rel="stylesheet" media="screen">

    <meta name="viewport"

    content="width=device-width,initial-scale=1.0,user-scalable=no">

    <title>栅格系统</title>

    </head>

    <body>

    <!--使用Bootstrap如果不使用面板的话,要把元素放进一个占满100%屏幕的容器里-->

    <!--class="container"则自动居中-->

    <div class="container-fluid">

    <!--定义一行-->

    <div class="row">

    <!--xs代表手机小屏幕,md代表平板中屏幕,lg代表PC大屏幕-->

    <!--同一对的元素之和必须等于12,否则出现错误,如A的col-xs-2+B的col-xs-10是等于12的-->

    <!--bg-warning是定义浅黄色的背景色-->

    <div class="col-xs-2 col-md-8 col-lg-4 bg-warning">

    A

    </div>

    <div class="col-xs-10 col-md-4 col-lg-8 bg-primary">

    B

    </div>

    </div>

    <div class="row">

    <!--这里的道理与上面的一样,A的col-xs-1+B的col-xs-1+C的col-xs-10是等于12的-->

    <div class="col-xs-1 col-md-10 col-lg-1 bg-warning">

    A

    </div>

    <div class="col-xs-1 col-md-1 col-lg-10 bg-primary">

    B

    </div>

    <div class="col-xs-10 col-md-1 col-lg-1 bg-success">

    C

    </div>

    </div>

    </div>

    </body>

    </html>

    展开全文
  • 普通网页怎么改成响应式布局

    万次阅读 2015-03-22 21:08:45
    响应式的网站是指它能够适应客户端的屏幕尺寸,自动响应客户端尺寸变化。在这篇文章中,我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式(Responsive) 1 – 布局  当创建一个响应式网站,或让...

    <span style="font-family: verdana, 'ms song', Arial, Helvetica, sans-serif;">	</span><span style="background-color: rgb(250, 247, 239); font-family: verdana, 'ms song', Arial, Helvetica, sans-serif;">响应式的网站是指它能够适应客户端的屏幕尺寸,自动响应客户端尺寸变化。在这篇文章中,我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式(Responsive)</span>

    1 – 布局

      当创建一个响应式网站,或让现有的网站变成响应式的,首先要关注的元素的布局。我在建立响应式的网站,总是先创建一个非响应的布局,页面宽度固定大小。如果非响应版本完成得非常不错,我再添加媒体查询(Media Queries)和响应式代码。这种操作方式更容易实现响应式特性,在同一时间专注于一个任务。

      当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到<head>和</head>标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    

    现在是时候添加一些媒体查询了。根据 W3C 网站,媒体查询由媒体类型和零个或多个媒体查询的条件表达式组成。通过使用媒体查询,外观呈现可以针对特定范围内的输出设备,而不需要改变内容本身。换句话说,媒体查询让您的网站在各种各种显示器上看起来都很好,从小的智能手机到大的电脑屏幕等等。

      媒体查询取决于你的网站布局,所以对我来说为您提供一个现成可以使用的代码片段有点困难。但是,下面的代码对于大多数网站都是一个很好的起点。在这个例子中,#primary 是主要内容区域,#secondary 是侧栏。

      从代码中你可以看到,我定义了两种规格:首先有一个最大宽度为1060px,为平板电脑优化的横向显示。#primary 占在其父容器宽度的67%,#senondary 占30%,再加上3%的左外边距。 第二个规格是用于平板电脑和更小的屏幕尺寸。

      由于智能手机的屏幕尺寸小,我决定给 #primary 设置100%的宽度,#secondary 也设置100%的宽度,他将在 #primary 下面。 正如我已经说过的,你可能必须要对这段代码位进行修改才能适应您的网站的具体需求。

    /* Tablet Landscape */
    @media screen and (max-width: 1060px) {
        #primary { width:67%; }
        #secondary { width:30%; margin-left:3%;} 
    }
     
    /* Tabled Portrait */
    @media screen and (max-width: 768px) {
        #primary { width:100%; }
        #secondary { width:100%; margin:0; border:none; }
    }

    完成以后,让我们看看你的布局是如何响应的。要做到这一点,我用这 Matt Kersley 创建的一款非常的响应式测试工具

    2 – 媒体

      一个响应式的布局是实现响应网站的第一步。现在,让我们把注意力集中在另外一个现代化网站非常重要的方面:媒体,如视频或图像。 下面的 CSS 代码将确保您的图像将永远不会大于他们的父容器,代码非常简单,适用于大多数网站。请注意,IE6 等旧的浏览器不支持 max-width 指令。

    img { max-width100%; }

    虽然上述技术是有效的,有时你可能需要有更多的图像控制权,例如根据客户端的显示大小,显示不同的图像。

      这是由 Nicolas Gallagher 发明的好方法。让我们看看 HTML:

    <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

    正如你可以看到,我们使用 data-* 属性来存储替换图像的 URL。现在,让我们使用强大的 CSS3 来为匹配 min-device-width 条件的媒体指定替换图像:

    @media (min-device-width:600px) {
        img[data-src-600px] {
            contentattr(data-src-600pxurl);
        }
    }
     
    @media (min-device-width:800px) {
        img[data-src-800px] {
            contentattr(data-src-800pxurl);
        }
    }
    令人印象深刻,是不是?现在,让我们来看看另一个在今天的网站中非常重要的媒体——视频。由于大多数网站使用的视频来自第三方网站,我决定把重点放在 Nick La 的弹性视频技术,这种技术可让您嵌入的响应式的视频。

    HTML:

    1
    2
    3
    <div class="video-container">
        <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
    </div>

    CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .video-container {
        positionrelative;
        padding-bottom56.25%;
        padding-top30px;
        height0;
        overflowhidden;
    }
     
    .video-container iframe, 
    .video-container object, 
    .video-container embed {
        positionabsolute;
        top0;
        left0;
        width100%;
        height100%;
    }
    在你的网站上应用了这些代码后,嵌入的视频也是响应式(Responsive)的了。

    3 – 字体

      本教程的最后一步绝对非常重要,但往往被网站开发人员忽视——字体。到现在为止,大多数开发人员(包括我自己)使用像素来定义字体的大小。虽然像素在普通网站使用是OK的,但是对于响应式网站来说应该有响应式的字体。事实上,一个响应式的字体大小应关联它的父容器的宽度,这样它才可以适应客户端的屏幕。

      CSS3 规范引入了一个新的单位叫 rem,和 em 类相似,但相对于 HTML 元素来说, rem 更易于使用。

      rem 是相对于 HTML 元素的,不要忘了重置 HTML 的字体大小:

     

    1
    html { font-size:100%; }

      

      完成后,您可以定义响应式的字体大小,如下所示:

     

    1
    2
    3
    @media (min-width640px) { body {font-size:1rem;} }
    @media (min-width:960px) { body {font-size:1.2rem;} }
    @media (min-width:1100px) { body {font-size:1.5rem;} }

      请注意,旧浏览器不支持 rem 单元,所以不要忘了实现一个替代。

      这就是今天的所有内容了,希望你会喜欢这个教程!


    展开全文
  • 响应式布局的实现方法和原理

    万次阅读 2018-01-02 18:05:26
    昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)...

    昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题。既然是设计的问题,这里就会涉及到很多层面的角色,包括交互设计师,视觉设计师,前端工程师,后台开发工程师。

    交互设计师,要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师,则要考虑到页面性能和移动端带宽问题,权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师,则要完成满足视觉需求和交互功能,更要考虑到页面加载性能和消耗带宽问题,更重要的是移动端安全性能方面!既然响应式网页设计牵涉到了这么多的方方面面,那我们又该如何去实现这种页面呢?对此我也特意收集了一些响应式网页的实现方法原理,在马海祥博客上跟大家分享一下:

    首先我们应该遵循移动优先原则,交互和设计应以移动端为主,PC则作为移动端的一个扩展;一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:响应式布局和响应式内容(图片、多媒体)。

    一、响应式布局

    如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape),怎样才能做到让一种设计方案满足所有情况?对此,马海祥觉的我们的布局应该是一种弹性的栅格布局,不同尺寸下弹性适应,如以下页面中各模块在不同尺寸下的位置:

    那么我们具体要怎么做呢?

    1、Meta标签定义

    使用 viewport meta 标签在手机浏览器上控制布局

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

    通过快捷方式打开时全屏显示

    <meta name="apple-mobile-web-app-capable" content="yes" />

    隐藏状态栏

    <meta name="apple-mobile-web-app-status-bar-style" content="blank" />

    iPhone会将看起来像电话号码的数字添加电话连接,应当关闭

    <meta name="format-detection" content="telephone=no" />

    2、使用Media Queries适配对应样式

    常用于布局的CSS Media Queries有以下几种:

    设备类型(media type):

    all所有设备;
      screen 电脑显示器;
      print打印用纸或打印预览视图;
      handheld便携设备;
      tv电视机类型的设备;
      speech语意和音频盒成器;
      braille盲人用点字法触觉回馈设备;
      embossed盲文打印机;
      projection各种投影设备;
      tty使用固定密度字母栅格的媒介,比如电传打字机和终端。

    设备特性(media feature):

    width浏览器宽度;
      height浏览器高度;
      device-width设备屏幕分辨率的宽度值;
      device-height设备屏幕分辨率的高度值;
      orientation浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait,否则为landscape;
      aspect-ratio比例值,浏览器的纵横比;
      device-aspect-ratio比例值,屏幕的纵横比。

    例子:

    /* for 240 px width screen */
      @media only screen and (max-device-width:240px){
       selector{ ... }
      }
      /* for 320px width screen */
      @media only screen and (min-device-width:241px) and (max-device-width:320px){
       selector{ ... }
      }
      /* for 480 px width screen */
      @media only screen (min-device-width:321px)and (max-device-width:480px){
       selector{ ... }
      }

    适用于布局的Media Queries,这里在马海祥博客上我们就不再做详述,有兴趣的话,可通过官方文档进一步了解。

    3、表格(table)的响应式处理

    那么对于表格(table)的响应式处理该是怎样的呢?我们该如何突破Table的局限性呢?接下来我们来了解以下的几种针对表格响应式处理的方法:

    (1)、隐藏不重要数据列

    处理前:


    (点击查看大图)

    处理后:

    实现方法代码:

    @media only screen and (max-width: 800px) {
       table td:nth-child(2),
       table th:nth-child(2) {display: none;}
      }
      @media only screen and (max-width: 640px) {
       table td:nth-child(4),
       table th:nth-child(4),
       table td:nth-child(7),
       table th:nth-child(7),
       table td:nth-child(8),
       th:nth-child(8){display: none;}
      }

    以用户角度思考,每个人对数据的认知不同,或许你隐藏的数据对于他却是很重要的,所以对于这种方法马海祥并不推荐。

    (2)、多列横向变2列纵向

    处理前:

    处理后:

    实现方法:<thead>定位隐藏,<td>变块元素,并绑定对应<th>列名,然后用伪元素的content:attr(data-th)实现<th>:

    (3)、固定首列,剩余列横向滚动

    处理前:

    处理后:

    实现原理代码:

    thead {float:left;}
      tbody {display:block;width:auto;overflow-x:auto;}

    二、响应式内容

    1、响应式图片

    带宽是手机终端的硬伤,如果我们只是页面布局做了响应式处理,在我们用手机访问时,请求的图片还是PC上的大图;文件体积大,消耗流量多,请求延时长,因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。

    处理原理:浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片,如屏幕分辨率320*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高,也就是高清屏,那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。

    解决方案:其实W3C已经有一个用于响应式图形的草案:新定义标签<picture>,因为它还只是草案,目前还没有支持的浏览器,期待在不久的未来我们能用上。虽然目前不支持,但我们还是来了解下,为之后的内容做个铺垫。

    <picture>是一个图形element,内容由多个源图组成,并由CSS Media Queries来适配出合理图形,代码规范如下:

    <picture width="500" height="500">
        <source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
        <source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
        <source srcset="small-1.jpg 1x, small-2.jpg 2x">
        <img src="small-1.jpg" alt="">
        <p>Accessible text</p>
        <!-- Fallback content-->
        <noscript>
        <img src="external/imgs/small.jpg" alt="Team photo">
        </noscript>
      </picture>

    注:source: 一个图片源;
      media: 媒体查询,用于适配屏幕尺寸;
      srcset: 图片链接,1x适应普通屏,2x适应高清屏;
      <noscript/>: 当浏览器不支持脚本时的一个替代方案;
      <img/>: 初始图片;另外还有一个无障碍文本,类似<img/>的alt属性。

    虽然<picture>目前还不支持,但它的原理我们是可借鉴的,所以就诞生了一个用于图片响应式处理的类库Picturefill

    <span data-picture data-alt="图片描述文本">
         <span data-src="small.jpg"></span>
         <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
         <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
         <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
         <!-- 浏览器不支持JS时的备用方案. -->
         <noscript>
         <img src="external/imgs/small.jpg" alt="图片描述文本">
         </noscript>
      </span>

    其原理就是JS获取Source的源以及CSS Media Queries规则,输出适应图片,逻辑细节这里不再解析,感兴趣的可查看其JS代码,逻辑不是很复杂,也可以自己封装一个类库,以适用于自身产品,例如图片加载失败的替代方案。

    当然,在未来的CSS Image Level 4中已经实现了响应式图片的原生语法:image-set

    <image-set> = image-set([ <image-set-decl>, ]* [ <image-set-decl> | <color>])
      <image-set-decl> = [ <image> | <string> ] <resolution>

    那么我们的响应式图片可以这样重写了

    background-image:url(default.jpg);  /* 普通幕 */
      background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x);  /* Retina高清屏 */

    注:Webkit 目前只实现了 url() 形式的取值,且dppx值取负值[-2x]貌似也是合法的。

    当然除此之外,还有其他的响应式处理,如服务端user-agent嗅探。

    2、高分辨率(DPI)下的响应式处理

    (1)、SVG:优点可承载色彩丰富、设计复杂图形,且渲染不会出现边缘不顺滑;缺点是IE的支持不完美。

    (2)、Icon fonts:支持多浏览器,图形颜色大小的修改成本低,易于维护;图形表现单一,不支持色彩丰富且复杂的图形,IE6渲染有毛边。

    (3)、-webkit-image-set:只支持单个图形的适配,不利于图形合并,兼容不完美(Safari 6+, Chrome 21+)。

    JS检测:var retina = window.devicePixelRatio > 1;

    CSS Media Query:

    @media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
      (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
      (min-resolution: 2dppx),             /* The standard way */
      (min-resolution: 192dpi)             /* dppx fallback */

    3、高分辨率下的1px border

    由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案。

    在Photoshop中,如果需要看似0.5px的边框,常见的方法就是对1px边框加上阴影模糊1px。同理,我们在retina屏下需要做到真实的1px边框,可利用box-shadow属性模拟。

    @media only screen and (-webkit-min-device-pixel-ratio:1.5),
      only screen and (min-device-pixel-ratio:1.5) {
      button {
      border:none;
      padding:0 16px;
      box-shadow: inset 0 0 1px #000,
      inset 0 1px 0 #75c2f8,
      0 1px 1px -1px rgba(0, 0, 0, .5);
      }
      }

    留给我们的思考

    ⊕响应式不只是技术的实现,它更像是一种对于设计的全新思维模式
      ⊕浏览的体验短期内还无法超越原生应用
      ⊕左手操作习惯的交互
      ⊕Webapp的消息推送
      ⊕调用本地文件系统的能力弱
      ⊕响应式图片的解决方案
      ⊕对PC事件的兼容
      ⊕WebAPP页面体积的响应式适配
      ⊕代码实现和内容可维护性之间的权衡
      ⊕控制设计开发成本

    展开全文
  • 10个免费的响应式布局HTML5+CSS3模板

    千次阅读 2015-12-13 19:48:52
    现在的自由响应式的HTML5模板的有着高度的市场需求,因为他们完全改变了网站设计与开发工业来说,是比较容易的,顺手,高级语言,可以很容易地创建了很多令人惊讶的事情,很快。这些模板是易于定制,有很多不同的...
  • Tips:本文主要介绍CSS3的background-size属性,实现响应式式图片等比例缩放。 (一)基本语法 基本语法:background-size: length | percentage | cover | contain; (可参照w3c的为准) length 该属性值是...
  • 【css】移动端自适应布局与字体大小自适应

    万次阅读 多人点赞 2018-10-31 15:14:42
    前言:前面已经说过【css】移动端响应式布局与设置响应式字体大小,但是移动自适应布局跟自适应字体大小该怎么进行设置呢?   一、vw, vh vw它是根据可视区的宽度来计算的。 vh它是根据可视区的高度来计算的。 ...
  • W3C盒模型和IE盒模型的区别

    万次阅读 2015-06-29 10:42:45
    盒模型在初学css的时候就会接触到,其实很容易理解,这里也不多废话,但是实际上在布局的时候还是会出现很多问题。对于盒模型的认识不能只停留在知道一个盒模型由哪些部分构成,也要更多的了解如何在不同情况下利用...
  • web前端响应式设计总结

    万次阅读 2017-08-30 10:20:51
    web前端响应式设计总结 一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈...
  • paip.自适应网页设计 跟 响应式 设计...#-----------自适应布局VS响应式布局 2 设计思路Mobile First 2 #---手机and平板分辨率 3 #---------viewport...允许网页宽度自动调整贝儿哪不个网页缩小兰.. 3 #-------
  • bootstrap3的img-thunbnail和img-responsive

    万次阅读 2013-11-25 15:07:44
    新增的img-responsive 3.2版本 3.0版本 .img-polaroid ...响应式图片 ...通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了ma
  • HTML CSS + DIV实现整体布局

    万次阅读 多人点赞 2016-06-08 04:18:07
    开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2、什么是W3C标准?  W3C:World Wide Web Consortium,万维网联盟  W3C的职能:负责制定和维护Web行业标准  W3C标准包括一系列的标准: HTML内容...
  • 在辨析两种盒子模型之前,先简单说明一下什么叫盒子模型。 原理: 先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。...
  • HTML——左右侧边栏布局

    万次阅读 2014-11-01 14:04:49
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" ... 上中下布局 body{ background: #42413C ; margin: 0;/*消除body中的留白*/ padding: 0; text-al
  • HTML——左侧边栏布局

    万次阅读 2014-11-01 14:03:11
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" ... 上中下布局 body{ background: #42413C ; margin: 0;/*消除body中的留白*/ padding: 0; text-al
  • html按钮响应回车键

    万次阅读 2014-09-26 20:48:15
    function onkeydown() { if(event.keyCode == 13) { document.getElementById("enter").click(); return false; } }
  • 启动iis7管理服务器提示:无法启动计算机上的服务W3SVC 启动Windows Process Activation Service服务,报错:6801 指定资源管理器中的事务支持未启动或已关闭  启动world wide web publishing service服务,报错:1068:...
  • SCSS实现响应式布局

    千次阅读 2017-03-18 14:25:02
    参考文章 比较简单的分栏响应式布局 实例演示 官方文档
  • HTTP之HEAD请求

    万次阅读 2017-03-21 15:23:52
    HEAD请求来源是HTTP1.0。HTTP1.0就定义了三种请求方式GET,POST,HEAD。HTTP1.1则新增了OPTIONS...  此处主要是讲HEAD请求。 w3.org定义 在w3.org里面是这么说的 The HEAD method is identical to GET except tha
  • 微信小程序页面布局

    万次阅读 2019-05-16 22:56:02
    1.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。 2.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的或者不确定的大小的。 3.Flex布局的主要特征...
1 2 3 4 5 ... 20
收藏数 815,915
精华内容 326,366
热门标签
关键字:

w3cbootstrap 响应式布局