css响应式布局

117次阅读

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

响应式布局框架

bootstrap

正文完
 0