移动端适配的5种方案

48,436 阅读11分钟

工作中接触到了移动端的开发,所以最近学习一下移动端相关内容。

移动端适配的目的

让拥有不同屏幕大小的终端设备拥有一致的 UI 界面,让拥有更大屏幕的终端展示更多的内容

了解viewport

viewport 即视窗、视口,用于显示网页部分的区域,在 PC 端视口即是浏览器窗口区域,在移动端,为了让页面展示更多的内容,视窗的宽度默认不为设备的宽度,在移动端视窗有三个概念:布局视窗、视觉视窗、理想视窗

  • 布局视窗:在浏览器窗口css的布局区域,布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站,移动设备上的浏览器都会把自己默认的 viewport 设为 980px 或其他值,一般都比移动端浏览器可视区域大很多,所以就会出现浏览器出现横向滚动条的情况

  • 视觉视窗:终端设备显示网页的区域

  • 理想视窗:针对当前设备最理想的展示页面的视窗,不会出现横向滚动条,页面刚好全部展现在视窗内,理想视窗也就是终端屏幕的宽度。

布局视窗

在移动端不设置视窗宽度时,页面宽度默认为 980px,页面可以左右滚动

视觉视窗

理想视窗

页面的宽度为视窗的宽度,页面没有横向滚动条

viewport 详细设置

通过设置 viewport 可以设置页面大小,通过 meta 标签可以设置 viewport 信息,代码如下:

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

viewport 需要搭配如下几个属性使用:

属性含义取值
width定义视口的宽度,单位为像素正整数或设备宽度device-width
height定义视口的高度,单位为像素正整数或device-height
initial-scale定义网页初始缩放值整数或小数,小数为缩小,反之放大
maximum-scale定义缩放最大值整数或小数
minimum-scale定义缩放最小值整数或小数
user-scalable定义用户是否可以缩放yes/no

适配方案

将页面的宽度设置为设置的视窗宽度后,即可进行移动端适配工作了。

从适配的目的是在屏幕大小不同的终端设备拥有统一的界面,让拥有更大屏幕的终端展示更多的内容,从上面两个角度出发,核心思路是:页面内容充满整个视窗

1. rem 布局

rem 是CSS3新增的一个相对单位,它以 HTML 元素的 font-size 为比例:

/* 设置html元素的字体大小为 16px,即 1rem = 16px */
html {
    font-size: 16px;
}
/* 设置box元素宽 160px,10rem = 160px */
.box {
    width: 10rem; /* 160px */
}

修改HTML元素的字体大小可以成比例的调整以 rem 为单位的属性,通过这一个特性,我们可以实现将视窗按一定比例划分为一份一份的,当页面内元素刚好分完所有的份数,页面内容即充满整个视窗且无横向滚动条。

以宽度750像素的设计稿为例,有两个元素,一个元素占 550 个像素,另一个占 750 个像素:

// ...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="w-550px"></div>
<div class="full"></div>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .w-550px {
        width: 550rem;
        height: 100px;
        background-color: rgb(209, 255, 240);
    }
    .full {
        width: 750rem;
        height: 100px;
        background-color: rgb(195, 200, 199);
    }
</style>
<script>
    function setRem() {
        // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改
        const scale = document.documentElement.clientWidth / 750;
        document.documentElement.style.fontSize = scale + 'px';
    }
    setRem();
    window.onresize = setRem;
</script>

页面伸缩,网页布局也会进行伸缩。运行结果如下:

目前,除了IE8及更早版本外,所有浏览器均已支持rem。

1.1 搭配 postcss-pxtorem 搭建项目

  1. 使用 vue-cli 创建项目
vue create rem-demo
  1. 设置 viewport
<!-- rem-demo/public/index.html -->
<!-- 框架已经帮我们设置了,这里可以忽略 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
  1. 动态设置 rem 的值

创建 rem.js 文件:

