视口 Viewport

在我们开始使我们的着陆页面响应式之前，我们需要了解一些概念。

第一个概念是视口 (Viewport) ：网页的可见区域。

通常，具有固定宽度的网页在小屏幕上，如移动设备或平板电脑上，变得太大而无法适应视口。为了解决这个问题，这些设备上的浏览器会缩小整个网页以适应屏幕。

在HTML5中，您可以使用 meta 标签控制视口：

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

其中，width=device-width 设置页面的宽度以适应设备的屏幕宽度。initial-scale=1.0 设置页面在浏览器首次加载时的初始缩放级别。

您还可以在视口标签中使用自定义值，但在大多数情况下，建议使用 device-width 值来使用默认设置。

媒体查询 Media Queries

媒体查询提供了为视口不同宽度或其他规格指定不同CSS样式的能力。

这使得网页能够为不同屏幕尺寸定义不同的布局样式，使页面响应式！

您可以使用现有样式表中的 @media 规则定义媒体查询：

@media screen and (max-width: 600px) {
   body {
     background-color: blue;
  }
}

@media 规则后跟我们要定位的媒体类型（在我们的例子中是屏幕），并设置规则适用的条件（在我们的例子中是 max-width:600px ）。

因此，现在样式将在页面宽度最大为600px时应用。

对于 Media Query 的实例

实例在这里 https://kingsmai.github.io/resp-web-design/

<!DOCTYPE html>
<html>

<head>
  <title>理解响应式设计</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!--
    1. 调整屏幕大小以查看变化
    2. 检查底部的CSS，我已经解释了代码的所有内容。
  -->
</body>

</html>
body {
    margin: 0;
    padding: 0;
    background-color: #373737;
}

/*
max-width: 500px; 意味着它将
从0像素到500像素开始
*/
@media screen and (max-width: 500px) {
    body {
        background-color: teal;
    }
}

/*
min-width: 600px; 意味着它将
从600像素开始，直到更高，除非设置了某个断点
*/
@media screen and (min-width: 600px) {
    body {
        background-color: crimson;
    }
}


/*
min-width: 700px 和 max-width: 900px
意味着它将从700像素开始，当屏幕尺寸超过900像素时停止
*/
@media screen and (min-width: 700px) and (max-width: 900px) {
    body {
        background-color: tomato;
    }
}

/* 注意 */

/* 调整屏幕大小以查看变化 */

/*
如果您的屏幕尺寸保持在501到599之间，它将显示黑色背景颜色。实际上不是黑色，而是十六进制码为#373737。
请看body样式的顶部。默认的背景颜色是#373737。
所以总结一下，当您的屏幕尺寸为0到500时，它将显示蓝绿色背景颜色，当保持在501到599之间时，它将显示黑色背景颜色。
当您的屏幕尺寸为600像素时，它将显示深红色背景颜色。当您的屏幕尺寸为700到900时，它将显示番茄色背景颜色。
当屏幕尺寸超过900像素时，它将再次显示深红色背景颜色。
*/

/*
如果我有任何错误，请告诉我。
照顾好自己，也照顾好您的灵魂。
*/

您还可以定义多个条件，例如视口的最小和最大宽度：

@media screen and (min-width: 800px) and (max-width: 1024px) {
   body {
     background-color: blue;
  }
}

现在，这个样式将适用于屏幕宽度从 800 到 1024 像素的范围内。

您还可以为单个网页定义多个媒体查询。

媒体查询允许您定义页面布局和样式应该何时更改的断点，以及定义这些断点的相应CSS样式。

不要被您设备的屏幕分辨率搞混了！像素作为测量单位相当于1⁄96英寸，所以：1英寸 = 96像素，这意味着这些宽度相当于：

  • 480 像素 / 96 = 5 英寸（例如移动电话）
  • 768 像素 / 96 = 8 英寸（例如平板电脑）
  • 1200 像素 / 96 = 12.5 英寸（例如显示器）

（在我的理解中应该是这样的：具有QHD分辨率的移动电话：1440 × 2560像素，尺寸为5英寸，像素密度约为580像素每英寸。因此，它的宽度为：1440 像素 / 580 像素约为 2.5 英寸，乘以像素作为单位：2.5 * 96 = 240 像素）

响应式页眉 Header Part

现在，我们知道如何为不同屏幕尺寸定义 CSS 样式，我们可以开始使我们的着陆页面具有响应性！

移动屏幕的典型断点是 480 像素宽度。

让我们为我们的着陆页面定义视口和空的媒体查询目标：

@media screen and (max-width: 480px) {
       
}

在屏幕宽度低于 480 像素时，我们将为各个部分创建单独的样式。

480 像素是移动设备的典型断点。

这些是用于不同屏幕尺寸的媒体查询的一些示例：

  • 320px — 480px: 适用于大多数移动设备。
  • 481px — 768px: 适用于iPad、平板电脑。
  • 769px — 1024px: 适用于小屏幕，如笔记本电脑。
  • 1025px — 1200px: 适用于台式机、较大屏幕。

在移动屏幕上，我们希望更改标题文本的文字大小，并使“立即下载”按钮跨足容器的整个宽度。

为实现这一目标，我们在媒体查询中定义相应的样式：

@media screen and (max-width: 480px) {
  .btn {
    display: block;
    font-size: 18px;
  }
  h1 {
    font-size: 32px;
    margin: 0 0 8px 0;
  }
  h2 {
    font-size: 18px;
  }
  section {
    padding: 25px 0 15px 0;
  } 
}

