响应式布局

Posted 2022-12-28 cnlisiyiii-stu

布局类别

固定网页布局：设置固定宽度，px为单位。常见PC端页面。

流式布局+伸缩布局+rem+媒体查询：设置相对宽度，%为单位。适配移动页面。

响应式布局：检测设备信息决定布局方式。一般通过检测设备的宽度。适合结构简单的页面。（比如公司宣传页面、个人博客）

栅格化布局：css框架Bootstrap。通常%为单位。

---

 

 

响应式布局

利用媒体查询，检测不同设备。

常见屏幕大小尺寸：

大屏幕：大于等于1200px(min-width: 1200px) PC端

默认：小于等于980px(max-width: 980px)

平板：大于等于768px(min-width: 768px)

手机：小于等于480px(max-width: 414px)

 1     /* 默认是大屏幕 */
 2         body 
 3             background: red;
 4         
 5         /* 屏幕宽度为768px~980px时 */
 6         @media screen and (max-width:980px) and (min-width:768px) 
 7             body 
 8                 background: blue;
 9             
10         
11         /* 屏幕宽度小于768px时 */
12         @media screen and (max-width:768px) 
13             body 
14                 background: green;
15             
16