以前做移动端项目的时候都是用rem来做适配,现在基本上都是通过viewport单位来做。postcss-px-to-viewport就是一个将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件,它可以将你CSS中的px单位转化为vw,1vw等于1/100视口宽度。 1.安装 javascript 代码解读 复制代码 $ npm install postcss-px-t...
},'postcss-px-to-viewport': {unitToConvert:'px',// 需要转换的单位,默认为"px"viewportWidth:1920,// 设计稿的视窗宽度unitPrecision:6,// 单位转换后保留的精度propList: ['*'],// 能转化为 vw 的属性列表viewportUnit:'vw',// 希望使用的视窗单位fontViewportUnit:'vw',// 字体使用的视窗单位sele...
第二种方案是viewport,postcss-px-to-viewport就是这样一款优秀的插件,它解决了以上提到的痛点,也满足以上提到的理想要求。它将px转换成视口单位vw,众所周知,vw本质上还是一种百分比单位,100vw即等于100%,即window.innerWidth 在vue项目中引入试试 我们先把它安装到项目的开发环境...
postcss-plugin-pxtoviewport 用法 配合postcss可以使px转为vw和rem 输入/输出 可以通过配置参数,实现px同时转为vw和rem // 输入 h1 { margin: 0 0 20px; font-size: 32px; line-height: 1.2; letter-spacing: 1px; } // 输出 h1 { margin: 0 0 20px; margin: 0 0 1.25rem; margin: 0 0 5.333...
> 如果您在使用 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport/) 实现伸缩界面的时候,不希望界面在大屏设备上撑满整个屏幕而难以浏览,希望界面在达到某一个合适的宽度后停止伸缩(限制最大宽度),您可以使用本插件。 ## 移动端模版 下面是一个宽屏展示良好的移动端模版列表,每一...
一.移动端适配方案 1.1 基础概念 viewport即视窗、视口,用于显示网页部分的区域,在PC端视口即是浏览器窗口区域,在移动端,为了让页面展示更多的内容,视窗的宽度默认不为设备的宽度,在移动端视窗有三个概念:布局视窗、视觉视窗、理想视窗。 布局视窗:在浏览器窗口css的布局区域,布局视口的宽度限制css布局的宽。为了能...
主角是谁 在今天这篇文章中,我并不会在这里讲一些移动端视口的概念,包括物理像素和逻辑像素,理想视口,dpr等等等等,我只介绍这样一种非常不错的移动端适配方案:post-css-to-viewport,如果我说这种方案能解决98%以上的移动端布局痛点,我想整个掘金,应该没有人会反驳
1、postcss-px-to-viewport适配的介绍 postcss-px-to-viewport是一个插件,用起来非常方便,安装一下插件,搞个配置文件就可以直接用了。 2、postcss-px-to-viewport适配的原理 根据配置将css样式中的px转为vw,从而让页面自适应当前屏幕大小。 3、postcss-px-to-viewport适配使用 ...
postcss-px-to-viewport,可以将px单位自动转换成viewport单位(vw表示屏幕的1%)。 npm install postcss-px-to-viewport --save-dev或者使用yarn安装yarn add postcss-px-to-viewport -D//可能会报错。就是用npm 因为是vue-cli3.0所以找到项目根目录下vue.config.js配置文件,在该文件中写入如下内容 ...
unitToConvert要转换的(字符串)单位,默认为px。 viewportWidth(数字)视口的宽度。 unitPrecision(数字)允许大众单位增加的十进制数字。 propList (数组)可以从px更改为vw的属性。 值必须完全匹配。 使用通配符启用所有属性。例如:[''] 在单词的开头或结尾使用*。(['position']将与background-position-y相匹配) ...