css3-响应式布局

响应式布局

布局会根据屏幕宽度进行调整

1.应用在pc端
当检测到用户的屏幕分辨率较小，比如小于1280px，内容区域为990px；
当用户屏幕分辨率较大，比如大于1420px，内容区域为1109px；
这个变化不需要程序员调整，程序自动使用

2.应用在移动设备中（mobile）
手机端网页会使用终端设备，并且占满整个屏幕
手机的像素及宽度大不相同
iphone
华为
小米
方案1，2结合的大型电商及体量较大的网站会使用（京东，淘宝，腾讯视频）

3.既可以在pc中打开也可以在移动设备中打开（一般newbalance中国/特斯拉会采用这种方案）
如果在pc中打开，一行放6列    
如果在pad中打开，一行放4列
如果在phone中打开，一行放2列
语法：
    1.在link中使用媒体查询
<link rel="stylesheet" href="./css/1-style-990.css" media="(max-width:1300px)" >
        <link rel="stylesheet" href="./css/1-style-1190.css" media="(min-width:1300px) and ((max-width:1600px))">
        <link rel="stylesheet" href="./css/1-style-1480.css" media="(min-width:1600px)">
    2.通过@media来进行设置
        @media screen and (max-width: 1300px) {
              .wrapper {
                   width: 990px;
              }
              /*可以添加任意的响应式代码*/
        }
        @media screen and (min-width: 1300px) and (max-width: 1600px) {
              .wrapper {
                   width: 1190px;
             }
        }    
        @media screen and (min-width: 1600px) {
              .wrapper {
                 width: 1480px;
              }
        }

响应式布局框架

bootstrap