參考網易的rem適配方案,大致如下:
第一步:
media標簽寫在head里面:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
第二步:加載頭部script
<!--定義rem值:網易移動適配方案!-->
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
</script>
附注:7.5是根據你的設計稿的width決定寫多少,如果是640的,那就寫6.4;其他道理一樣!
第三步:在css樣式里,一個div如果是寬500px 高200px;那么就是這樣寫:
div{width:5rem;
height:2rem
}
字體不用rem;直接寫像素!就是這么簡單!
第四步:添加一個css
@media screen and (max-width:321px){
font-size:15px
}
@media screen and (min-width:321px) and (max-width:400px){
font-size:16px
}
@media screen and (min-width:400px){
font-size:18px
}