解决vue移动端适配问题
版权申诉
5星 · 超过95%的资源 183 浏览量
2020-12-11
13:37:02
上传
评论 1
收藏 278KB PDF 举报 
解决解决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
最新资源