手机端自适应字体大小rem - 奔驰的码儿

手机端自适应字体大小rem

1 function fontSize(){
2     var deviceWidth=document.documentElement.clientWidth>768?768:document.documentElement.clientWidth;
3     document.documentElement.style.fontSize=(deviceWidth/25)+"px";
4 }
5 fontSize();
6 window.onresize=fontSize;

vue 引入js代码  

import \'@/utils/h5\';

 

切图时看设计稿多宽页面就定义多大的宽度，字体的大小和内容的宽高就看设计稿的px

比如是24px，那么写样式就是1.5rem

这个时候牵扯算法1rem = 16px

 

vscode 安装cssrem插件，px自动计算转换为rem