前端rem布局知识总结

---

为什么使用 rem 布局？

• 采用 rem 布局，可以让屏幕发生变化时，元素的高度和宽度以及文字大小等能够等比例缩放
• 父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好的控制整个页面的元素大小

媒体查询

为什么使用媒体查询？

媒体查询可以在不同大小的屏幕中渲染当前页面时，动态的根据当前屏幕初始化 html 的 font-size 的值

媒体查询语法

@media mediatype and|not|only (media feature) { 
	CSS-Code; 
}

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机等

关键字(逻辑操作符)

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

• and：可以将多个媒体特性连接到一起，相当于“且”的意思

@media screen and (min-width:600px) and (max-width:900px){ 
	body{
		background-color: red; 
	} 
}

• not：排除某个媒体类型，相当于“非”的意思，可以省略
• only：指定某个特定的媒体类型，可以省略
• ,：表示或者的意思

@media screen and (min-width:900px),(max-width:600px){ 
	body{
		background-color: red; 
	} 
}

媒体特性

值	解释说明
width	用于所有设备
min-width	用于打印机和打印预览
max-width	用于电脑屏幕，平板电脑，智能手机等

媒体查询书写规则

前面的设置不能包含在后面的媒体查询中，否则就会失效