css布局概念和单位
2020-06-26 本文已影响0人
海豚先生的博客
响应式（Responsive web design, RWD）
- 是指一套应用程序用户界面（User Interface）能自动响应不同设备窗口或屏幕尺寸（screen size）并且内容，布局渲染表现良好。
- 常用媒体查询配合响应式设计
自适应设计(AWD)
- 是指一个应用程序使用多套用户界面，针对不同设备屏幕，服务器端返回不同版本用户界面，供用户访问。
- 自适应可以在不同版本使用不同适配方案，如在PC端使用百分比，在移动端使用rem等
物理像素（device pixel）
- 也叫设备像素，实际像素，在计算机数字图像中，一个像素（pixel）或一个点（dot）是在一个光栅图片（raster image）中的一个物理点，它是图像在屏幕上展示的的最小可控制元素。
CSS像素（CSS Pixel）
也作逻辑像素，虚拟像素，它仅仅是描述图像单元信息的概念，通常描述图像中某一个小方框所需要展示的颜色值，而这一些列方框点合起来就能描述一幅图像，web编程中用来度量网页内容尺寸或位置的就是这个抽象单位。
em
- em是在web文档中使用的一个缩放单位，1em等于最近父元素的font-size字体尺寸，如最近父元素字体为14px，则1em=14px。使用em单位表示的尺寸可以较好的在多终端浏览器进行样式适配。
- 浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素
rem
- rem也是一个缩放单位，参照的是文档根元素<html>的font-size属性，<html>的font-size属性为12px，则1rem=12px。
- 由于rem基于根元素字体大小计算，所以在文档中，任何一处使用rem单位计算基准都一样，使得尺寸计算得到统一，在目前的PC，移动端多设备适配方案中，rem比em更常见。
百分比（%）
- 还有一个%百分比单位，基于最近父元素的相关属性尺寸，乘以分配的百分比数。
- 特别注意的是margin,padding属性值为百分比时，是基于当前元素width值的。
- %单位也是一个缩放单位，所以也常用于样式适配。
vh vw
- vh是相对于浏览器视口，100vh相当于高度等于浏览器视口的高度，100vw同理
CSS3 媒体查询（media query）
- CSS3 中的 Media Queries 增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。
