常见的CSS布局单位

Posted 2023-04-04

参考技术A

常用的布局单位包括像素（ px ），百分比（ % ）， em ， rem ， vw/vh 。

（1）像素 （ px ）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：

（2）百分比 （ % ），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

（3）em和rem 相对于px更具灵活性，它们都是相对长度单位，它们之间的区别： em相对于父元素，rem相对于根元素。

（4）vw/vh 是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

vw/vh 和百分比很类似，两者的区别：

响应式布局

布局类别

固定网页布局：设置固定宽度，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