postcss | 易学教程

一文搞定移动端适配！

阅读更多关于一文搞定移动端适配！

作者 | 好学习吧丶责编 | 郭芮手机市场日渐丰富的同时，给我们前端开发人员带来的 “网页内容自适应屏幕尺寸进行显示的问题” 也日渐凸显出来，接下来我们就要细说移动端适配的前世今生及方案。为什么要移动端适配？一般情况下设计稿的设计师按照 375 的尺寸设计，然而，在现在移动终端（就是手机）快速更新的时代，每个品牌的手机都有着不同的物理分辨率，这样就会导致，每台设备的逻辑分辨率也不尽相同，此时 375 的设计稿，如果想要还原那基本是不可能了，因为如果一个左右布局，左边如果写死，右边自适应的话，每个设备的右边所展示的内容大小就不尽相同，这时移动端适配就显得尤其重要。既然要了解前世今生，我们就从几个概念说起，先上一张图。下面我们一个个解析。 1.1 屏幕尺寸屏幕尺寸是以屏幕对角线的长度来计量，计量单位为英寸。如图所示两个对角线的长度就是这个屏幕的尺寸： 1.2 像素我们看到上图 320x480 叫分辨率，而这个所谓的分辨率说白了就是横向320个像素纵向480个像素组成 1.2.1 什么叫像素呢？像素（Pel, pixel, pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。电视的图像是由按一定间隔排列的亮度不同的像点构成的，形成像点的单位也就是像素，组成图像的最小单位就是像素。从计算机技术的角度来解释，像素是硬件和软件所能控制的最小单位

移动端布局之postcss-px-to-viewport（兼容vant）

阅读更多关于移动端布局之postcss-px-to-viewport（兼容vant）

主角是谁在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，dpr等等等等，我只介绍这样一种非常不错的移动端适配方案： post-css-to-viewport ，如果我说这种方案能解决98%以上的移动端布局痛点，我想整个掘金，应该没有人会反驳。痛点在哪里在之前有一种流行已久的移动端适配方案，那就是 rem ，我想下面这两句代码，有不少老移动端都不会陌生： const deviceWidth = document .documentElement.clientWidth || document .body.clientWidth; document .querySelector( 'html' ).style.fontSize = deviceWidth / 7.5 + 'px' ; 没错，在那个移动端UI稿尺寸为 750*1334 满天飞的时代，这两句代码确实给开发者带来了很大的方便，这样设置根font-size后，px和rem的转换比例成了100, 为比如UI稿一个长宽分别为 120px*40px ，那么开发者对应的写成 1.2rem*0.4rem 就可以了这种换算已经是颇为方便，但是并非所有的项目都能这样去设置一个方便换算的比例系数，当比例系数为100时，小数点往前面挪两位就行了，然而有的项目设置的换算系数千奇百怪，有50的

Use Postcss in Custom Angular Library

阅读更多关于 Use Postcss in Custom Angular Library

问题 I used postcss, postcss-css-modules and posthtml-css-modules to implement CSS Modules in a Angular Application. I also used @angular-builders/custom-webpack to achieved this. Now, I want to do the same with my Custom Angular Library. However, I cannot use @angular-builders/custom-webpack because the Angular Libraries are build using ng-packagr. So, @angular-builders/custom-webpack is not available to use: https://github.com/just-jeb/angular-builders/issues/356 On the other hand, ng-packagr

vue

阅读更多关于 vue

描述：添加浏览器私缀（私缀是上世纪90年代浏览器大战的产物，也是现在新型浏览器支持某些新API，而其它浏览器不支持的证明！）我们看看App.vue 再来看看打包后的css文件一切都是靠你postcss! vue常用的配置如下 1 // https://github.com/michael-ciniawsky/postcss-load-config 2 3 module.exports = { 4 "plugins" : { 5 "postcss-import" : {}, 6 "postcss-url" : {}, 7 // 编辑目标浏览器：使用package.json中的“browserslist”字段 8 "autoprefixer" : {} 9 } 10 } 不太明白的话，可以去github看文档： https://github.com/michael-ciniawsky/postcss-load-config 来源： oschina 链接： https://my.oschina.net/u/4344016/blog/3833413

Vue CLI3 移动端适配【px2rem 或 postcss-plugin-px2rem】

阅读更多关于 Vue CLI3 移动端适配【px2rem 或 postcss-plugin-px2rem】

今天，我们使用Vue CLI3 做一个移动端适配。前言首先确定你的项目是Vue CLI3版本以上的。一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 复制代码 2、在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render : h => h(App), }).$mount( '#app' ) 复制代码 3、在 index.html 编辑 viewport <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >  < meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" > <

转：vw适配中使用伪类选择器遇到的问题

阅读更多关于转：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: 750 , // (Number) The width of the viewport. viewportHeight:

移动端布局方案，简单高效，完美适配各种机型

阅读更多关于移动端布局方案，简单高效，完美适配各种机型

