pc页面样式自适应的几种方案

扩展知识

1. font-size 默认值

• 浏览器默认fontSize为16px、即100%=16px 1px=62.5%、 即默认16px 代表1rem

2. vw（相对单位）

• 屏幕分成100份=100vw宽 1vw=1%屏幕宽
• 若根HTML为1vw 即1920分辨率下 即1vw=19.2px

第一种（rem适配）

一、px自动转为rem

利用 postcss-pxtorem插件，将代码中px自动转为rem

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 19.2,//结果为：设计稿元素尺寸/19.2，比如元素宽1920px,最终页面会换算成 100rem
      propList: ['*']
    }
  }
}

二、自适应计算设置根font-size的px

//默认设计感1920  html的font-size为19.2rem
windowResize();
let timer;
const BaseFontSize = 100;
window.onresize = windowResize;
function windowResize() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    const width = document.body.clientWidth;
    const widthNum = width / BaseFontSize;
    document.documentElement.style.fontSize = widthNum + "px";
  }, 100);
}

三、使用

正常使用px即可

//设计稿为1920
1.使用
div{
    width:1920px; //postcss会将1920/19.2=100rem 
}
2.动态响应式计算设置html size为xx px
默认设置19.2px 

第二种（rem+vw）

一、利用postcss插件将px转为rem

二、设置html的font-size 为vw

(自动计算)

//1920分辨率下
html{
    font-size:1vw; 1vw=1920/100=19.2px
}

三、媒体查询

解决屏幕过大过小问题

第三种

一、根据动态计算的px设置html的font-size

//默认1920下根HTML的size为100px
windowResize();
let timer;
const BaseWidth = 1920;
const BaseFontSize = 100;
window.onresize = windowResize;
function windowResize() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    let width = document.body.clientWidth;
    let widthNum = (width / BaseWidth) * BaseFontSize;
    document.documentElement.style.fontSize = widthNum + "px";
  }, 100);
}

二、使用 代码使用rem

//设计稿为1920
1.使用
div{
    width:19.2rem; 19.2rem=1920px
}
2.动态响应式计算设置html size为xx px
默认设置100px

区别

第一种和第二种 代码使用px 利用postcss插件将px转为rem
第三种是代码直接使用rem