// rem-demo/util/rem.js
// 设置基准大小
const baseSize = 32
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例
  const scale = document.documentElement.clientWidth / 750
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
window.onresize = function () {
  setRem()
}

引入 rem.js 文件:

// rem-demo/src/main.js
import './utils/rem'
  1. 安装并使用 postcss-pxtorem

安装 postcss-pxtorem

yarn add postcss-pxtorem --dev
npm i postcss-pxtorem --save-dev

使用 postcss-pxtorem

// rem-demo/vue.config.js
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue : 16, //(数字,函数) 根元素字体大小
            unitPrecision: 5, //(数字)允许REM单位增长的十进制数字
            replace: true, // (布尔值)替换包含rems的规则,而不添加后备
            mediaQuery: false, // (布尔值)允许在媒体查询中转换px
            minPixelValue: 0, // (数字)设置要替换的最小像素值
            selectorBlackList  : [], // 忽略转换正则匹配项
            propList   : ['*'], // 可以从px转换为rem的属性,匹配正则
            exclude: /node_modules/i // (字符串,正则表达式,函数)要忽略并保留为px的文件路径
          }),
        ]
      }
    }
  }
}
  1. 运行结果

例如:设计稿为 750*1136,我们需要一个盒子宽 375px:

/* 按照设计稿的宽度编写 */
.box {
  width: 375px;
  height: 400px;
  background-color: rgb(202, 246, 232);
}

/* 转换后 */
.box {
    width: 23.4375rem;
    height: 25rem;
    background-color: #caf6e8;
}

/* 使用 Px 和 PX 作为单位,pxtorem 将不进行转换 */

1.2 总结

优点:rem 布局能很好的实现在不同尺寸的屏幕横向填满屏幕,且在不同屏幕元素大小比例一致

缺点:在大屏设备(Pad)上,元素尺寸会很大,页面显示更少的内容。

针对大屏改进方案:

  1. 限制 rem 的最大值,
  2. 通过媒体查询,限制内容最大宽度,如:腾讯网荔枝FM

在移动端浏览器 rem 方案是解决移动端适配的主流方案,这套方案的另一个名字叫做 flexible 方案,通过动态设置 rem 实现在不同尺寸的设备上界面展示效果一致。

lib-flexible 库里有这样一段话:

由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport来替代此方。

可知,rem 方案的目的是解决 viewport 不兼容的问题,但是我个人认为,rem 的目的提供一种比例单位,不仅可以解决移动端适配问题,也还有其他的用处。

2. vw/vh 布局

vw/vh 方案与 rem 方案类似,都是将页面分成一份一份的,只不过 vw/vh 是将页面分为 100 份,1vw = device-width/100

2.1 搭配 postcss-px-to-viewport 搭建项目

  1. 使用 vue-cli 创建项目
vue create vw-demo
  1. 设置 viewport
<!-- rem-demo/public/index.html -->
<!-- 框架已经帮我们设置了,这里可以忽略 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
  1. 安装并使用 postcss-px-to-viewport

安装 postcss-px-to-viewport

yarn add postcss-px-to-viewport --dev
npm i postcss-px-to-viewport --save-dev

配置 .postcssrc.js

module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度,即小数点位数
      propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
      viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw
      fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw
      selectorBlackList: ['wrap'], // 指定不转换为视窗单位的类名,
      minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
      landscape: false, // 是否处理横屏情况
    },
  },
};
  1. 运行结果

以 750*1136 的设计稿为例,设计一个宽 375px 的盒子

.test-vw {
  width: 375px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  background: #13b5b1;
}

/* 转换后 */
.test-vw {
    width: 50vw;
    height: 13.333333vw;
    font-size: 5.333333vw;
    text-align: center;
    line-height: 13.333333vw;
    background: #13b5b1;
}

运行效果:

2.2 总结

优点:vw、vh布局能良好的实现在不同尺寸的屏幕横向填满屏幕,使用 postcss-px-to-viewport 能很好的帮我们进行单位转换

