关于web前端在移动端的适配问题

为了能在不同尺寸不同分辨率的设备上，能够保持同样的大小、间距、位置。所以需要进行一些适配，但此时如果说用媒体查询的话，未免太过繁杂。

所以需要一些插件辅助我们进行编码

废话不多说，直接上代码。

方案一（sass）

// setSize.js
//动态设置html的font-size

// 此文件在main.js中require("setSize.js")function setSizeRem () {
  var width = document.documentElement.clientWidth
  var html = document.querySelector('html')
  html.style.fontSize = width / 10 + 'px'
}
setSizeRem()
window.addEventListener('resize', setSizeRem)
              

// setSize.scss
// 此scss方法应作为全局方法使用
// 以375尺寸设计的图$ren就设置为37.5  以414的就设置为41.4，以此类推。
@function torem($px){
  $rem: 37.5px;
  @return ($px / $rem) + rem;
}              

引用setSize.js和setSize.scss之后。便可以进行编码了。将会自动转成能够适合各尺寸设备的rem

以vue为例

<style lang="sass" >
.box{
    width:torem(200px);
    height:torem(200px)
}
</style>

方案二（postcss）

安装依赖

yarn add postcss-px-to-viewport
或者
npm install postcss-px-to-viewport

在index.html添加代码

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

然后在根目录下创建postcss.config.js并添加以下代码即可

module.exports = {
    plugins: {
      'postcss-px-to-viewport': {
       unitToConvert: "px", // 要转化的单位       
       viewportWidth: 375, // UI设计稿的宽度       
       unitPrecision: 6, // 转换后的精度，即小数点位数       
       propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换     
       viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw       
       fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，       
       minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换       
       mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false      
       replace: true, // 是否转换后直接更换属性值       
       exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配       
      }
    }
}
              

然后就可以快乐的进行编码啦

以vue为例

<style lang="sass" >
.box{
    width:200px;
    height:200px
}
</style>
是的，按照平常这样写就可以了。会自动帮你转换

个人建议使用方案二，比较方便