解决vue移动端适配问题

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 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文件,在里面写上

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/6fbea7da749fede4dfac4cec2e85dca3.html