解决解决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 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':
评论2
最新资源