16 响应式

16 响应式

响应式布局概念

• 2010 年 5 月 由国外著名网页设计师 Ethan Marcotte 所提出

• 页面的设计与开发应当根据用户行为以及设备环境 ( 系统平台、屏幕尺寸、屏幕定向等 ) 进行相应的响应和调整。

技术要点

• 标签设置

  • <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <!-- 如果可能，调用 chome 内核，或者高版本的 IE 内核 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 兼容不支持 viewport 的设备（魅族） -->
    <meta name="HandheldFriendly" content="true">

• 使用媒体查询适配对应样式

  • 根据目标用户的访问设备的主要类型做三种或四种布局，分别设置一套样式。

  • 移动端优先：
    /* 超小型设备（手机，768px 以下）*/
    @media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 以上） */
    @media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） */
    @media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */
    大屏优先：
    /* 大型设备（大台式电脑，1200px 以上） */
    @media screen and (max-width:1200px) { ... } /* 中型设备（台式电脑，1200px 以下） */
    @media screen and (max-width:992px){ ... }/* 小型设备（平板电脑，992px 以下） */
    @media screen and (max-width:768px){ ... }/* 超小型设备（手机，768px 以下） */

• 百分比布局

  • 宽度不固定，可以使用百分比，内外边距也可以使用百分比。

    #head{width:100%;}

    #content{width:50%;}

    ul li{ width:16%;padding:1%; margin:0 1%;}

• 响应式图片

  • img{
     width:100%;
     height:auto;
     display:block;
    }

• 横竖屏

  • /* 横屏: 设备屏幕的宽比高大 */
           @media screen and (orientation: landscape) {
               .box {
                   background-color: red;
               }
           }
           /* 竖屏：设备屏幕的宽比高小 */
           @media screen and (orientation: portrait) {
               .box {
                   background-color: blue;
               }
           }