postcss
来源:互联网 发布:知乎收藏 不显示文章 编辑:程序博客网 时间:2024/05/22 13:36
postcss的常用插件
postcss-cssnext
-cssnext 负责把这些新特性转译成当前浏览器中可以使用的语法,解决浏览器css样式兼容问题。postcss-px-to-viewport
-只要规定设局图纸的宽度可以子适应布局,在.postcssrc.js
文件上加module.exports = {
"plugins": [
require('postcss-px-to-viewport')({
viewportWidth: 750
}),
require('postcss-cssnext')
]
}- postcss-px2rem
-适配的另一种方法,需要在.postcssrc.js
问价内加module.exports = {
"plugins": [
require('postcss-px2rem')({
remUnit: 75
}),
require('postcss-cssnext')
]
}
在index.html
文件上加
<script>!function(N,M){function L(){var a=I.getBoundingClientRect().width;a/F>540&&(a=540*F);var d=a/10;I.style.fontSize=d+"px",D.rem=N.rem=d}var K,J=N.document,I=J.documentElement,H=J.querySelector('meta[name="viewport"]'),G=J.querySelector('meta[name="flexible"]'),F=0,E=0,D=M.flexible||(M.flexible={});if(H){console.warn("将根据已有的meta标签来设置缩放比例");var C=H.getAttribute("content").match(/initial\-scale=([\d\.]+)/);C&&(E=parseFloat(C[1]),F=parseInt(1/E))}else{if(G){var B=G.getAttribute("content");if(B){var A=B.match(/initial\-dpr=([\d\.]+)/),z=B.match(/maximum\-dpr=([\d\.]+)/);A&&(F=parseFloat(A[1]),E=parseFloat((1/F).toFixed(2))),z&&(F=parseFloat(z[1]),E=parseFloat((1/F).toFixed(2)))}}}if(!F&&!E){var y=N.navigator.userAgent,x=(!!y.match(/android/gi),!!y.match(/iphone/gi)),w=x&&!!y.match(/OS 9_3/),v=N.devicePixelRatio;F=x&&!w?v>=3&&(!F||F>=3)?3:v>=2&&(!F||F>=2)?2:1:1,E=1/F}if(I.setAttribute("data-dpr",F),!H){if(H=J.createElement("meta"),H.setAttribute("name","viewport"),H.setAttribute("content","initial-scale="+E+", maximum-scale="+E+", minimum-scale="+E+", user-scalable=no"),I.firstElementChild){I.firstElementChild.appendChild(H)}else{var u=J.createElement("div");u.appendChild(H),J.write(u.innerHTML)}}N.addEventListener("resize",function(){clearTimeout(K),K=setTimeout(L,300)},!1),N.addEventListener("pageshow",function(b){b.persisted&&(clearTimeout(K),K=setTimeout(L,300))},!1),"complete"===J.readyState?J.body.style.fontSize=12*F+"px":J.addEventListener("DOMContentLoaded",function(){J.body.style.fontSize=12*F+"px"},!1),L(),D.dpr=N.dpr=F,D.refreshRem=L,D.rem2px=function(d){var c=parseFloat(d)*this.rem;return"string"==typeof d&&d.match(/rem$/)&&(c+="px"),c},D.px2rem=function(d){var c=parseFloat(d)/this.rem;return"string"==typeof d&&d.match(/px$/)&&(c+="rem"),c}}(window,window.lib||(window.lib={}));</script>
阅读全文
0 0
- PostCss
- PostCSS
- postcss
- PostCss简介
- 什么事postCSS
- 初探PostCSS
- 谈谈PostCSS
- postcss压缩 postcss-clean替换cssnano
- vue 文件添加postcss postcss-loader
- postcss 知识点备忘
- postcss import的bug
- postCss的学习
- postcss-loader的使用指南
- 为什么使用PostCSS?
- postcss webpack3.0配置
- webpack postcss-loader autoprefixer 配置
- webpack解决‘config unkown property postcss’
- PostCSS入门:Sass用户入门指南
- 20 个 CSS 高级技巧汇总
- 升级gcc4.8 遇到 fatal error: gnu/stubs-32.h: No such file or directory 问题的解决方法
- Python基础-高阶函数-Map-Reduce
- Linux下安装opencv图像处理库
- 跨域名/网段的http交互可能会报错
- postcss
- java--线程--线程池
- 怎样在textarea中输入tab
- 傅立叶分析和小波分析之间的关系
- 剑指offer—翻转单词顺序列
- ls命令 & 文件属性
- SpringBoot之统一异常处理
- 堆排序
- 双击打开 .ipynb,双击打开jupyter 文件