“postcss-px-to-viewport”——移动端前端适配的又一种方案
0、前言
博主以前在做移动端的时候主要使用
@media screen and (min-width: 1200px){ }
或者灵活点,会用之前一种流行已久的移动端适配方案,那就是rem,也就是会用如下代码:
const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';
这的确十分方便,也是我最喜欢的方案,参考vue项目设置活性字体(自适应字体大小)
之前,和公司前端交流的使用发现了一种新的方案,就是用viewport单位,现在viewport单位越来越受到众多浏览器的支持,
postcss-px-to-viewport,将px单位自动转换成viewport单位,用起来超级简单,postcss-px-to-viewport 文档
1、安装
在项目里使用npm或者yarn进行安装。
使用npm安装:npm install postcss-px-to-viewport --save-dev
使用yarn安装:yarn add -D postcss-px-to-viewport
更新完整版npm:npm i https://github.com/evrone/postcss-px-to-viewport --save-dev
2、配置参数
在项目的最外层新建.postcssrc.js文件,注意文件开头的“.”不可少,博主之前在使用的时候踩了坑,在.postcssrc.js文件中加入配置语句,.postcssrc.js全部内容如下,.postcssrc.js更新需要重启才会生效:
module.exports = {plugins: {autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等"postcss-px-to-viewport": {unitToConvert: "px", // 要转化的单位viewportWidth: 750, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度,即小数点位数propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vwselectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名,minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认falsereplace: true, // 是否转换后直接更换属性值exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配include: /Test.vue/, //如果设置了include,那将只有匹配到的文件才会被转换landscape: false, // 是否处理横屏情况landscapeUnit: 'vw', //横屏时使用的单位landscapeWidth: 568 //横屏时使用的视口宽度}}
};
相关参数解释,以下来源于官方文档:postcss-px-to-viewport中文文档
参数 | 解释 |
---|---|
unitToConvert | (String)需要转换的单位,默认为"px" |
viewportWidth | (Number)设计稿的视口宽度 |
unitPrecision | (Number)单位转换后保留的精度 |
propList | (Array)指定转换的css属性的单位 |
viewportUnit | (String)指定需要转换成的视窗单位 |
fontViewportUnit | (String)指定字体需要转换成的视窗单位 |
selectorBlackList | (Array)需要忽略的CSS选择器,不会转为视窗单位,使用原有单位 |
minPixelValue | (Number)设置最小的转换数值,默认为1,只有大于1的值会被转换 |
mediaQuery | (Boolean)媒体查询里的单位是否需要转换单位 |
replace | (Boolean)是否直接更换属性值,而不添加备用属性 |
exclude | (Array or Regexp)忽略某些文件夹下的文件或特定文件,如 ‘node_modules’ |
include | (Array or Regexp)只有匹配到的文件才会被转换,如’src/mobile’ |
landscape | (Boolean)是否添加根据 landscapeWidth 生成的媒体查询条件 |
landscapeUnit | (String)横屏时使用的单位 |
landscapeWidth | (Number)横屏时使用的视口宽度 |
其中,exclude
和include
是可以一起设置的,将取两者规则的交集。
3、编写前端页面进行测试
<template><div class="container"><div class="list"><div class="list-item" v-for="item in 5" :key="item"><p>实例{{item}}</p><!--v-for循环--></div></div></div>
</template><style scoped lang="scss">/*博主这边使用了scss,需要事先在项目里安装好,vue-cli3.0新建项目可以手动添加,或者用一般的css写法也行*/*{margin: 0;padding: 0;list-style: none;outline: none;.container{padding-top: 20px;width: 100%;.list:before,.list:after{display: block;content: "";clear: both;}.list{width: 1200px;margin: 0 auto;.list-item:last-of-type{margin-right: 0;}.list-item{width: calc((1200px - 40px)*0.2);margin-right: 10px;height: 100px;background: turquoise;float: left;border-radius: 3px;p{width: 100%;text-align: center;height: 100px;line-height: 100px;font-size: 20px;color: white;}}}}}
</style>
4、对比
4.1.1-前端页面(未设置)
4.1.2-前端页面(设置生效)
4.2.1-css样式(未设置)
4.2.2-css样式(设置生效)
5、问题与解释
1-vm相当于一个比例单位,可以理解为%,而“postcss-px-to-viewport”是以你在.postcssrc.js文件中设置的viewportWidth为基数,你在项目中设置的px为转化前值进行比例转化的,比如:viewportWidth=300,你项目中设置的字体为150px,那么转化之后就是50vm,公式:150(项目转化前值/300(b比例基数)*100vm=50(转化后值)vm。
2-“postcss-px-to-viewport”会对内联css样式,外联css样式有效,对内嵌css样式,js动态css无效。
5.2.1-内联css样式(生效)
5.2.2-外联css样式(生效)
5.2.3-内嵌css样式(未生效)
5.2.4-js动态css(未生效)
3-官方更新产生的问题:如果你需要用到include,那一定要用第一步中的npm i https://github.com/evrone/postcss-px-to-viewport --save-dev
,而不是npm install postcss-px-to-viewport --save-dev,为什么呢?
答案:include 是上个月才做的,还没有 release,但是文档已经提前更新了,所以可以先使用github仓库的代码,说白了用github仓库的可以用include,否则include无效。
解答地址:https://github.com/evrone/postcss-px-to-viewport/issues/53
6、参考
1、https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
2、https://developer.aliyun.com/mirror/npm/package/postcss-px-to-viewport
7、自我拓展
“postcss-px-to-viewport”主要是用于移动端,但是博主在设置完成之后发现,我的项目不做相关设置的情况下,都会被“postcss-px-to-viewport”转化,这不是博主想要的,博主只想在移动端生效,pc端不起作用,那该怎么办呢?博主想到了以下几种方法:
1、监控屏幕宽度或者设备,对应移动端的设置移动端基数,对应pc端的设置pc端基数,也就是动态设置.postcssrc.js文件中的viewportWidth参数值,博主尝试过但没有成功,如果小伙伴们有办法解决,可以和博主交流。
2、设置配置参数中的 exclude,include。这就需要将移动端和pc端页面文件分开,设置匹配移动端生效或者设置排除pc端不生效。
默认不设置是生效的。
exclude: undefined, // 设置忽略文件,用正则做目录名匹配
include: undefined, //如果设置了include,那将只有匹配到的文件才会被转换
这样设置对应的Mode.vue就不会生效。
exclude:[/Mode.vue/], // 设置忽略文件,用正则做目录名匹配
include: undefined, //如果设置了include,那将只有匹配到的文件才会被转换
这样设置只有对应mobile文件夹下的才会生效。
exclude:undefined, // 设置忽略文件,用正则做目录名匹配
include: /mobile/, //如果设置了include,那将只有匹配到的文件才会被转换
博主个人比较倾向与include匹配生效,只用把移动文件放在同一的文件夹下,同一配置即可。
3、设置配置参数中的mediaQuery: false, 使在媒体查询的css代码中不进行转化,也就是说我们需要将pc端样式写在@media里面,移动端放外面,参考代码
<style scoped lang="scss">*{margin: 0;padding: 0;list-style: none;outline: none;.container{padding-top: 20px;width: 100%;.list:before,.list:after{display: block;content: "";clear: both;}.list{width: 1200px;margin: 0 auto;.list-item:last-of-type{margin-right: 0;}.list-item{width: calc((1200px - 40px)*0.2);margin-right: 10px;height: 100px;background: turquoise;float: left;border-radius: 3px;p{width: 100%;text-align: center;height: 100px;line-height: 100px;font-size: 20px;color: white;}}}}}@media screen and (min-width: 750px){*{margin: 0;padding: 0;list-style: none;outline: none;.container{padding-top: 20px;width: 100%;.list:before,.list:after{display: block;content: "";clear: both;}.list{width: 1200px;margin: 0 auto;.list-item:last-of-type{margin-right: 0;}.list-item{width: calc((1200px - 40px)*0.2);margin-right: 10px;height: 100px;background: turquoise;float: left;border-radius: 3px;p{width: 100%;text-align: center;height: 100px;line-height: 100px;font-size: 20px;color: white;}}}}}}</style>
以上是博主对postcss-px-to-viewport的学习与应用情况,过程中还有许多不足,希望小伙伴们谅解,如发现问题或者博客中的错误,可与博主进行交流,谢谢大家阅读~~
——————谢谢————
“postcss-px-to-viewport”——移动端前端适配的又一种方案相关推荐
- 浅谈移动端——前端适配详解
1. 什么是前端适配 从UI展现层面上: 我们期望不同尺寸的设备,页面可以自适应的展示或者进行等比缩放,从而在不同的尺寸的设备下看起来协调或者差不多. 从代码实现层面上: 我们希望前端适配可以用用尽可 ...
- 移动端前端适配方案(总结) -- 面试重点
在网上搜了一下,很多面试都会被问到移动端适配方法的问题,最近看了一些文章,这里总结一下. 首先,谈一下目前为止出现的一些关于移动端适配的技术方案: (1)通过媒体查询的方式即CSS3的meida qu ...
- 前端生成海报的 N 种方案和优劣对比
点击上方关注 前端技术江湖,一起学习,天天进步 一.背景 工作中做了很多生成海报的功能,不同需求,不同场景,使用了几种方案,各有优劣.一直想要整理一下,但这个过程中的思考和遇到的问题没有记录下来,比如 ...
- 文字转语音离线html,web端文字转语音的几种方案
最近在开发一个微信排队取号的的系统,其中对于服务员端(管理端) 需要有呼叫功能,即点按钮 就播出"xxx号顾客请就座"的声音. 经过在网上一番搜索研究,web端实现指定文字的语音播 ...
- Bootstrap4 手机和PC端 前端适配
前言 因为正好接手到这个项目,网站使用的是 Bootstrap4.5.0的库,之前用的一直是 3.x 的库这边记录一下遇到的坑. 先附上Bootstrap4官方文档 简介 · Bootstrap v4 ...
- 前端组件化的三种方案:
1.预编译语言 在开发阶段,用更完善的第三方程序语言,生成html,css,js代码. 缺点:css有sass,less:js有CoffeeScript,TypeScripty:HTML呢? 优点:如 ...
- 探讨服务端自定义生成PDF的几种方案
废话不多说直接进入正题,首先分析生成pdf场景及生成内容,考虑复用性和维护难度是我们当前开发工作的第一要务! 下面是调研的几个主要方案: 一.itext 表单填充 使用方式: itext表单填充方案是 ...
- 前端响应式布局原理与方案(详细版)
引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局.传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重.下面是博客网站对不同设备适配后的结 ...
- 魔方APP项目-01-移动端开发相关概念、移动端自适配、元信息(meta)、开发准备、移动端项目搭建(模拟器调试)、APICloud(APICloud 前端框架,获取服务端API接口)
一.移动端开发相关概念 1.APP类型 ①.Native APP Native APP又称原生APP,就是我们平时说的手机应用软件. 原生APP 是针对IOS.Android.Windows等不同的手 ...
最新文章
- COJ 2192: Wells弹键盘 (dp)
- 一句话评论设计模式六大原则
- java基础思维导图
- spingmvc的一些简单理解和记录
- Java黑皮书课后题第10章:*10.14(MyDate类)设计一个名为MyDate的类
- jdk10 换成jdk8_JDK 10的摘要Javadoc标签
- ubuntu 改linux密码忘了怎么办,Ubuntu 14.04忘记root密码的解决方法
- python硬件_「大神器!」硬件的AI性能测试Python库发布
- 【面向对象】面向对象的分析与设计概述
- Flutter中消息传递
- 618活动海报还没想法?PSD页面设计参考能给你灵感
- win7 32 java_Win7 32位系统下Java开发环境的安装及配置
- easyui 全部图标
- 带你极速掌握EMU8086汇编工具,深刻理解微机原理(含安装与快速上手教程)
- win+快捷键(常用)
- layui框架静态表格怎么写
- 最小公倍数用c语言,如何用C语言求最小公倍数。。。
- Android鬼点子-自定义View就像PS
- 420个生活小窍门,很有用的哦
- 闲来无事写了一个便笺小工具。
热门文章
- CAN总线基础知识(一)
- echarts中自定义图片的矢量路径
- SourceTree报错git -c diff.mnemonicprefix=false fatal: Unable to create ‘D:/xxx/.git/index.lock‘: File
- 如何让无源蜂鸣器响起来
- 2019浙江计算机二级考试考纲,计算机二级考试大纲(2019全国计算机二级考试大纲)...
- 由siri谈苹果公司的发展
- 股票个人交易接口源码分享
- maya腿的蒙皮旋转枢轴_Maya更改枢轴点,MAYA
- 解决PotPlayer播放视频没有声音
- 通过 PRTG EXE 高级监控脚本 + python 监控华为防火墙线路健康状态