移动端适配常见解决方案

我正在参加「掘金·启航计划」

移动端适配作为前端程序员日常开发中经常会遇到的一个问题，如何设置元素的尺寸才能保证在不同设备中呈现相同的页面样式是我们进行页面开发时需要考虑的因素。

因此，今天就想和大家来聊聊移动端适配常见解决方案。

什么是移动端适配

移动端适配是指针对不同的移动设备，根据其屏幕尺寸、分辨率、像素密度等因素，调整和优化网站或应用程序的布局、字体、图片等元素，以使其在移动设备上呈现良好的用户体验。

为什么要进行移动端适配

需要进行移动端适配的根本原因是： 移动端设备的物理像素≠CSS像素

移动端适配常见的解决方案

1. viewport(强烈推荐)

随着CSS3在不同设备上的兼容性得到很好的支持，viewport也逐渐成为移动端适配的首选方案！

viewport是CSS3中新增的视口单位，包含vw和vh两个部分。其中vw是相对于视口宽度的百分比，vh是相对于视口高度的百分比。

1vw代表的含义是占视口宽度的百分之一，1vh代表的含义是占视口高度的百分之一。 （视口: 网页内容在浏览器窗口中显示的区域）

使用vw单位可以让页面元素相对于视口的宽度进行自适应布局，从而在不同的设备上显示效果比较稳定和一致。

因此相比于rem、em这些需要根据根元素或父元素来决定元素实际宽高度的适配方案来说，viewport是从根本上解决了适配问题。

与此同时，为了使开发人员在页面开发中把注意力更多的放在页面还原上，不要在css单位转换上耗费过多的精力，我们可以借助scss和less来编写一个统一的单位换算函数，然后在具体的scss、less等页面css文件中引用使用：

// styles.scss
@function px2vw($size){
     @return #($size / 设计稿的宽度 * 100)vw
}

// index.scss
@import './components/common/styles.scss';
.container {
   width: px2vw(18); // 这里的18就是设计稿中以px为单位的元素宽度
}

以尺寸为750px的设计稿为例: 100vw = 750px， 那么75px = (75px / 750px) * 100vw = 10vw

在我们进行页面还原时，只需要按照设计稿中的px单位进行页面的实现，单位转换的事情交给px2vw函数就可以啦~

这其实也是postcss-px-to-viewport插件的核心原理！

2. rem

在viewport视口单位没有普及之前，rem一直是移动端适配的优选方案。

rem是一种相对长度单位，它相对于根元素（即html元素）的字体大小来计算当前元素的实际大小。

html{
    font-size: 16px;
}

一般来说，为了良好的用户体验，大多数浏览器的默认字号都为16px，那么1rem = 16px。

在平常的开发中，我们也可以通过px2rem函数来统一设置单位转换，从而提高编程效率：

    // styles.scss
    @function px2rem($size){
         @return #($size / 根元素大小 )rem
    }

    // index.scss
    @import './components/common/styles.scss';
    .container {
       width: px2rem(32); // 这里的32就是设计稿中以px为单位的元素宽度
    }

相比于viewport来说，因为rem是依赖于html根元素的，如果不同设备设置了不一样的根元素大小，可能会使页面布局呈现出意料之外的效果。

3. media媒体查询（不推荐）

除了vw和rem这两种方式外，我们也可以借助 @media媒体查询来适配不同的设备。

简而言之，@media媒体查询实现移动端适配是通过给不同尺寸的设备定制不同的样式。

示例代码如下：

@media only screen and (min-width: 375px) {
  .logo {
    width : 62.5px;
  }
}

@media only screen and (min-width: 360px) {
  .logo {
    width : 60px;
  }
}

@media only screen and (min-width: 320px) {
  .logo {
    width : 53.3333px;
  }
}

可以发现，采用 @media媒体查询来适配移动端存在以下几个问题：

• 代码冗余：由于需要使用多个媒体查询来适配不同的设备，代码量会随之增加，导致代码冗余和维护成本增加，页面加载速度也会变慢。
• 非精确适配：只能适配一些常见的设备尺寸，而不能精确适配所有的设备，可能会出现适配不完全或者适配不准确的情况。
• 难以维护：需要手动设置每个元素的样式，而且样式之间可能存在交叉和冲突，导致维护难度增加。

因此，对于不需要特殊处理的设备，并不推荐采用@media媒体查询的方式进行页面适配~

总结

移动端适配是前端程序员日常开发中经常会遇到的一个问题，其实不止移动端，对于web端来说，很多时候也需要进行适配操作。

随着前端技术的飞速发展，社区里很多优秀的前辈为我们封装了适配的插件，比如： postcss-px-to-viewport 、 postcss-px2rem...

这些插件的出现使得我们在页面实现上，只需要专注于页面还原，单位直接采用px就完全可以，但是了解其背后的实现原理，才有助于我们的成长！