文章序

适配问题一直是前端开发中很重要的一个问题，可以说是最影响用户体验的问题之一，本文整理前端适配的相关方法，持续更新.

font-size + rem

设定一个基线，比如说屏幕宽度为1920px时，设置font-size为16px，此时1rem等于16px，让UI根据1920px宽的屏幕去设计，我们在main.js内编写方法或者使用媒体查询， 去根据屏幕宽度动态设置font-size的大小，页面通过flex布局+rem单位+百分比，拒绝使用任何绝对单位比如px，则可以实现适配.

媒体查询

@media screen and(min-width: 1920px) {
body{font-size: 30px;}
}
@media screen and(min-width: 1440px) {
body{font-size: 24px;}
}

自己写函数

window.onload =function(){
  document.documentElement.style.fontSize = (window.screen.availWidth /1920)*16+'px'
}
// 页面宽度发生变化时onresize 
// 1920设计图的width
window.onresize = function(){
  document.documentElement.style.fontSize = (window.screen.availWidth /1920)*16+'px'
}

这种会根据当前窗口宽度与1920的系数关系，乘上16px获取当前应该的font-size大小，比如说在宽度1920px下一个div和宽应该是320px，则我们需要在css里面写成20rem.