返回

移动端适配，这几个知识点千万别错过！

前端

作为前端开发，移动端的适配一直是一个重中之重，想让网站在移动端也能有良好的显示效果，了解和掌握一些基本知识点非常重要。今天就来聊聊几个移动端适配的小知识点，希望能帮助大家在移动端适配中少走弯路。

1. 单位

我们在写页面的时候写的 css 单位一般都会是 px 为单位也就是像素单位，也就是一个相对长度的单位，而像素也就是相对于显示器屏幕的分辨率而定的。

除了一个 px 单位以外还有 em 以及 rem, 在我们国内来说用得最多当然是 px 单位，而在国外的网站字体用的大都 em 和 rem 的单位。

  • px：绝对单位，相对于显示器屏幕的分辨率，不受字体大小的影响。
  • em：相对单位，相对于当前元素的字体大小，受字体大小的影响。
  • rem：相对单位，相对于根元素的字体大小，不受当前元素字体大小的影响。

2. 响应式布局

响应式布局是一种可以让网站在不同尺寸的设备上都能有良好的显示效果的布局方式。响应式布局一般会使用媒体查询（media query）来实现。

媒体查询可以根据不同的设备屏幕尺寸、设备类型等条件来加载不同的 CSS 样式。比如，我们可以使用媒体查询来指定当屏幕宽度小于 768px 时加载移动端样式，当屏幕宽度大于等于 768px 时加载 PC 端样式。

3. media query

media query 是 CSS3 中引入的一个特性，它允许我们根据不同的媒体条件来加载不同的 CSS 样式。media query 的语法如下：

@media (条件) {
  /* 满足条件时应用的 CSS 样式 */
}

其中，条件可以是以下几种类型：

  • 屏幕尺寸：如 (max-width: 768px) 表示屏幕宽度小于或等于 768px
  • 设备类型：如 (device-type: mobile) 表示设备类型为移动端
  • 方向：如 (orientation: landscape) 表示设备方向为横屏
  • 分辨率：如 (resolution: 1920x1080) 表示设备分辨率为 1920x1080

4. 实践

下面是一个简单的移动端适配示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    font-size: 16px;
  }

  @media (max-width: 768px) {
    body {
      font-size: 14px;
    }
  }
</style>

这段代码使用了 meta 标签来设置视口（viewport），并使用 media query 来指定当屏幕宽度小于或等于 768px 时将字体大小调整为 14px。

掌握了这些知识点，你就可以轻松实现移动端适配啦！