解决vue移动端适配问题
发布在前端全栈2019年2月21日view:235web框架IconFont闭包&作用域Docker物理引擎Socket.ioVue.jsredis前端的畅想vuereact-native工具Charlesfatthis编译与执行JavaScript原型j's插件j's插件Kaylyn
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

1,先看看网上关于移动端适配讲解

再聊移动端页面适配,rem和vw适配方案!

基础点:rem相对根节点字体的大小。所以不用px;

根字体:字体的大小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的宽度,然而这只能在能iphone6还原设计稿,也就是只有在iphone6上这样的宽度才刚好占一半;

那么问题来了,如果在每个屏幕上都是50%呢,直接改变根字体大小(16px)不就完了么!!;11.718rem永远还是那个11.718rem,不用担心;

实现目标二

用工具,webpack,postcss,postcss-pxtorem

二、准备主要工具!

viewport: 建议自行百度;

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

vue-cli: 用这个主要是用webpack,这个构建工具大大降低了webpack的使用难度;快速构建出一个前端项目。

postcss: 官网解释:PostCSS is a tool for transforming styles with JS plugins,就是postcss用js插件帮你转换css样式的一个工具。比如,这里的把你的文件里面16px替换成1rem(根大小默认16px的情况);这样你就不用自己去算了!

postcss-pxtorem: postcss的一个插件,主要是帮你把px转换成对应的rem;

然后:还要用js代码去动态算根目录应该有的字体大小,反正就是一段js代码去动态获取屏幕宽度!

三、rem——开始干!

第一步,先用vue-cli快速构建出一个项目,然后,安装postcss,postcss-pxtorem,postcss-loader,postcss-import,postcss-url;

第二步,在项目根目录下添加.postcssrc.js文件,在里面写上

module.exports = {
   plugins: { 'postcss-pxtorem':
        { rootValue: 32, propList: ['*'], minPixelValue: 2 }
         }
         };

rootValue,这里就是根目录的字体大小是32px,这里为啥设置成32呢,因为一般设计稿是750,比iphone6的大一倍,所以设置成16的两倍,就是32px;proplist就是那些属性需要转换成rem,这里是全部的意思;

比如你可选择设置; propList: [’font’, ‘font-size’, ‘line-height’, ‘letter-spacing’]

minPixelValue就是最小转换单位,这是最小转换单位是2px的意思;

第三步,动态设置根字体大小!一段简单的js插入在head里面;

(function() {
 function autoRootFontSize() {
  document.documentElement.style.fontSize =Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
   // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值;除以750,乘以32;懂的起撒,就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化!是不是很简单
 }
 window.addEventListener('resize', autoRootFontSize);
 autoRootFontSize();
})();

这里,我想说的是完全可以用vw去设置根字体大小,26px/375px=4.267vw;就不用js去算了!

html{font-size:4.267vw}; //因为这个字体大小完全是随屏幕正比变化;

四、vw——开始干!

vw的方案就简单多了,因为vw本来就相对屏幕的百分比,所以我们不用再去动态的改变根字体大小了,只需要把750上的px大小转换成对应的vw值就完了,这一步交给postcss工具就可以!

所以只需要两步!

第一步,先用vue-cli快速构建出一个项目,然后,安装postcss,postcss-pxtorem,postcss-loader,postcss-import,postcss-url

第二步,在项目根目录下添加.postcssrc.js文件,在里面写上

module.exports = {
 "plugins": {
  "postcss-import": {},
  "postcss-url": {},
  "postcss-aspect-ratio-mini": {},
  "postcss-write-svg": {
   utf8: false
  },
  "postcss-cssnext": {},
  "postcss-px-to-viewport": {
   viewportWidth: 750,
   unitPrecision: 3,
   viewportUnit: 'vw',
   selectorBlackList: ['.ignore', '.hairlines'],
   minPixelValue: 1,
   mediaQuery: false
  },
  "postcss-viewport-units": {},
 }
}

viewportWidth是你设计稿的大小750,然后unitPrecision是vw值保留的小数点个数;

五、总结!

首先明白一件事:px就像cm一样,1px永远是1px;1cm永远是1cm;

那么我们从目标再反推一道逻辑:

我们想要的结果很简单: 一个元素的宽度(px) / 屏幕宽度(px) = 定值 (这个定值就是设计稿上面的值比例定值);

——所以要做就是:屏幕变宽,要让元素宽度就变宽。

然鹅,我们写的代码里面的px是不可能变的(取的750设计稿上面的尺寸);那么postcss编译出来的rem值也是不变的;

