一种开箱即贼好用的移动端适配方案

栏目: IT技术 · 发布时间: 4年前

内容简介:在之前有一种流行已久的移动端适配方案,那就是

主角是谁

  • 在今天这篇文章中,我并不会在这里讲一些移动端视口的概念,包括物理像素和逻辑像素,理想视口,dpr等等等等,我只介绍这样一种非常不错的移动端适配方案: post-css-to-viewport ,如果我说这种方案能解决98%以上的移动端布局痛点,我想整个博客园,应该没有人会反驳。

一种开箱即贼好用的移动端适配方案

痛点在哪里

在之前有一种流行已久的移动端适配方案,那就是 rem ,我想下面这两句代码,有不少老移动端都不会陌生:

    const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
    document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';
  • 没错,在那个移动端UI稿尺寸为 750*1334 满天飞的时代,这两句代码确实给开发者带来了很大的方便,这样设置根font-size后,px和rem的转换比例成了100, 为比如UI稿一个长宽分别为 120px*40px ,那么开发者对应的写成 1.2rem*0.4rem 就可以了
  • 这种换算已经是颇为方便,但是并非所有的项目都能这样去设置一个方便换算的比例系数,当比例系数为100时,小数点往前面挪两位就行了,然而有的项目设置的换算系数千奇百怪,有50的,有16的,很多已经严重超出口算力所能及的范畴了。所以后来诞生的 px-to-rem 或者 px2rem 就是为了解决这个问题
  • 当然,这仍没有给css带来多少简洁的清流,因为人们有时候不需要去转换一些单位,比如字体大小 font-size ,有不少人希望给字体设置一个固定的px,它不会随着设备的不同而转换成rem,因为这样在一些平板设备上显得太大了

人们希望有这样一种方案...

  • 首先,无论换算方不方便,我都不想换算(就是这么懒 ),我也不想去操心什么转换系数
  • 其次,有些属性或者类选择器我不想进行转换
  • css代码要足够简洁,我只希望看到一种单位,那就是px

现在,它来了

  • postcss-px-to-viewport 就是这样一款优秀的插件,它解决了以上提到的痛点,也满足以上提到的理想要求。它将px转换成视口单位vw,众所周知,vw本质上还是一种百分比单位,100vw即等于100%,即 window.innerWidth

在vue项目中引入试试

  1. 我们先把它安装到项目的开发环境中:
 npm i postcss-px-to-viewport -D
.postcssrc.js
module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度,即小数点位数
      propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw
      selectorBlackList: ["van"], // 指定不转换为视窗单位的类名
      minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  }
};
  1. 重新运行项目,使配置文件生效
  2. 我们写一段测试代码来验证一下:
<template>
  <div>测试转换</div>
</template>

<style lang="less" scoped>
.test-viewport {
  width: 750px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  background: #13b5b1;
}
</style>
  1. 打开控制台,可以看到已经进行了转换

一种开箱即贼好用的移动端适配方案

需要注意的配置

  • propList : 当有些属性的单位我们不希望转换的时候,可以添加在数组后面,并在前面加上!号,如 propList: ["*","!letter-spacing"] ,这表示:所有css属性的属性的单位都进行转化,除了 letter-spacing
  • selectorBlackList :转换的黑名单,在黑名单里面的我们可以写入字符串,只要类名包含有这个字符串,就不会被匹配。比如 selectorBlackList: ['van'] ,它表示形如 van , van-tab , tab-van , vant 这样的类名的单位,都不会被转换

本文使用 mdnice 排版


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法设计与实验题解

算法设计与实验题解

王晓东 / 电子工业 / 2006-9 / 46.00元

《算法设计与实验题解》是与普通高等教育“十一五”国家级规划教材《计算机算法设计与分析》(第2版)配套的辅助教材,对主教材中的全部习题做了解答或给出了解题思路提示,并对主教材的内容进行了扩展,有些主教材中无法讲述的较深入的主题以习题的形式展现出来。为了提高学生解决实际问题的能力,《算法设计与实验题解》还将主教材中的许多习题改造成算法实现题,要求学生设计出算法并上机实现。作者还结合精品课程建设,进行了......一起来看看 《算法设计与实验题解》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具