用框架思考，灵活适配PC和移动，搭建一站式UI方案

2023-07-04 11:13:04

移动时代的前端适配：响应式网页和应用程序

随着移动设备的普及，用户越来越多地通过智能手机和平板电脑等设备访问网站和应用程序。这给前端开发人员带来了新的挑战，他们必须设计出在各种屏幕尺寸和分辨率上都能正常显示和使用的界面。

响应式设计：适应不同屏幕

响应式设计是一种设计方法，可以创建可以在不同屏幕尺寸的设备上调整和响应的网站和应用程序。通过使用基于视口宽度的相对单位，如 vw 或 rem，开发人员可以确保元素大小和布局随着视口宽度的变化而自动调整。

/* style.css */
html {
  font-size: 62.5%; /* 100% / 16 = 62.5% */
}

body {
  font-size: 1.6rem; /* 16px */
}

.container {
  max-width: 960px; /* 960px */
  padding: 15px; /* 15px */
  margin: 0 auto; /* 0px 0px auto 0px */
}

h1 {
  font-size: 2.5rem; /* 25px */
}

p {
  font-size: 1.6rem; /* 16px */
}

在上面的示例中，font-size 属性值基于 vw 或 rem，而不是固定的像素值。这确保了元素大小相对于视口宽度按比例缩放。

iOS 安全区域：避免元素遮挡

在 iOS 系统中，存在一个安全区域的概念，这是屏幕上不会被系统元素（如状态栏、导航栏、标签栏）遮挡的区域。在开发 iOS 应用程序时，开发人员必须考虑安全区域，以防止页面元素被系统元素遮挡。

/* style.css */
.container {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

上面的示例中，padding 属性值使用 env() 函数获取安全区域的内边距，确保容器内容位于安全区域内。

实践案例：响应式网站

下面是一个响应式网站的示例，它使用 vw 和 rem 实现跨设备的兼容性：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>标题</h1>
    <p>段落</p>
  </div>
</body>
</html>

/* style.css */

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.container {
  max-width: 960px;
  padding: 15px;
  margin: 0 auto;
}

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1.6rem;
}