近期在做移动端的项目,用到rem的相关知识。先上代码。
//css
@media screen and (width: 320px) {
html, body {
font-size: 8.533px;
}
}
@media screen and (width: 360px) {
html, body {
font-size: 9.6px;
}
}
@media screen and (width: 375px) {
html, body {
font-size: 10px;
}
}
@media screen and (width: 414px) {
html, body {
font-size: 11.04px;
}
}
@media screen and (width: 412px) {
html, body {
font-size: 41.2px;
}
}
@media screen and (width: 768px) {
html, body {
font-size: 20.48px;
}
}
@media screen and (width: 1024px) {
html, body {
font-size: 27.306px;
}
}
上面的css是以设计图宽度为750px设计的媒体查询,即1rem=10px。具体的写法是,在设计图上量取长度,然后除以20,就得到相应的rem值。即(量取的为40px就写成2rem。)
还有两个常用的单位:
vh和vw。这两个单位没有具体的定量,但是比较好用。他们是根据设备的宽高设定的。即100vh=设备的高,100vw=设备的宽。也是比较好用的两个单位。