前端rem布局知识总结

前端rem布局知识总结

  • 为什么使用 rem 布局?
  • 媒体查询
    • 为什么使用媒体查询?
    • 媒体查询语法
      • mediatype 查询类型
      • 关键字(逻辑操作符)
      • 媒体特性
      • 媒体查询书写规则


为什么使用 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 用于电脑屏幕,平板电脑,智能手机等

媒体查询书写规则

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

你可能感兴趣的:(web前端,前端)