移动端Web全方位解析：从基础到实践（上）

前端

2023-10-05 16:15:53

移动端Web与PC设备的区别

移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。

屏幕尺寸： 通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）。移动设备的屏幕尺寸通常在4英寸到10英寸之间，而PC设备的屏幕尺寸通常在15英寸到27英寸之间。
屏幕分辨率： 分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如 1920*1080 指的是屏幕垂直方向和水平方向的像素数都为1920和1080。移动设备的屏幕分辨率通常较低，而PC设备的屏幕分辨率通常较高。

响应式布局与自适应布局

响应式布局和自适应布局都是用于解决移动端Web与PC设备屏幕差异的布局技术。

响应式布局： 响应式布局是通过在CSS中使用媒体查询来实现的。媒体查询允许我们根据设备的屏幕尺寸来改变网站的布局。例如，我们可以使用媒体查询来指定当屏幕宽度小于768像素时，网站的布局会自动调整为移动端布局。
自适应布局： 自适应布局是通过使用百分比和相对单位来实现的。百分比和相对单位允许我们根据设备的屏幕尺寸来动态调整元素的尺寸和位置。例如，我们可以使用百分比来指定元素的宽度为屏幕宽度的50%。

栅格系统与Flexbox

栅格系统和Flexbox都是用于构建Web布局的CSS框架。

栅格系统： 栅格系统是一种将页面划分为均匀列的布局系统。栅格系统可以帮助我们快速创建整齐划一的布局。
Flexbox： Flexbox是一种弹性布局系统。Flexbox可以帮助我们创建更加灵活和复杂的布局。

CSS媒体查询

CSS媒体查询是一种用于在不同设备上调整网站布局的CSS技术。CSS媒体查询允许我们根据设备的屏幕尺寸、屏幕分辨率、设备类型等条件来改变网站的布局。

实战：创建一个移动端Web页面

现在，让我们通过一个实战项目来学习如何创建移动端Web页面。

首先，我们需要创建一个新的HTML文件。
在HTML文件中，我们需要添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>我的第一个移动端Web页面</h1>

  <p>这是我的第一个移动端Web页面。我已经使用了响应式布局和自适应布局，以便在不同的设备上都能正常显示。</p>

</body>
</html>

在CSS文件中，我们需要添加以下代码：

/* 响应式布局 */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 24px;
  }

  p {
    font-size: 18px;
  }
}

/* 自适应布局 */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
  flex: 1 0 auto;
  padding: 10px;
}