简单的实现移动端的rem+vw布局
- 首先对视口进行操作
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- 由于设计稿是750*1334的,然后产生了等式。设置根字体为1rem；
- 750px=7.5rem=100vw；
- 1rem=13.3333333vw=100px；
但是这里的
html {
height: 100%;
font-size: 50px; // 向下兼容 不止vw时候 写死font-size
font-size: 13.33333333vw; // 7.5rem === 100vw
margin: 0 auto;
}
@media (min-width: 560px) { // pc兼容
html,body {
font-size: 54px;
max-width: 540px;
}
}
@media (max-width: 1024px) { // ipad兼容：ipad最大1024px
html,body {
max-width: 1024px;
}
}