第一步：使用淘宝的lib/flexible+rem布局原理：　　 rem布局：使用rem作为元素大小的单位，rem=fount-size，根据不同的屏幕宽度设置不同的fount-size值，这样元素也会跟着屏幕变大或变小　　 lib/flexible：　　　　通过js查询屏幕大小，设置viewport标签的同时始终将fount-size设置为屏幕宽度的1/10。　　　　我们也应该将设计稿分成1/10与之对相应，　　　　由此得到1rem=屏幕宽度的1/10=设计稿的1/10 　　　　如果设计稿大小为750px，则1rem=75px，　　　　比如在设计稿上量到一个宽度为150的元素，可以通过150/75得到此元素在设备中的宽度为2rem 用法：　　去掉html中的viewport标签，vue项目在public/index.html中操作　　　 vue项目中在main.js中引入flexible 　　　import ' lib/flexible/flexible.js ' 引入后就实现了动态设置fount-size和viewport标签了，接下来我们只要在项目中以rem为单位写样式就可以了，但是每次都要手动计算rem太麻烦，可以使用插件postcss-px2rem-exclude 第二步：使用postcss-px2rem-exclude将px转换为rem 　　　

PostCSS的插件 -- 关于vue rem适配布局方案

阅读更多关于 PostCSS的插件 -- 关于vue rem适配布局方案

PostCSS的插件作用：用于自动将像素单元生成rem单位记以下三种 postcss-plugin-px2rem postcss-pxtorem postcss-px2rem 任选一种，最近大家推荐第一种（在配置上多了配置选项上有 exclude 属性，可配置是否对某个文件夹下的所有css文件不进行转换），之前我用的第二种（也是目前使用最多的）都有可以配置 selectorBlackList: [] 要忽略并保留为px的选择器还有个小技巧 -- 如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。使用方法选择你要用的插件安装依赖： npm i postcss-plugin-px2rem -D 或 npm i postcss-pxtorem -D 或 npm i postcss-px2rem -D 配置方法换算单位 pc端一般基数为37.5，移动端一般为16或者32 用 vue init webpack projectName 创建的项目，postcss配置文件在根目录下 .postcssrc.js （该文件为使用vue init自动创建的文件） module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "autoprefixer": {}, // 新增 /** *

一种开箱即贼好用的移动端适配方案

阅读更多关于一种开箱即贼好用的移动端适配方案

主角是谁在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，dpr等等等等，我只介绍这样一种非常不错的移动端适配方案： post-css-to-viewport ，如果我说这种方案能解决98%以上的移动端布局痛点，我想整个博客园，应该没有人会反驳。痛点在哪里在之前有一种流行已久的移动端适配方案，那就是 rem ，我想下面这两句代码，有不少老移动端都不会陌生： const deviceWidth = document .documentElement.clientWidth || document .body.clientWidth; document .querySelector( 'html' ).style.fontSize = deviceWidth / 7.5 + 'px' ; 没错，在那个移动端UI稿尺寸为 750*1334 满天飞的时代，这两句代码确实给开发者带来了很大的方便，这样设置根font-size后，px和rem的转换比例成了100, 为比如UI稿一个长宽分别为 120px*40px ，那么开发者对应的写成 1.2rem*0.4rem 就可以了这种换算已经是颇为方便，但是并非所有的项目都能这样去设置一个方便换算的比例系数，当比例系数为100时，小数点往前面挪两位就行了，然而有的项目设置的换算系数千奇百怪，有50的

从 PostCSS 插件，体验编码到发布全过程

阅读更多关于从 PostCSS 插件，体验编码到发布全过程

因项目的需求，自己动手写了一个 PostCSS 插件 postcss-px2vw ，主要用于将 px 转成 vw 和 rem ， rem 作为回退模式。也刚好借此机会总结一下 npm 包的发布流程，文章还会介绍到七牛云图片的使用与上传相关的技巧，以及期间遇到的一些问题。为什么需要它转换 px 单位的插件有很多，知名的有 postcss-px-to-viewport 和 postcss-pxtorem ，前者是将 px 转成 vw ，后者是将 px 转成 rem 。起初是看了大漠的一篇文章《如何在Vue项目中使用vw实现移动端适配》，于是怀着激动的心情，就在项目中也使用 vw 来做移动端的适配。该文章大力推行用 vw 代替 rem 做适配，在 amfe-flexible 项目文档中也推荐 vw 的替代方案。但是考虑到移动端对 vw 的支持情况不如 rem ，所以仍有很多项目都选择使用 rem 来布局。于是就想到将 rem 作为一种回退机制，或许觉得没必要，直接放弃 vw 使用 rem 不就完了？确实，不过既然是折腾，也就不需要那么多理由了，其实饿了么平台就用了此方案。关于移动端适配方案，也有一些个人的亲身体会，有时间另启一篇文章详细总结一下。实现方案首先，得提一下 CSS 样式的回退原理：当 CSS 遇到无法识别的一些样式时，不会报错，而是忽略它

订阅 postcss