rem用于移动端响应布局
- rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小
- html
<meta name="viewport"
content="width=device-width,
user-scalable=no,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0"/>
缩放比例1.0
html{ //根元素设置100px
font-size: 100px;
}
//单位换算
//真实宽度/640=真实字号/100;
//真实字号=100*(真实宽度/640)
const viewScale = document.documentElement.clientWidth / 640;
document.documentElement.style.fontSize = 100 * viewScale + 'px';
- 所有css中，px换成以rem为单位的，原大小除以100即可。
@media媒体查询
- @media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利
- 媒体类型
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等。（最常用）
speech 应用于屏幕阅读器等发声设备
max-width 定义输出设备中的页面最大可见区域宽度
min-width 定义输出设备中的页面最小可见区域宽度
@media screen and (max-width: 300px) {//文档宽度小于等于300px时body背景是亮蓝色
body {
background-color:lightblue;
}
}
@media screen and (min-width: 300px){//文档宽度大于等于300px时body背景是亮蓝色
body {
background-color:lightblue;
}
}
@media screen and (min-width:300px) and (max-width:500px) {//文档宽度大于等于300px小于等于500px时加载css代码
/* CSS 代码 */
}
