响应式网页

响应式网页

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

  • 响应式网页的特征:
    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;
                   }
           }
    

推荐阅读更多精彩内容