转:vw适配中使用伪类选择器遇到的问题
地址:https://blog.csdn.net/perryliu6/article/details/80965734
在使用vue init webpack构建的项目中,一开始我准备使用rem布局,以前使用rem布局,都采用的是AMFE团队发布的lib-flexible,但是在flexible的redeme的一开始 我就读到了这么一段话,官方指引我使用vw实现适配
依据引导,我启用了postcss插件,并且学习到了vw适配,vue构建项目的根目录下的.postcssrc.js文件中的配置如下(摘自https://www.w3cplus.com/mobile/vw-layout-in-vue.html):
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: , // (Number) The width of the viewport.
viewportHeight: , // (Number) The height of the viewport.
unitPrecision: , // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: , // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
},
"postcss-viewport-units":{
filterRule: rule => rule.selector.indexOf('::after') === - && rule.selector.indexOf('::before') === - && rule.selector.indexOf(':after') === - && rule.selector.indexOf(':before') === -
},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
}
}
}
重点来了
与文章内有所不同的是
官方给出的配置项是这样的
"postcss-viewport-units":{}
我写的配置项是这样的
"postcss-viewport-units":{
filterRule: rule => rule.selector.indexOf('::after') === - && rule.selector.indexOf('::before') === - && rule.selector.indexOf(':after') === - && rule.selector.indexOf(':before') === -
}
在转化过程中我加入了过滤器,用来回避伪类选择器
为什么要这么做呢? 举个栗子 看下图
注意到这个content了吗? 每一个元素都带有content属性 我没有写啊
普通div有这个不要紧 但是伪类选择器带有这种东西 是会显示在页面上的,这东西怎么来的?
看它的内容 viewport-units-buggyfill 去github搜一下
从描述来看 这个插件的主要作用就是 csshack (不知道hack的百度一下,我这就不说了)
多方查找发现 为了hack而添加content属性的原来是下面这个(截图来自npmjs.com)
关于postcss-viewport-units插件,npm对它的描述是 自动给html元素添加content属性(如下图)
再来看一下这个插件的readme
配置一个过滤规则函数是不是就可以回避这个问题了 但是这个函数怎么写?
在源码的test文件夹下 我看到了这个
写上去后发现成功规避掉了::after,那::before呢?
转:vw适配中使用伪类选择器遇到的问题的更多相关文章
- CSS3中的伪类选择器详解
类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...
- css3中的伪类选择器
一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",&qu ...
- CSS3中结构伪类选择器——root、not、empty、target选择器
1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...
- CSS3中only-child伪类选择器
<body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ ...
- css 中的伪类选择器before 与after
.cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...
- Wx-小程序中使用伪类选择器实现border-1px
.borders::before{ position: absolute; left:; top:; content: " "; width: 100%; height: 1px; ...
- H5与CS3权威下.19 选择器(2)结构性伪类选择器
1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...
- ie8不支持伪类选择器的解决方案
引用jQuery的插件jquery.pseudo.js插件内容: (function($){ var patterns = { text: /^['"]?(.+?)["']?$/, ...
- js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
随机推荐
- Servlet 快速开始 表单中文字段
req.getParameter | getParameterValue 一大特点是 返回null表示没有. [web.xml] <servlet> <serlvlet-mappin ...
- 【bzoj 3173】[Tjoi2013]最长上升子序列
Description 给定一个序列,初始为空.现在我们将1到N的数字插入到序列中,每次将一个数字插入到一个特定的位置.每插入一个数字,我们都想知道此时最长上升子序列长度是多少? Input 第一行一 ...
- python-类型转化
s='1234' a=int(s) 字符串转换成整数 s=str(a) 整数转换成字符串
- Viterbi
把语音分割为计算发音质量测度所需要的小单元时候,需要进行Viterbi对齐 Viterbi,在htk和sphinx中,也被称作token passing model Viterbi解码图是 状态数Sm ...
- Caused by: java.lang.InstantiationException: cn.at.bean.domain.ConstantInt
org.springframework.jdbc.UncategorizedSQLException: ConnectionCallback; uncategorized SQLException ...
- scss转css的过程中 转化问题
如果 在转化过程中语法没有问题的话 测试一下是否是文件的bom头的问题
- react-踩坑记录——iconfont
选取图标,添加至购物车后,下载代码. 后将下载了的文件夹改名,放入css文件夹中.在组件中使用到的时候按路径引入“iconfont.css”文件即可. 使用
- java.lang.RuntimeException: Cannot create a secure XMLInputFactory 异常处理
背景:本人在近日的webservice CXF接口的编写调试过程中,发现一个很奇怪的现象--我在本地对接口进行往返请求时完全没有问题,不管是main方法直接调用还是业务场景里调用都无问题,在其他同 ...
- Python全栈(第一部分)day3
昨日内容回顾 格式化输出 %s %d %% 编码 ascii: 只能显示英文,特殊字符,数字 万国码unicode: 最开始16位,中文不够,用32位,占用4个字节 升级: utf-8 utf-16 ...
- 【转】Python之系统交互(subprocess)
[转]Python之系统交互(subprocess) 本节内容 os与commands模块 subprocess模块 subprocess.Popen类 总结 我们几乎可以在任何操作系统上通过命令行指 ...