解决vue移动端适配问题


Posted in Javascript onDecember 12, 2018

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

解决vue移动端适配问题

解决vue移动端适配问题

解决vue移动端适配问题 

【那么这个基准值: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:

解决vue移动端适配问题

解决vue移动端适配问题

解决vue移动端适配问题

解决vue移动端适配问题

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
js编写的treeview使用方法
Nov 11 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
js中位运算的运用实例分析
Dec 11 #Javascript
js中的数组对象排序分析
Dec 11 #Javascript
详解Vue源码之数据的代理访问
Dec 11 #Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 #Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 #Javascript
Vue入门之数量加减运算操作示例
Dec 11 #Javascript
简单的React SSR服务器渲染实现
Dec 11 #Javascript
You might like
解析crontab php自动运行的方法
2013/06/24 PHP
小谈php正则提取图片地址
2014/03/27 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
ParseInt函数参数设置介绍
2014/01/02 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
python中将字典转换成其json字符串
2014/07/16 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
python ddt实现数据驱动
2018/03/14 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python多线程同步之文件读写控制
2021/02/25 Python
Python hmac模块使用实例解析
2019/12/24 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
高中班长自我鉴定
2013/12/20 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
旷课检讨书大全
2014/01/21 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
实践单位评语
2014/04/26 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis