postcss

移动端屏幕的几个概念 1、什么是dpr？ dpr: device pixel ratio 设置像素比 —— dpr=物理像素/设备独立像素。 设置独立像素：密度无关像素，个人理解：设备的实际屏幕大小 物理像素：设备像素，显示设备中一个最微小的部件，个人理解：针对iphone retina屏幕，2倍的即屏幕用2px点来显示css为1px的内容，3倍的同理 2、获取设备dpr值 js获取方式： window.devicePixelRatio Css获取方式： -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio （通过这个三个进行媒体查询，可对不同的dpr设置做一些样式适配，如对1px边框的处理问题上） 3、rem单位 rem: fontsize of root element 即相对于根标签 html的大小。例如当设置了html的font-size时为12px时，其他元素设置1rem则代表12px。 屏幕适配的方案 1、简单版 屏幕适配（windowWidth/设计稿宽*100） ——*100为了方便计算。即font-size值是手机deviceWidth与设计稿比值的100倍 document .getElementsByTagName( 'html' )

以前喜欢用lib-flexible配合px2rem达到移动端适配的效果， 最近了解了下vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一。 安装 命令行输入：yarn add postcss-px-to-viewport 或 npm i postcss-px-to-viewport -save -dev 配置 package.json中，在postcss中添加代码： "postcss": { "plugins": { "autoprefixer": {}, "postcss-px-to-viewport": { "viewportWidth": 750, "minPixelValue": 1 } } }, 配置项： “viewportWidth”: 750, // 设计稿的宽度 “unitPrecision”: 3, // px转成vw、vh后小数点保留的位数 “minPixelValue”: 1, // 不转化为vw的最小px值 使用场景 vw与vh会在pc与移动端均产生效果，而不像flexible只会转换一定宽度（记得是750px）以下设备的px为rem，因此若设计稿为移动端而生，全权使用vw单位会使得页面在pc端出现字体过大等现象，需酌情处理，根据应用场景自行选择 vue

I've been using gulp for a while now and know how to import another node module, e.g. var sass = require('gulp-sass'); That's fine, but my gulpfile is filling up with code that I'd like to move into a separate file and "require". Specifically I am writing a postcss plugin, which I already have working when declared as a function inside of the gulpfile. My question is how to put my function in an external file and require it like I do a node module. Do I need to "export" the function in the file being required? Do I need to use ES6 modules or something like that? As an aside, I realise that if

lib-flexible 作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备 安装：yarn add lib-flexible 引入：入口文件main.js中：import 'lib-flexible/flexible.js' pxtorem 作用：将项目中css的px转成rem单位，免去计算烦恼 安装：yarn add postcss-pxtorem 配置：package.json内，在postcss内添加： "postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 75, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除） "propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部 } } }, TIPS 1、pxtorem中，对于想忽略的px写成大写即可，诸如 border:1PX solid #fff; 2、也可以选择postcss-px2rem，我更喜欢pxtorem的忽略方式，方便我vscode的beautify自动格式化代码 来源： oschina 链接： https://my.oschina

I want to allow users to select themes on my website, which they will do through a dropdown this. I am currently having trouble figuring out how to support this feature though, without writing dumb code. I currently use css-modules along with postcss to make my life easier. Webpack is used to bundle everything together. I utilize hot reloading during development, during which I use the style-loader instead. The full configuration looks like this { test: /\.css$/, loader: !isDev ? ExtractTextPlugin.extract('style-loader', 'css-loader?sourcemap&minimize&modules&importLoaders=1&localIdentName=

After upgrading to the latest version of webpack, I'm seeing this error: WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'postcss'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos:

在项目根目录新建 postcss.config.js 文件，并对 postcss 进行配置： module.exports = { plugins: [ require('autoprefixer')//自动添加css前缀 ] }; 来源： https://www.cnblogs.com/xulei1992/p/11811836.html

1.安装 npm install postcss-pxtorem --save 2.找到postcss.config.js 默认是这样 module.exports = { "plugins": { "autoprefixer": {}, } } 修改成这样 module.exports = { "plugins": { "autoprefixer": { browsers: ['Android >= 4.0', 'iOS >= 7'] }, "postcss-pxtorem": { "rootValue": 37.5, 根据UI提供的375尺寸来，如果设置rootValue等于75，那么按照UI提供的750尺寸来 "propList": ["*"] } } } 3.重启项目即可 如果在项目中使用了Vant UI，这样设置会导致Vant里的样式很多都改变，那我们即想用Vant又想用postcss怎么办呢？ 打开postcss.config.js 粘贴复制即可实现const autoprefixer = require('autoprefixer') const pxtorem = require('postcss-pxtorem') module.exports = ({ file }) => { let rootValue if (file && file.dirname &&

Im using autoprefixer with postcss and after moving to a new linux server something must be wrong but I cant figure out what this one could be. I'm getting the error: /home/ec2-user/Enviziion/Muveoo/Server/node_modules/postcss/lib/lazy-result.js:157 this.processing = new Promise(function (resolve, reject) { ^ ReferenceError: Promise is not defined Which is triggered by: var autoprefixer = require('autoprefixer'); var postCSS = require('postcss'); function prefix(css, res, type, fullPath) { postCSS([autoprefixer]).process(css).then(function(result) { var css = result.css; var length = css