实现移动端自适应配置的5种方法

芒果茶叶
230 阅读3分钟

1. rem布局（最常用的办法）

首先确定你的设计稿是基于 iphone6 还是 iphone4/5；
如果设计稿基于 iphone6，屏幕宽度为 375 px，body 的 width 为 375 / 100 = 3.75rem
如果设计稿基于 iphone4/5，屏幕宽度为 320 px，body 的 width 为 320 / 100 = 3.2rem

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

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

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

var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px';  // 注意：iphone4 要除以 3.2

(3). 使用方法：

  • 如果设计图是以屏幕宽度 375 px 为标准，图上标注高 200px, 写 height: 2rem 即可；
  • 若是设计稿以物理像素 750 rpx 为标准，图上标注高 200px, 写 height: 1rem 即可；

(4). rem布局又分为网易法和淘宝法，主要区别是否需要动态设置viewport的scale，网易不用详情请看

2. 使用flexbox解决方案

它的页面有一个特点，就是：

  • 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变
  • 中间每条信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边

这种网页是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类网页，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。

image.png

还有一点，这种情况css尺寸单位用px就好，不要用rem，避免增加复杂度。

3. 固定一个某些宽度，使用一个模式，加上少许的媒体查询

使用媒体查询，找入口文件index.js，标签添加这一句

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1, user-scalable=no">

然后  看你的需求。要求在所有得换是只是pc端跟手机端，下来以这个为例

在默认宽度的设备下title的样式
.title {
  height: 42px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid rgba(187, 187, 187, 0.4);
  font-size: 22px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 28px;

在0~767px宽度的设备下title的样式
  @media (max-width:767px) {
    font-size: 16px;
    height: auto;
    line-height: normal;
    padding: 8px 0;
  }

在767~992px宽度的设备下title的样式
  @media (min-width:767px)and(max-width:767px) {
    font-size: 16px;
    height: auto;
    line-height: normal;
    padding: 8px 0;
  }
}

不同的适配:

超小屏幕（手机） 768px以下
小屏设备（平板） 768px-992px
中等屏幕（旧式电脑） 992px-1200px
大屏设备（现代电脑） 1200px以上

4. 淘宝的lib-flexible插件

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

$ npm install lib-flexible --save

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

import 'lib-flexible'

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

(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*/就可以了

5. 通过viewport(vw)来实现移动端的自适应布局

这种方法比较新，看网上之前说可能存在兼容性问题，但是随着浏览器的发展，已经慢慢在兼容了，可以考虑使用这种方法来实现。使用vh/vw来布局，需要结合工具postcss-px-to-viewport。 一些概念和工具的配置可以移步这里： 移动端适配方案 viewport

avatar
文章
阅读
粉丝