px2rem

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

由 一世执手 提交于 2020-04-25 07:53:25
第一步：使用淘宝的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适配布局方案

由 走远了吗. 提交于 2020-04-25 06:31:40
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": {}, // 新增 /** *

vue移动端适配

由 自闭症网瘾萝莉.ら 提交于 2020-03-03 07:58:05
1，先看看网上关于移动端适配讲解 再聊移动端页面适配，rem和vw适配方案！ 基础点 ：rem相对根节点<html>字体的大小。所以不用px; 根字体 ：<html>字体的大小px; px ：你就当成cm(厘米)这样的东西吧； 基准 ：750设计稿； 这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！ 目标一 、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿 目标二 、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作 为什么选择rem? 很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性>vw的兼容性； 还有一种就是自己写百分比很不优雅 一、理论基础！ 实现目标一 用rem就可以了吧！因为rem就可以随根字体大小改变而改变，从而实现了自适应的功能。 但是，但是，重点来，如果，根字体的大小默认是16px；那么，我们的1rem；就永远是16px，懂么？也就是如果设计稿是750（放大了一倍，iphone是375pt),我们想要个50%的大小: 50%*357px/16=11.718rem 如果我们写一个11.718rem的宽度
订阅 px2rem