H5适配解决方案(移动端+PC端)
2019-04-22 本文已影响0人
秋玄语道
一、方案一
/*CSS全局中*/
:root {
/* 计算后 html的 font-size: 50px */
font-size: 13.3333333vw; /* font-size=50/375*100% 使用的是苹果两倍的设计 */
}
/* 防止页面过宽,限制600px,超过后固定font-size: 80px */
@media (min-width: 600px) {
:root {
font-size: 80px;
}
}
body,html{font-size: 0.32rem;}
/* 之后在其他样式中可以使用 rem em 来设计布局和样式 */
.div{
background-color:red;
height: 2rem;
width: 3rem;
}
一、方案二
/* 全局中*/
<script>
var fontSize = 50;
var elm = document.documentElement;
elm.style.fontSize = fontSize * (elm.offsetWidth /375) + "px";
</script>
/*css全局中*/
body,html{font-size: 0.32rem;max-width: 600px !important;}