移动端

摘要：本文主要介绍了在移动端开发需要注意的一些问题。

1 背景

一般来说，移动端需要在屏幕远小于电脑端时，支持显示几乎相同分辨率的图像，所以移动端的逻辑像素要比电脑端的逻辑像素小。

默认情况下，如果未对网页适配移动端，移动端的浏览器会将视口设置为980px，以确保网页可以在移动端正常访问，此时将980px作为物理像素。

当网页宽度不超过980px时，将980px作为逻辑像素，像素比为980px/980px=1，网页能正常显示。当网页宽度超过了980px时，将网页宽度作为逻辑像素，像素比为980px/网页宽度<1，网页会被缩小。

为了能让移动端正常显示网页，大部分网站都会专门为移动端设计网页。

2 完美视口

为了让网页能在移动端合理显示，避免网页被缩小，需要根据网页的逻辑像素和移动端屏幕的最佳像素比调整视口的物理像素，可以在meta元素设置：

1

<meta name="viewport" content="width=200px">

设置最佳视口，可以让浏览器根据网页的逻辑像素，自动计算视口最佳的物理像素，实现完美视口：

1

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

设置了视口的物理像素后，当网页的逻辑像素超出后，会使用滚动条加载页面，不会缩放页面，保证文字和内容显示正常。

3 适配不同屏幕

虽然设置完美视口能够解决缩放的问题，但不同设备的完美视口是不同的，在某个设备上使用200px能够撑满宽度，但是在其他设备上可能就只显示半屏，所以还需要适配不同的屏幕。

3.1 使用百分比

使用百分比代替像素值，依据父元素的内容大小使用百分比。

这种方式可以避免使用像素带来的问题，但是如果父元素设置了边框或者边距，使用起来就比较麻烦。

只能在某些场景下使用，并不是完全取代像素的解决方案。

3.2 使用视口百分比

使用视口的百分比代替像素值，单位是vw和vh，分别是水平方向和垂直方向。

在使用时，需要按照视口设置的物理像素，将设计图里的逻辑像素转化为视口百分比。

示例：

• 第一步：假设网页宽度为750px，计算1px对应的vw：100÷750≈0.1333vw
• 第二步：假设容器宽度为200px，计算对应的vw：200×0.1333=26.6666vw
• 第三步：使用26.6666vw作为容器宽度，替换200px

这种方式不依赖父元素，能够按照比例适配不同屏幕，但是在计算的时候比较麻烦。

3.3 使用字体倍数

使用字体倍数rem代替像素值，rem对应的是根元素的字体大小，这种方式是使用视口百分比的补充。

实例：

• 第一步：假设网页宽度为750px，计算1px对应的vw：100÷750≈0.1333vw
• 第二步：为了防止字体过小被浏览器改为默认的12px，建议设置网页根元素的字体大小为40px，计算对应的vw：40×0.1333=5.3333vw
• 第三步：使用5.3333vw作为网页根元素的字体大小，替换40px
• 第四步：假设容器宽度为200px，使用字体大小将px转为rem：200÷40=5rem
• 第五步：使用5rem作为容器宽度，替换200px

这种方式本质上使用的还是视口百分比，但是在计算的时候使用字体大小计算，更简单一些。

在实际开发中，并不是完全禁止使用px作为单位，如果需要根据屏幕进行缩放，才需要考虑避免使用px带来的问题。

4 响应式布局

4.1 匹配媒体查询

浏览器可以通过媒体查询得到当前访问浏览器的设备类型，使用@media指定对不同媒体的样式处理，在不同设备访问时得到不同样式。

匹配媒体类型：

1
2
3
4
5
6

@media 媒体类型 {
  div {
    width: 10px;
    height: 10px;
  }
}

媒体查询也遵循样式的覆盖原则，所以需要将媒体查询写在正常样式下面，避免被覆盖失效。

常用媒体类型：

• all：匹配所有设备。
• screen：匹配屏幕，包括电脑屏幕、平板屏幕、手机屏幕、等等。
• print：匹配打印机，在打印时使用的样式。

示例：

1
2
3
4
5

@media print {
  .title {
    color: #000;
  }
}

完整的媒体类型可以参考文档：MDN媒体类型

4.2 匹配媒体特性

除了通过媒体类型设置不同的样式，也可以通过媒体特征匹配不同的样式。

匹配媒体特征：

1
2
3
4
5
6

@media (属性名: 属性值) {
  div {
    width: 10px;
    height: 10px;
  }
}

当匹配到指定的特征时，应用指定的样式。

常用媒体特征：

示例：

1
2
3
4
5

@media (width: 10px) {
  .title {
    color: #000;
  }
}

常见用于区分不同等级屏幕的阈值：

• 小屏幕：宽度在768px以下。
• 中屏幕：宽度在769px到992px之间。
• 大屏幕：宽度在992px到1200px之间。
• 超大屏幕：宽度在1200px以上。

4.3 匹配复杂条件

支持复杂匹配，如果需要同时满足，可以使用运算符连接，如果需要满足任意一个，可以使用逗号分隔。

可以混合使用媒体查询和媒体特征进行匹配。

支持的运算符：

• and：并且，匹配全部条件。
• or：或者，匹配任意条件，支持使用逗号,分隔。
• not：否定，匹配相反条件。
• only：肯定，用于让IE浏览器忽略设置的条件和样式，避免部分匹配，对现代浏览器无影响。

示例：

1
2
3
4
5

@media screen and (max-width:768px) {
  .title {
    color: #000;
  }
}

在使用时也可以通过指定条件使用不同的样式文件。示例：

1

<link rel="stylesheet" media="screen and (max-width:768px)" href="./index-small.css">