postcss

再聊移动端页面的适配 前端圈真乱，这话一点不假。但乱也乱的好处，乱则生变，有变化才有进步。今天还是老调重谈，聊聊移动端页面的适配。因为对于一枚前端而言，天天和页面打交道（H5页面），那么布局的活总是少不了，这也将面临不同终端的适配问题。不知道你是否和我一样，页面布局总是或多或少会有一些蛋疼的事情发生。如果是的话，建议你花点时间阅读完下面我扯蛋的东东。 Flexible承载的使命 Flexible到今天也有几年的历史了，解救了很多同学针对于H5页面布局的适配问题。而这套方案也相对而言是一个较为成熟的方案。简单的回忆一下，当初为了能让页面更好的适配各种不同的终端，通过Hack手段来根据设备的 dpr 值相应改变 <meta> 标签中 viewport 的值： 从而让页面达么缩放的效果，也变相的实现页面的适配功能。而其主要的思想有三点： 根据 dpr 的值来修改 viewport 实现 1px 的线 根据 dpr 的值来修改 html 的 font-size ，从而使用 rem 实现等比缩放 使用Hack手段用 rem 模拟 vw 特性 有关于Flexible方案实现适配，在2015年双十一之后做过这方面的技术文档分享，感兴趣的同学可以移步阅读《使用Flexible实现手淘H5页面的终端适配》一文。虽然Flexible解决了适配终端很多问题，但它并不是万能的，也不是最优秀的

我们做移动端项目的时候需要安装如下的插件； postcss-import postcss-url autoprefixer 这个不用安装，Vue-cli 已经集成进去了 postcss-aspect-ratio-mini postcss-cssnext postcss-px-to-viewport 核心 cssnano cssnano-preset-advanced 然后在package.json文件中配置 "postcss": { "plugins": { "autoprefixer": {}, "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-cssnext": {}, "postcss-px-to-viewport": { "viewportWidth": "750", //视窗的宽度，对应的是我们设计稿的宽度，一般是750 "unitPrecision": "3",//指定`px`转换为视窗单位值的小数位数（很多时候无法整除） "viewportUnit": "vw", //指定需要转换成的视窗单位，建议使用vw "selectorBlackList": [ //指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 ".ignore"

　　现在手机端的项目比较多，自适应不用说那是必备技能了，目前应用的单位最多还是rem, 然而每次在制作过程中需要自己计算rem值比较繁琐，现在分享下postcss-pxtorem的使用可以把px直接转换为rem，省下了计算的体力了 首先安装依赖 npm install postcss-pxtorem -D其次设置规则在package.json里面配置下，配置如下 "postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": "72",//设计稿十比一比例换算 ，我这里得设计稿720 "propList": [ //可以设置全部属性转换为rem propList ['*'] 　　　　"padding", ..... ] } }},最后配合flexrem.js使用就解决了移动端适配问题 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //改变窗口大小 重新设置rem recalc = function() { var clientWidth = docEl.clientWidth

实际需求 ： 已经使用了postcss autoprefixer ，而且sass-loader又依赖于node-sass，而且node-sass又是一堆坑（比如centos升级node6->node8后的安装权限问题），所以想简单使用Postcss 处理sass 选取的插件 ： autoprefixer postcss-advanced-variables postcss-nested postcss-preset-env postcss-extend postcss-partial-import 基本能做到替换之前sass-loader的功能 遇到的坑： 使用这些插件后css中不要使用双斜线（eg://）写注释（双斜线不会被去掉，反而压缩在一行，导致某些css功能失效），都使用/***/这种注释形式 来源： oschina 链接： https://my.oschina.net/u/551872/blog/1857949

前情提要 】日前本人将本地项目上传GitHub之后，然后再clone到本地，运行是报错：Error: No PostCSS Config found in... 项目在本地打包运行的时候不报错，上传到 GitHub 之后，再 clone 到本地，执行安装依赖命令： cnpm install 安装完依赖之后再执行编译命令： npm run dev 这个时候居然报错了，纳尼？以为是Github代码的问题，就重新操作两遍，依然还是报错。于是开始搜索解决办法，在项目根目录新建postcss.config.js文件，并对postcss进行配置： module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } } 然后测试，果然好了 npm run dev 项目在本地运行时本来不报错的，但是为什么上传到 GitHub 之后，再 clone 下来，再运行就得单独写一个 postcss.config.js 的文件并配置一下呢？ 在npm上查到的postcss配置在webpack.config.js，postcss.config.js是针对webpack3.0做的特殊处理 【小贴士】如果在国内执行npm install很慢的话，可以安装cnpm命令，使用淘宝镜像，速度贼快。cnpm跟npm用法完全一致

问题描述： Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file. Using browsers option cause some error. Browserslist config can be used for Babel, Autoprefixer, postcss-normalize and other tools. If you really need to use option, rename it to overrideBrowserslist. 因为postCss版本更新，之前版本的配置已无效： module.exports = { plugins: [ require('autoprefixer')({ browsers: ['last 100 versions'] })// 自动添加css前缀 ] } 更换为： module.exports = { plugins: [ require('autoprefixer')({overrideBrowserslist: ['> 0.15% in CN']})// 自动添加css前缀 ] } 即可解决 来源： https:/