css响应式布局

16次阅读

共计 818 个字符，预计需要花费 3 分钟才能阅读完成。

响应式布局

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

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;}
        }

响应式布局框架