正如您所见，我们更改了一些 font-size 属性，更改了 section 容器的内边距，并将按钮的 display 属性更改为 block，使其成为块级元素，占据其容器的整个宽度。

在移动屏幕上的结果：

Mobile Screen Header

在较大屏幕上的相同标题：

Large Screen Header

请注意，我们无需在媒体查询中重新定义元素的整个样式。我们只需定义我们想要更改的样式。

响应式功能部分 Features Part

是时候使功能部分具有响应性了！它包含三个并排对齐的功能。

在小屏幕上，我们希望它们水平排列，每个功能占据容器的整个宽度。

以下是我们将在媒体查询中使用的样式：

.feature {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  margin: 0 0 10px 0;
  font-size: 16px;
}
.feature img {
  width: 15%;
  min-width: 60px;
  margin-right: 20px;
}

我们将每个功能div的宽度更改为 100％，并将 display 属性设置为 flex，使 div 成为 flexbox 容器。这使我们能够水平定位子功能，并使用 align-items 和 justify-content 属性设置其子元素（图标和文本）的对齐方式。

我们还设置了图标的宽度并定义了一些边距。

现在，在较大屏幕上，功能将并排对齐，在较小屏幕上，它们将垂直排列。

弹性盒子 Flexbox

弹性盒子（Flexbox）布局模型允许轻松创建灵活的布局，无需使用CSS定位和浮动。

让我们使用一个简单的例子来演示它的工作原理：

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

要使用Flexbox，我们首先定义一个容器并将其display属性设置为flex。

.container {
  display: flex;
}

现在，我们可以通过使用Flexbox属性调整子div元素的对齐方式：

.container {
  display: flex;
  align-items: stretch;
}
.container div {
  flex: 1;
}

完整代码：

<head>
  <style>
    .container {
      display: flex;
      align-items: stretch;
    }

    .container div {
      background-color: red;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px; 
      flex: 1;
    }
  </style>
</head>

<div class="container">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

这将使所有子元素具有相同的宽度（flex: 1）并填充整个容器宽度。

查看这里的完整Flexbox指南。

响应式引用部分 Quote Part

对于我们的引用部分，我们将只更改文本大小和一些内边距：

.quote {
  padding: 30px 0;
}
blockquote p {
  font-size: 18px;
}
blockquote cite {
  font-size: 14px; 
}

我们不需要更改部分元素的位置，因为它们已经对齐到屏幕的中央。

响应式页脚 Footer Part

最后但同样重要的是，我们需要更改我们的页脚部分。

我们需要将菜单链接放置在彼此下方：

footer {
  padding: 30px 0 10px 0;
}
footer li {
  display: block;
  margin: 5px 0;
}

点击运行
display:block; 样式使列表项成为块级元素，因此它们将占据其容器的整个宽度。这使得项目在彼此下方对齐：

Mobile Screen Footer

在大屏幕上的相同页脚：

Large Screen Footer

现在我们的着陆页面是完全响应式的，适用于移动和桌面屏幕。

定制着陆页面，添加更多部分和断点，并在下方的评论部分分享您的创作！示例：

https://code.sololearn.com/WE9JO3XT9v9m/?ref=app This code is responsive but done without @media queries.

CSS 单位

在我们的布局中，一个重要的部分是没有使用任何固定单位来定义宽度。

我们使用了百分比值，这使得元素相对于其父元素的宽度进行伸展。

这种方法使得元素更加灵活，这在创建响应式设计时至关重要。

CSS 还允许您为字体大小定义相对单位大小：

em 单位大小将相对于父元素的字体大小。

例如，如果我们页面的 body 具有 16 像素的字体大小，使用 1.5em 将等于 24 像素（16 * 1.5）：

body {
  font-size: 16px;
}

p {
  font-size: 1.5em;
}

点击运行
这很有用，因为当您需要更改字体大小时，您只需在顶级父元素上更改它。所有子元素将使用em单位从中获取相应的相对大小。

然而，当您使用 em 定义所有大小时，您可能会受到级联效应的影响。在这种情况下，您有许多嵌套的元素，它们使用相对于其相应父级的字体大小，这导致难以控制的单位大小。

CSS 单位的练习

在使用以下CSS的情况下，一个位于div元素内的段落的字体大小是多少？

body {
  font-size: 10px;
}
div {
  font-size: 0.5em;
}
p {
  font-size: 3em;
}

答案是：15px

查看解释

em 单位相对于父元素的字体大小值。这里 div 的父元素是 body。因此，

  • 对于div
    • => 1em == 父元素的字体大小 == 10 像素；
    • 0.5 em == 5 像素。

现在p的父元素是div。因此，

  • 对于p
    • => 1em == 父元素的字体大小 == 5 像素，
    • 3em == 15 像素。

这就是答案为15像素的原因。

rem单位

另一个相对单位是 rem。它代表 根 em（Root Em），意味着它只关注根元素的字体大小，即 html 元素。
这使得它比 em 更容易使用。

让我们将着陆页面的字体大小更改为rem单位：

html {
  font-size: 16px;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 1.5rem;
}
.btn {
  font-size: 1.25rem;
}

我们将html元素的字体大小设置为 16px，并使用它来使用 rem 设置所有其他字体大小。

您还可以在边距和内边距中使用相对的 CSS 单位。