h5中使用rem、vm和vh、@media实现屏幕适配

一、使用rem

1.使用postcss-pxtorem包实现自适应

  通过npm install postcss-pxtorem安装包，在postcss.config.js中添加配置

   postcss: {
         plugins: {
        'postcss-pxtorem': {
          rootValue: 37.5,  // 换算的基数 默认100，作用 设计稿上元素宽375px,最终页面会换算成 10rem
          propList: ['*']
        }  
      }
    },

 页面中可以直接使用px单位，会自动编译为rem

2.在scss样式中通过变量实现自适应

  在common.scss中添加公共方法

@function pxTorem($px){
	$rem: 37.5px;
	@return ($px / $rem) + rem;
}

 

// 在页面scss中引入common.scss文件
.test {
    width: pxTorem(10px)
}

3.直接在html中设置

  由于浏览器默认的字体大小为16px，因此html中一般设置

html {
    font-size: 10px;
}
div {
    width: 30px / 10px = 3rem;
}

  按照这个计算转为rem的值，如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

4.如果要让部分属性不转换成 rem，可以将 px 写成 Px：

 如： border: 1Px