响应式布局2

不同分辨率、不同设备、不同的展示方式

1、设置viewport：

      <meta name="viewport" content="......">

2、媒体查询：

     @media mediatype and/not/only(media feature){CSS-Code;}

3、设置viewport的值：

     <meta name="viewport" content="width=device-width,user-scalable=no,........"/>

    value                        可能性                                             描述

   width                     正整数或device-width                设置移动设备页面宽度

   height                    正整数或device-height              设置移动设备页面高度

   initial-scale            0.0到到10.0之间的正数            设置移动设置页面初始缩放比率

   maximum-scale    0.0到到10.0之间的正数            设置页面最大缩放比率

   minimum-scale     0.0到到10.0之间的正数            设置页面最大缩放比率

   user-scalable        yes或no                                    设置用户是否可以对页面进行缩放

4、媒体查询：

       值                                          描述

      all                                       所有设备

     print                                    用于打印机和打印预览

     screen                                用于电脑屏幕、平板电脑、智能手机等

     speech                               应用于屏幕阅读器等发声设备

    例：@media all and (max-width:1920px;){

                div{

                      width:100%;

                       height:500px;

                      background-color:blue;

                      }

             }