移动端自适应适配布局的方法总结

我会带着你远行 2022-04-17 04:23 263阅读 0赞

原文出处：[https://blog.csdn.net/zmm13298329239/article/details/83307842][https_blog.csdn.net_zmm13298329239_article_details_83307842]   
延伸阅读：[移动前端自适应适配布局解决方案和比较 ][Link 1]

### 方法一：rem布局（个人最喜欢的方法） ###

首先确定你的设计稿是基于iphone6还是iphone4/5：

如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem

如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

(1).对视口做如下设置：

(2).在index.html入口文件里写：

var deviceWidth = document.documentElement.clientWidth;

document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';  // 注意：iphone6要除以7.5

(3).使用方法：如果设计图上标注高200px, 写 height: 2rem

### 方法二：固定一个某些宽度，使用一个模式，加上少许的媒体查询 ###

### 方法三：淘宝的lib-flexible插件 ###

(1).在项目中安装lib-flexible

$ npm install lib-flexible --save

(2).在项目的入口js文件中引入lib-flexible

import 'lib-flexible'

(3).删除该meta标签，需要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果：

(4).使用px2rem-loader自动将css中的px转换成rem，安装px2rem-loader

$ npm install px2rem-loader --save-dev

(5).打开build/utils.js文件，找到exports.cssLoaders方法，在里面添加如下代码

const px2remLoader = \{  
    loader: 'px2rem-loader',  
    options: \{  
      remUint: 75  
    \}  
  \}

(6).修改generateLoaders方法中的loaders

// 注释掉这一行  
// const loaders = options.usePostCSS ? \[cssLoader, postcssLoader\] : \[cssLoader\]  
// 修改为  
const loaders = \[cssLoader, px2remLoader\]  
   
if (options.usePostCSS) \{  
  loaders.push(postcssLoader)  
\}

然后重新npm run dev，打开控制台可以看到代码中的px已经被转成了rem

该插件需要注意以下两点：

1.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem

2.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /\* no\*/就可以了

[https_blog.csdn.net_zmm13298329239_article_details_83307842]: https://blog.csdn.net/zmm13298329239/article/details/83307842
[Link 1]: https://blog.csdn.net/chelen_jak/article/details/83895017