缺点:

  • 无法修改 vw/vh 的值,在大屏设备(Pad)中元素会放大,且无法通过 js 干预
  • 兼容性- 大多数浏览器都支持、ie11不支持 少数低版本手机系统 ios8、android4.4以下不支持

3. 百分比布局

在 css 中,我们可以使用百分比来实现布局,但是需要特定宽度时,这个百分比的计算对开发者来说并不友好,且元素百分比参考的对象为父元素,元素嵌套较深时会有问题。

案例:设计稿为 750*1136,我们需要一个宽度为 200px 的盒子

.box {
  /* w = 200 / (750/100) = 26.66667 */
  /* 可知,计算复杂,且会存在误差 */
  width: 26.6%;
}

扩展: 子元素的 widthheight 百分比参考对象是父元素的 widthheightmarginpadding 的参考对象为父元素的 widthborder-radiusbackground-sizetransform: translate()transform-origin 的参考对象为自身宽高

4. 响应式布局

通过媒体查询,可以针对不同的屏幕进行单独设置,但是针对所有的屏幕尺寸做适配显然是不合理的,但是可以用来处理极端情况(例如 IPad 大屏设备)或做简单的适配(隐藏元素或改变元素位置)

CSS3 @media 查询属性详解

媒体查询案例:

body {
  background-color: yellow;
}
/* 针对大屏产品 ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: blue;
    }
}

5. px 为主,搭配 vw/vh、媒体查询与 flex 进行布局

先查看一下当前各大网站移动端适配的结果:

小屏幕自适应,限制最大宽度:腾讯网荔枝FM

布局高度固定,宽度自适应:淘宝网百度网易

移动端适配的宗旨是:让拥有不同屏幕大小的终端设备拥有一致的 UI 界面,让拥有更大屏幕的终端展示更多的内容, 那么布局高度固定、宽度自适应的方案针对文本较多的网页(百度网易)是更好的,针对大屏幕,腾讯网荔枝FM的做法是限制最大宽度来让大屏有更好的体验。

我们从页面编写的角度出发,页面中更多的是文本和布局,关于文本,我们应该使用 px 作为单位,来实现在大屏设备显示更多的内容,而不是更大的文本;关于布局,我们可以使用 flex 实现弹性布局,当实现特定宽高元素时,可以适当的使用 vw/vh,当特定的值使用 vw/vh 计算复杂或存在误差时,也可以使用 rem

适配流程

  1. 编写 <meta> 标签设置 viewport 的内容 width=device-width,让网页宽度等于视窗宽度
  2. 在 css 中使用 px
  3. 在适当的场景使用flex布局,或者配合vw进行自适应
  4. 在跨设备类型的时候(pc <-> 手机 <-> 平板)使用媒体查询
  5. 在跨设备类型如果交互差异太大的情况,考虑分开项目开发

总结

上文简单总结了 5 种移动端适配方案

当前最流行的依然是第一种 rem 布局,能很好的按照设计稿进行开发,搭配媒体查询能让很好的解决大屏问题,比如:腾讯网荔枝FM

关于第二种 vw/vh 布局方案,我看到蛮多文章在推荐,由于还没有在项目中真正实践过,因为我们无法干预 vw/vh 的值,在大屏的体验应该不是很良好,所以我不能做判断

关于第五种 px 为主,搭配 vw/vh、媒体查询与 flex 进行布局,个人认为部分地方可以引入 rem,也能很好的按照设计稿开发,且能解决大屏问题,可以参见:淘宝网百度网易

在我个人看来,第五种方案是很好的,但是暂时还没找到一套方法论来进行论证

以上就是本文的全部,有不对的地方还请指正

参考

面试官:你了解过移动端适配吗?

开课吧-一次说清楚,以后不要再问移动端怎么适配了!

viewport移动端适配

Vue-cli3.0 px转换为rem,完成h5自适应

前端响应式布局原理与方案(详细版)