移动端的适配

一、浏览器字体大小有两个需要注意的地方，有时候会碰到兼容性的问题。

第一，是浏览器默认的字体大小是16px，所以重置css的时候将字体大小默认改为10px是这样改的：

html,body {font-size: 62.5%;}

后面设置字体大小rem，em都依据body的字体大小计算比较方便。

第二，浏览器可以识别的最小字体也是有偏差的。
比如，谷歌可以识别的最小字体大小是12px，小于12px，依然按照12px显示。其他浏览器虽然会好点，但是尽量控制最小的字体在12px。再小的可以通过字体缩放实现，或图片等方式。
考虑浏览器兼容性，可以每次设置字体大小加上line-height，给个固定值，或百分比，控制盒子高度的一致性。

二、移动端的适配

（1）postcss-px-to-viewport

（2）px转化成rem

（a）安装postcss-pxtorem  利用js把代码中css的px转换成rem，这只是一个转化

（b）重点是下面的设置html根目录节点的大小

rem是相对于根目录html字体的大小

假设，设计稿是750，你设计750的根目录字体大小是32，也就是说1rem=32px，那么320px宽的iphone5的html的字体是多少呢？

根据计算： 

750 : 32 = 320: XX 则xx = 320 * 32 / 750 = 13.653px  

 

假设，设计稿是375，你设计375的根目录字体大小是16，也就是说1rem=16px，那么320px宽的iphone5的html的字体是多少呢？

根据计算：

 375 : 16 = 320: XX 则xx= 320 * 16 / 375 = 13.653px  

这一段过程可以利用js来实现：

function setRem () {
  document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  375 * 16 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', setRem);

这样不同的屏幕尺寸对应的根目录html字体的大小就设置好了。

注意：在postcss.config.js中的代码：

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 16,      //这里的16 不能随便乱改
      propList: ['*']
    }
  }
}

 

 

 

 

 

 

标签：字体大小,16,适配,px,端的,html,根目录,移动,375
来源： https://www.cnblogs.com/emma-post/p/10674938.html