响应式网页

响应式网页

• 响应式网页可以根据设备的不同，以及特性的不同，而自动改变布局、大小等。

• 响应式网页的特征：
  1）流式网格布局
  2）可伸缩的图片和字体
  3）CSS3 Media Query

• 优缺点

  • 优点：可以自动适配PC/PAD/PHONE浏览器屏幕
  • 缺点：代码变复杂，需要考虑更多的兼容性，并不适合内容非常多的网页

响应式网页测试

• 真实物理设备
  • 优点：测试结构真实可靠
  • 缺点：测试任务量太大
• 第三方软件
  • 优点：无需添置真实设备
  • 缺点：软件测试效率低，部分功能无法测试，测试结果有待进一步验证
• 使用浏览器模拟器测试
  • 优点：测试功能大，简单易用
  • 缺点：测试结果有待进一步验证

响应式布局必须要清除的两个概念：viewport、CSS3 Media Query

• viewport：用于显示网页内容的一个逻辑概念，其高度和宽度可以任意制定，网页不是显示在物理窗口上，而是显示在视口中，这样就可以实现网页不经缩放

    viewport用法：<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
  
    viewport可以指定如下属性：
        width：视口的宽度，可以取值为数值，或者device-width
        height：视口的高度，一般不指定
        initial-scale：初始时的缩放倍率
              minimum-scale：允许的最小缩放倍率
              maximum-scale：允许的最大缩放倍率
              user-scalable：允许用户手动缩放，可取值1/0/yes/no
  

• CSS3 Media Query:根据客户端浏览设备的特性，有选择的执行部分css

  1) 作用：根据客户端浏览设备的特性，有选择的执行部分css
  
  2) media: 指浏览网页的设备，如screen
  
  3) Query: 查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩、方向(landscape/portrait)
  
  4) css3MediaQuery有两种用法
  
     根据媒体的特性，加载不同的外部css
  
       <link media="screen and (min-width:990px)and(max-width:1500px)" rel="stylesheet" type="text/css" href="css/pc.css"/>
  
       不足：客户端会不管媒体特性，请求所有的css文件
  
     根据媒体的特性，执行某段css中的部分内容
  
       @media screen and (min-width: 990px) {}
  

如何编写响应式网页

• 在head标签中，声明viewport元标签, 使网页的视口和浏览器的宽高保持一致

   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
  

• 根据浏览器的不同，加载不同的css文件
  <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="smallScreen.css" />

   <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="tinyScreen.css" />
  

• 同一个css文件中，也根据不同的屏幕分辨率，选择应用不同的css规则

     @media screen and (max-device-width: 400px) {
      　.column {
    　　　　　　float: none;
    　　　　　　width:auto;
    　　　}
          #sidebar {
    　　　　　　display:none;
    　　　}
    }
    @media screen and (max-device-width:600px){
          .column{
                    float:left;
                     width:auto;
                  }
          #sidebar{
                  display:block;
                 }
         }