viewport的单位vw、vh

vw、vhviewport分成了一百份。vw即 viewport width vh即viewport height

  • 1vw等于视图单位的1%的宽度
  • 1vh等于视图单位的1%的高度

如果设计稿的视图为375px 那么1vw 等于 3.75px

在配置开始之前 我们依然需要一个vue-cli项目 在项目的index.html 我们需要在head标签中添加如下代码

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

viewport适配解决方案

要使用viewport适配 我们必须安装postcss-px-to-viewport这个包。这包名是不是有一种似曾相识的感觉。

没错,上篇文章中我们使用过postcss-pxtorem。这两个包不仅名字相似,功能也有相似的地方。postcss-pxtorem是将 px单位转换为rem单位。postcss-px-to-viewport则是将px单位转换为vw、vh

//引入 postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
 

安装完成后 我们需要进行postcss插件相关的配置 在根目录新建一个名为postcss.config.js的文件,如果项目中已包含该文件则无需新建。在文件中写入如下代码:

//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/], // 设置忽略文件,用正则做目录名匹配
}
}
}
 

在配置上这两个包也有相似的功能。大家可以去参考一下postcss-px-to-viewport作者的github[4]

值得注意的是:postcss-px-to-viewport 同样存在第三方组件库兼容性的问题。比如在设计稿为750px时使用vant组件库会将vant组件的样式缩小。

解决第三方组件库兼容问题

vant组件库的设计稿是按照375px来开发的。因此在viewportWidth750px时会出现转换问题。

// postcss.config.js
const path = require('path'); module.exports = ({ webpack }) => {
const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
return {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
unitToConvert: "px",
viewportWidth: viewWidth,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
exclude: [],
landscape: false
}
}
}
}
 

如果读取的node_modules中的文件是vant,那么就将设计稿变为375px。如果读取的文件不是vant的文件,那么就将设计稿变为750px。这样就可以避免vant组件在750px下出现样式缩小的问题了。

同理 这对于其他的移动端UI组件库同样有效果。我们只需要改动这行代码即可

const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750; 
 

至此,我们的viewport的适配就做好了,只需要按照设计稿的比例进行开发就可以了。

作者:李知恩

https://juejin.cn/post/7061866685166256142

viewport适配解决方案的更多相关文章

  1. Qt之高DPI显示器(二) - 自适配解决方案分析

    目录 一.回顾 二.框架说明 1.ICallDPIChanged 2.IDPIHelper 3.悬浮窗体管理器 三.方案分析 1.窗口大小 2.字体大小 3.间距 4.图标 四.相关文章 原文链接:Q ...

  2. emoji表情多终端适配解决方案

    emoji表情多终端适配解决方案 emoji,也叫 颜表情 是日本在无线通信中所使用的视觉情感符号,由栗田穰崇(Shigetaka Kurita)创作,并在日本网络及手机用户中流行.自苹果公司发布的i ...

  3. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  4. 移动端适配(2)——viewport适配

    通过viewport来适配 <script> (function(){ var w=window.screen.width; console.log(w);//获取屏幕尺寸 var tar ...

  5. 【原】android【手机】屏幕适配解决方案,完美适配适配hdpi,xhdpi,xxhdpi的做法。

    1.先说要怎么做,后面在慢慢讲解: 2.现在来讲解为什么要放这三套: 这三套其实按内容来说就两种,为什么这两种可以适配hdpi,xhdpi,xxhdpi呢? 那么两种类型的dimens就可以了,为什么 ...

  6. 低价替代Vector CANoe CAN总线适配解决方案支持所有USBCAN(周立功CAN、PCAN、Kvaser、ValueCAN、NI CAN)

    在汽车通信领域CAN总线使用非常广泛,最强大的工具有Vector Case(10WRMB).Pcan(2KRMB),ZLGCAN(1.5KRMB),KVASER(2KRMB).ValueCAN(4KR ...

  7. iPhone X 适配解决方案

    在head里添加<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 这将导致一个页面允分利用iPhon ...

  8. 指令汇B新闻客户端开发(六) 浅谈屏幕适配解决方案

    屏幕适配的问题,我相信很多大牛的经验远比我丰富,在此就简单的分享一下我所做的的屏幕适配方案,当然我说的是安卓方面的啦,嘿嘿,屏幕适配我们一般用1280*720的屏幕作为我们的主流开发屏,当然现在And ...

  9. 移动端H5多终端适配解决方案

    推荐三篇文章: 1.来自手淘团队的开源技术flexibal.js github地址:https://github.com/isHelenaChan/flexible 2.来自“大漠”(就职于淘宝,也是 ...

  10. RecyclerView使用技巧(item动画及嵌套高度适配解决方案)

    原文地址 · Frank-Zhu  http://frank-zhu.github.io/android/2015/02/26/android-recyclerview-part-3/?utm_sou ...

随机推荐

  1. react 02 组件state click

    一,组件 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // 函数式组件 ret ...

  2. python实现Excel的表头与索引之间的转换

    字母转数字 def get_index(capital): """ 大写字母(Excel列头)转索引 :param capital: 'A' --> 0, 'AA' ...

  3. sping入门介绍-bean标签的属性

    bean标签的属性 1 .基础属性 <bean id="userDao" class="com.itheima.dao.impl.UserDaoImpl" ...

  4. dism修改easyu中10PEx64.wim文件

    从easyu的iso镜像中提取出10PEx64.wim文件,新建一个空分区,比如Z: 1.获取wim映像索引信息,命令 Dism /Get-WimInfo /WimFile:10PEx64.wim,一 ...

  5. Server2008通过bat命令自动定时备份MySQL数据库

    第一种方法: 环境: MySQL 安装位置:D:\MySQL 论坛数据库名称为:Db_Test 数据库备份目的地:D:\db_bak\ 1.首先新建一个bat文件 rem ************** ...

  6. Software_programming_tools_IDEA

    13:45:55 key promtoer 快捷键提示插件

  7. uniapp使用百度地图

    要使用第三方百度地图,首先要去百度地图官方申请一个密钥,之后引入百度地图的API文件,参考使用文档即可开发使用.而在uniapp中是没法直接引入百度地图API文件的,我们要结合uniapp中的web- ...

  8. leecode64. 最小路径和(动态规划)

    64. 最小路径和 给定一个包含非负整数的 m x n 网格 grid ,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例 1: 输入:gri ...

  9. byte最高位

    /** * 将byte转换为一个长度为8的byte数组,数组每个值代表bit */public static byte[] replaceSpace(Byte b){ byte[] array=new ...

  10. SVN 提交失败 Unexpected HTTP status 200 'OK' on 'PUT' request to

    提交SVN 时 提示  Commit Failed  Unexpected  HTTP status 200 'OK' on 'PUT' request to 旧的文件在SVN 上也无法删除,删除文件 ...