一种适合 H5 屏幕适配方案

文章预览

一、动态rem适配方案：适合H5项目的适配方案 1. @media媒体查询适配 首先，我们需要设置一个根元素的基准值，这个基准值通常根据视口宽度进行计算。可以在项目的 CSS 文件中，通过媒体查询动态调整根元素的  font-size 。 html  { font-size :  16px ;  /* 默认基准值 */ } ... @media  ( min-width: 1024px ) { html  {      font-size :  14px ;  /* 适配较大屏幕 */   } } @media  ( min-width: 1440px ) { html  {      font-size :  16px ;  /* 适配超大屏幕 */   } } 2. PostCSS 插件（自动转换）实现 px2rem 手动转换  px  为  rem  可能很繁琐，因此可以使用  PostCSS  插件  postcss-pxtorem  来自动完成这一转换。 2.1 安装 postcss-pxtorem 首先，在项目中安装 postcss-pxtorem 插件： npm install postcss-pxtorem --save-dev 2.2 配置 PostCSS 然后，在项目根目录创建或编辑 postcss.config.js 文件，添加 postcss-pxtorem 插件配置： / ………………………………