地址: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适配中使用伪类选择器遇到的问题的更多相关文章

  1. CSS3中的伪类选择器详解

      类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...

  2. css3中的伪类选择器

    一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",&qu ...

  3. CSS3中结构伪类选择器——root、not、empty、target选择器

    1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...

  4. CSS3中only-child伪类选择器

    <body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ ...

  5. css 中的伪类选择器before 与after

    .cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...

  6. Wx-小程序中使用伪类选择器实现border-1px

    .borders::before{ position: absolute; left:; top:; content: " "; width: 100%; height: 1px; ...

  7. H5与CS3权威下.19 选择器(2)结构性伪类选择器

    1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...

  8. ie8不支持伪类选择器的解决方案

    引用jQuery的插件jquery.pseudo.js插件内容: (function($){ var patterns = { text: /^['"]?(.+?)["']?$/, ...

  9. js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)

    js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...

随机推荐

  1. Servlet 快速开始 表单中文字段

    req.getParameter | getParameterValue 一大特点是 返回null表示没有. [web.xml] <servlet> <serlvlet-mappin ...

  2. 【bzoj 3173】[Tjoi2013]最长上升子序列

    Description 给定一个序列,初始为空.现在我们将1到N的数字插入到序列中,每次将一个数字插入到一个特定的位置.每插入一个数字,我们都想知道此时最长上升子序列长度是多少? Input 第一行一 ...

  3. python-类型转化

    s='1234' a=int(s)     字符串转换成整数 s=str(a)    整数转换成字符串

  4. Viterbi

    把语音分割为计算发音质量测度所需要的小单元时候,需要进行Viterbi对齐 Viterbi,在htk和sphinx中,也被称作token passing model Viterbi解码图是 状态数Sm ...

  5. Caused by: java.lang.InstantiationException: cn.at.bean.domain.ConstantInt

      org.springframework.jdbc.UncategorizedSQLException: ConnectionCallback; uncategorized SQLException ...

  6. scss转css的过程中 转化问题

    如果  在转化过程中语法没有问题的话    测试一下是否是文件的bom头的问题

  7. react-踩坑记录——iconfont

    选取图标,添加至购物车后,下载代码. 后将下载了的文件夹改名,放入css文件夹中.在组件中使用到的时候按路径引入“iconfont.css”文件即可. 使用

  8. java.lang.RuntimeException: Cannot create a secure XMLInputFactory 异常处理

    背景:本人在近日的webservice   CXF接口的编写调试过程中,发现一个很奇怪的现象--我在本地对接口进行往返请求时完全没有问题,不管是main方法直接调用还是业务场景里调用都无问题,在其他同 ...

  9. Python全栈(第一部分)day3

    昨日内容回顾 格式化输出 %s %d %% 编码 ascii: 只能显示英文,特殊字符,数字 万国码unicode: 最开始16位,中文不够,用32位,占用4个字节 升级: utf-8 utf-16 ...

  10. 【转】Python之系统交互(subprocess)

    [转]Python之系统交互(subprocess) 本节内容 os与commands模块 subprocess模块 subprocess.Popen类 总结 我们几乎可以在任何操作系统上通过命令行指 ...