vue rem移动端适配

参考：https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

首先先弄清楚几个基本的原理知识：

物理像素：又称设备像素，是显示设备中一个最微小的物理部件；

设备独立像素：可认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素

设备像素比 = 物理像素 / 设备独立像素，可通过js的window.devicePixelRatio获取，或css的-webkit-device-pixel-ratio

********ps： iPhone6，设备宽高为375pt*667pt,相当于设备独立像素，dpr=2,那么物理像素就为750pt*1334pt********

1、安装fleible

npm install lib-flexible –save

2、在main.js引入

Import ‘lib-flexible’

3、安装px2rem，使得我们在开发中不需要自己手动计算，照常写px

npm install px2rem-loader --save-dev

4、在build目录下的utils.js修改配置

重新开启项目，750设计稿，按设计稿来写px；

注意要点：1、在index.html的头部，不要设置meta name='viewport'；

2、考虑到字体文件自带的点阵尺寸，不希望出现15、13px这种奇数字号，字号依然使用px；如：font-size:28px;/*px*/

3、对于1px像素border，为了避免在部分安卓手机丢失，在其后面添加/*no*/,使其不转化为rem单位，如:border:1px solid #000;/*no*/

个人看法：对于flexible适配方案，查阅源码，可得知它对于安卓手机的处理，是统一dpr设置为1来处理，但近年来，国内各个品牌安卓手机的使用人群比例逐渐增加，将其统一处理为1，在大屏幕手机的体验，有失偏颇。

*****如有不同观点或者错误，欢迎指出，好人一生平安~~~

转载于:https://www.cnblogs.com/sansgun/p/9259927.html

vue rem移动端适配相关推荐

vue实现移动端适配方案
vue实现移动端适配步骤如下: 先安装amfe-flexible和postcss-pxtorem: npm install amfe-flexible --save npm install postc ...
Vue CLI3 移动端适配【px2rem 或 postcss-plugin-px2rem】
今天,我们使用Vue CLI3 做一个移动端适配 . 前言首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在m ...
Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
vue做移动端适配最佳解决方案，亲测有效
最近在做商城的项目,发现有赞的ui非常适合,但有一个问题是有赞的ui用的单位是px,做不了移动端的适配,官网的提供的vw适配方案发现不可行,最后还是决定rem来做适配,上网搜了一下,发现了一套可用方案 ...
vue的pc端适配vw vh rem
安装命令: npm i postcss-px-to-viewport@1.1.1npm i postcss-pxtorem@5.1.1 2.安装完之后在根目录新建postcss.config.js(和 ...
vue项目配置rem移动端适配
一.项目介绍脚手架CLI:@vue/cli Vue版本:2.6.11 移动UI组件库:Vant#2.10.14 CSS预处理器:sass 二.配置lib-flexible插件下载插件 npm i ...
cli3 px转rem适配移动端_Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
今天,我们使用vue cli3 做一个移动端适配 . 前言首先确定你的项目是vue cli3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -s 2.在 ...
vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）
1.使用vue-cli创建项目 vue create my-app 2.安装lib-flexible与postcss-pxtorem依赖 npm install lib-flexible -Snpm ...
vue项目中使用lib-flexible解决移动端适配
第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible $ npm install lib-flexible --save 二.在项目的入口js文件中引入lib-flex ...

vue rem移动端适配

vue rem移动端适配相关推荐

最新文章

热门文章