我们是怎么把设计稿里面的40px换算成相应rem的呢;你只要记住根字体大小的值(浏览器的默认是16px,现在设置成的32px)就是1rem;这交给工具同一去算;

得到:元素的宽度(px) = 元素的宽度(rem) :heavy_multiplication_x:32; 所以这个32是你必须要设置在postcss-pxtorem里面的;这样它就可以帮你算;

又因为: 元素的宽度(rem) :heavy_multiplication_x: 根字体大小(px) = 元素的宽度(px)

元素的宽度(px) 变大, 元素的宽度(rem) 不变,那就只有改变根字体大小(px) ,变大;具体怎么变,上面的js代码已经解释了;

——所以我们做的就是:屏幕变宽,让根字体大小(px) 变宽,元素宽度就变宽。

750屏幕下是写的样式大小是1:1, 所以

又因为我们想要:根字体大小(px) / 屏幕宽度(px) = 32 / 750

所以: 根字体大小(px) = 32 / 750 :heavy_multiplication_x: 屏幕宽度(px)

一个元素的宽度(px) / 屏幕宽度(px) = 定值

→ 根字体大小(px) :heavy_multiplication_x:元素的宽度(rem)/ 屏幕宽度(px)

→ 32 / 750 :heavy_multiplication_x: 屏幕宽度(px) :heavy_multiplication_x:元素的宽度(rem)/ 屏幕宽度(px) 等于什么??

得到的的是一个与屏幕大小无关的定值!

化简: 元素的宽度(rem):heavy_multiplication_x:32 / 750 = 元素的宽度(px) / 750 ——不就是设计稿上面的比例么!!!

验证以上操作出来的结果是否符合预期也很简单:

比如一个img的宽,高,在iphone6上的尺寸(审查元素的大小!px单位):

根字体:16px; postcss算出来的rem值是2.5rem; 2.5

16=40px; 实际上也是40px;

——得到元素实际大小 40:heavy_multiplication_x:40(px), 屏宽是375;比例是40/375=0.10667;

在iphone5上的尺寸(审查元素的大小!px单位):

13.6533=34.13px; 实际上也是34.13px;

——得到元素实际大小 34.13:heavy_multiplication_x:34.13(px), 屏宽是320;比例是34.13/320=0.10665;

2,自己项目适配配置(实践)

上的文章讲的理论和方法是可行的,自己项目的解决方案和他大同小异(主要用rem):

1,插件:amfe-flexible + postcss-px2rem

amfe-flexible:自动根据不同设备改变data-dpr的值,这样就可以根据不同的data-dpr设置字体大小不变,仅放大相应倍数。

postcss-px2rem:打包的时候把项目里面的px统一转换成rem,转换的基准值根据配置设置的(.postcssrc.js)

/ 因为我是以750px(iphone6)宽度为基准,所以remUnit为37.5 /

经过试验结果:

postcss-px2rem:只负责把项目里面的px按照基准值转换成rem,并不负责根节点动态font-size的计算。

例如,代码里面有个高度固定:180px, 基准值是:37.5, 那最后界面上的rem=180/37.5=4.8rem

不管换不同客户端手机,不同分辨率,界面上都是固定4.8rem【rem的值是固定的,根据根节点的font-size不同,在界面显示的px也不同】,界面上显示的px = 16(没有设置font-size的话默认是16px)* 4.8rem = 76.8px

【那么这个基准值:37.5怎么来的:

rem基准值计算

关于rem的基准值,也就是上面那个37.5px其实是根据我们所拿到的视觉稿来决定的,主要有以下几点原因:

1.由于我们所写出的页面是要在不同的屏幕大小设备上运行的,所以我们在写样式的时候必须要先以一个确定的屏幕来作为参考,这个就由我们拿到的视觉稿来定;假如我们拿到的视觉稿是以iphone6的屏幕width=375px为基准:

var docEl = document.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / 10;

这样计算出来的rem基准值就是37.5(iphone6的视觉稿),这里为什么要除以10呢,其实这个值是随便定义的,因为不想让html的font-size太大,当然也可以选择不除,只要在后面动态js计算时保证一样的值就可以

上面的组件只负责转换rem,并没有根据不同设备设置font-size,下面再加入这个组件amfe-flexible:

不同设备下的font-size不同。

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

评论
发表评论
暂无评论
PUBLISHED IN
前端全栈

不定时推送有价值,干货的前端文章

我的收藏