Responsive Web Design 响应式/自适应网页设计

发表于   |  

1. 什么是响应式网页？

塞班、黑莓时代的手机浏览器只适合由WML（HMTL的子集）编写的功能简单的wap页面，若浏览HTML编写的页面，只能看到按比例强行缩小的页面,无法正常浏览。

到了2010年5月提出，有前端设计师提出了响应式概念。网页内容能够随着显示设备的尺寸而调整布局，优化用户浏览体验。

响应式设计特点：

  • 流式网格布局（Fluid：流式、流动式、液态）
  • 可伸缩的图片和文字
  • CSS3 Media Query

    2. 如何编写响应式网页？

  1. 设置viewport标签

    IOS率先入了viewport视口/视窗概念，用于显示网页的内容的一个逻辑概念，其宽度/高度都可以任意指定，可以大到2000px都可以，网页不是仅仅显示在物理窗口，而是显示视口中——就可以实现大网页不经缩放，直接显示在手机中——只是需要用户左右滑动窗口即可。后来Android也引入了该概念。举个栗子：

    <meta name="viewport" content="width=100%,initial-scale=1.0,user-scalable=no"/>

    解释：

    • name固定为viewport

    • content属性中有以下属性：

      • width 通常不要用绝对宽度，因为要自适应
      • initial-scale 初始缩放比例
      • user-scalable 是否允许用户缩放

  2. 避免使用绝对单位（px），使用相对单位（%、auto、em）

  3. 使用流式定位:float
  4. 图片大小实现自适应
    • img{width:80%}//图片宽始终占父容器宽度的80%
    • img{max-width:80%}//图片最大宽度占父容器宽度的80%；若缩小，效果与width无异；但若放大超过自身大小就停止放大，保持自身大小，保持分辨率
  5. 使用CSS3的媒体查询，根据浏览器屏幕的特征，有选择性地执行某些CSS样式。而且严格来说，使用媒体查询之后，前四条均可不必遵循。

3. 介绍一下 MediaQuery 媒体查询

Media：指浏览网页的设备，指浏览网页的设备，如screen(pc/pad/phone)、print、tv、projection、屏幕阅读器…..

Query：查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩位深、方向Orientation(Landscape/Portrait)，根据这些特性，执行特定的CSS样式。

用法一：在link元素中使用media属性

<link media="screen and (min-width:990px)" rel="stylesheet" href="css/pc.css"/>
<link media="screen and (max-width:989px) and (min-width:768px)" rel="stylesheet" href="css/pad.css"/>
<link media="screen and (MAX-width:767px)" rel="stylesheet" href="css/phone.css"/>

上边三个link标签分别适配了三种不同的设备，能够自动识别设备屏幕尺寸从而自动执行。（缺点：）但是如果打开F12 NetWork就会发现，虽然当前只会有一种设备的条件被满足，即只执行了其中一个CSS文件，但是3个CSS文件全部被浏览器请求到客户端加载，性能不好，所以这种用法并不常用。

用法二：在样式表中嵌入@media注解

body{
    font-family:"Microsoft YaHei";
    margin: 0;
}


@media screen and (min-width:990px){
    /**屏幕宽度大于990px*/
    h1 {
        font-size:3em;
        border-bottom: 3px solid #ccc;
    }

    .box{
        border:1px solid #3a3;
        background: #dfd;
        color: #282;
        padding:8px;
    }
}

@media screen and (min-width:767px) and (max-width:989px){
    h1 {
        font-size:2em;
        border-bottom: 3px solid #ccc;
    }

    .box{
        border:1px solid #a33;
        background: #fdd;
        color: #822;
        padding:6px;
    }
}


@media screen and (max-width:767px){
    /*h1 {*/
        /*font-size:1.5em;*/
        /*border-bottom: 3px solid #ccc;*/
    /*}*/
    h1 {
        display:none;
    }

    .box{
        border:1px solid #33a;
        background: #ddf;
        color: #228;
        padding:4px;
    }
}

注：media属性在样式切换时，并不是覆盖，而是未生效的css并没有被执行。

4. 如何测试响应式网页？

  1. 使用真实物理设备——效果可靠但任务量太大
    • 局域网：只要手机/平板/PC在同一个局域网（联同一个wifi）即可通过局域网IP访问
    • 互联网：免费或试用主机/云主机可实际测试，阿里云、SAE等
  2. 使用第三方工具测试
  3. 浏览器自带模拟器，F12调试工具。
    • 优势：可以模拟常见的设备、网速、经纬度、加速度….
    • 不足：效果有待进一步的验证

Tip:ChromeF12中按ESC，选择emulation标签，可以配置网络、触屏、经纬度和3D，重力加速度等等效果

5. 响应式设计的优缺点

优点：

  • 跨平台
  • 节省开发升本
  • 表现力一致

    缺点：

  • 为了照顾到所有屏幕，自由度低，局限性大
  • 代码冗余，加载较慢
  • 浏览器兼容性问题，低版本的IE内核会跪，用第三方兼容脚本又增加负载

这里是知乎上有人给出的响应式设计优缺点答案

参考：觉唯设计有一篇文章讲得很好《响应式设计这点小事儿》

热评文章