制作、测试和编写响应式网站的四个核心要素

测试响应式页面可以通过三种方式完成：

• 使用正确的设备进行测试。这种测试方法效果最好，但也最复杂，需要不同分辨率的设备，而且价格昂贵。
• 使用第三方模拟器进行测试。这种方式一般针对智能手机终端进行开发，需要在计算机上安装各种开发工具，比较繁琐，性能较差。或者通过在线测试网站进行测试，测试周期较长。
• 通过浏览器自带的设备模拟器进行测试。这种方法是最方便的。各大浏览器都有设备模拟器，测试结果较好。

2。使用浏览器测试

我们以Chrome浏览器为例。

打开Chrome浏览器，点击右上角菜单，选择“更多工具”下的“开发者工具”。 （Windows操作系统版本的Chrome浏览器可以直接用F12热键打开。）

注意：

• 每次页面显示设备都需要更换刷新。
• 部分功能无法正常测试，如电话本、拍照等。

3.使用第三方工具进行测试

4。使用真实设备进行测试

编写响应式页面

1。视口元元素

1) 什么是视口？

Viewport翻译为“视口”，代表页面的可见区域。定义 HTML 页面的元元素是响应式页面设计的必备功能。

移动浏览器在虚拟“窗口”（视口）中渲染页面，该窗口通常比屏幕更宽，这会将所有页面无序地挤压到小屏幕上（这会压缩许多未针对移动设备进行优化的页面）。 ）。用户可以平移和缩放来探索页面的不同区域。

设置视口元元素允许开发人员控制屏幕尺寸和宽高比。如今大多数移动浏览器都支持视图元元素，尽管它不是 Web 标准的一部分。？值

meta元元素建议放在主元素前面。

2。使用相对单位

1）使用相对宽度值

通过学习CSS，你知道可以使用px像素值和百分比值来设置宽度。由像素值设置的宽度是固定值，不能随着屏幕尺寸的变化而变化。如果你想启用响应式页面宽度，你可以只使用百分比或自动。

如何从固定布局更改为百分比布局

书中《无懈可击的 Web 设计》有一个简单可行的公式：

目标元素宽度 / 上下文元素宽度 = 百分比宽度 

以下代码设置上述HTML页面值❙❙❙❀像素值更改为百分比：

div {
	width : 60%;
	height : auto;
	border : 1px solid black;
	}
p {
	width : 96%;  /* 480/500=96% */
	padding-left: 2%; /* 10/500=2% */
}

2）用em代替px

以前用em代替px来设置字体，主要是为了解决老版本IE浏览器无法以像素为单位缩放文字的问题。值集。

目前使用em代替px来设置字体。主要用途如下：

• 使旧版本的IE浏览器能够缩放文本。
• 更好地使用响应式页面，让页面更加高效。

em 的实际大小是相对于上下文字体大小而言的，例如 1em 表示与上下文字体大小相同。 em 单位设置字体也可以使用以下公式计算：

目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸 

值得注意的是： 浏览器显示的默认文本大小为 16 像素。

3。平滑布局

1）什么是平滑布局

所谓的。液体布局意味着侧面元素的宽度适应屏幕。简单来说，HTML页面中元素的大小根据不同的分辨率而变化，但位置不变。

这种布局的主要问题是，如果屏幕比例太大，在对于原始设计来说太小或太大的屏幕上将无法正常显示。

2）创建流布局

流布局通常分为12列。将 HTML 页面的宽度设置为 100%，以便随着浏览器窗口大小的变化自动缩放 HTML 页面。

• 计算每列的百分比： 100% / 12 列 = 8.33% 根据以上计算结果，在

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
}

• 页面的调整所有元素大小框中设置 CSS 类：。到边缘框。
  • 当box size值为content-box（默认值）时，标准box模型。尺寸计算公式：width = 内容宽度，height = 内容高度。
    

    宽度或高度不包括内容边框和内边距。

    div {
          width : 300px;
          height : 200px;
          border : 10px solid black;
          background : deepskyblue;
    }
    

  • 当盒子大小值为border-box时，IE Quirks模式使用的盒子模型。尺寸计算公式：width = border + padding + 内容宽度，height = border + padding + 内容高度。
    

    注意：包装盒中包含边缘和边框。

    div {
           box-sizing: border-box;
           width : 300px;
           height : 200px;
           border : 10px solid black;
           background : deepskyblue;
    }

根据上述流程布局的内容，实现以下案例：

• 航班
• 城市
• 岛屿
• 食品♓ 干尼亚地区首府城市克里特岛。城市可以分为两部分，旧城和现代城。

  调整浏览器窗口大小，看看内容对调整大小的反应。

  4.响应式图像

  相对容易理解的是，图像的显示根据浏览器窗口的大小而变化。将图像宽度设置为 100%。

  img {
      width: 100%;
      height: auto;
  }

  但是经过此设置后，图像可能会显得比实际尺寸大。为了解决这个问题，可以使用 max-width 属性来代替 width 属性。

  img {
      max-width: 100%;
      height: auto;
  }

  此设置后，图像显示将永远不会大于实际尺寸。

  5。 CSS 媒体查询

  如果你想面对更复杂的情况，你需要使用 CSS3 媒体查询来解决它们。

  MediaQuery 包含一种媒体类型和至少一个使用媒体属性（例如宽度、高度和颜色）限制样式表范围的表达式。添加到 CSS3 的媒体查询允许将样式应用于特定设备范围，而无需修改内容。

  媒体查询语法

  媒体查询包含媒体类型、逻辑运算符和一个或多个媒体属性。如果媒体查询的 MediaType 与显示文档的设备匹配，并且媒体查询中的所有表达式都为 true，则查询为 true。

  媒体查询可以用两种不同的方式编写：

  这种方法需要为不同的设备编写不同的 CSS 样式页面。

  @media mediatype and|not|only (media feature) {
      CSS-Code;
  }

  此方法只需要编写一个CSS样式表，并根据不同的设备在样式表上设置不同的样式。 （ 更常用 ）

  介质类型

  值

  描述 ❝ 适用于所有设备 打印 用于打印机和打印预览s 屏幕 用于计算机屏幕、平板电脑、智能手机等。 语音 用于产生声音的设备，例如屏幕阅读器 媒体类型最常见的值是屏幕。 逻辑运算符 值 描述 和 用于组合同一媒体查询中的多个媒体属性。仅当每个属性都为 true 时，此查询的结果才为 true。 not 用于翻译媒体查询结果。 only 表示仅当媒体查询匹配成功时才使用指定的样式。这允许您防止在旧版浏览器中使用选定的样式。 您还可以组合多个媒体查询，并用逗号分隔。只要其中一项是真实的，整个媒体的声明就是真实的。回答接线员或。 值 描述 宽度 定义打印设备上页面可见区域的宽度 max-width 定义可见设备的最大宽度 max-device-width 定义打印设备上最大屏幕可见宽度 min-width 指定打印设备上页面可见区域的最小宽度 ♾min - width 指定打印设备屏幕的最小可见宽度。 干尼亚是克里特岛干尼亚地区的首府。城市可以分为两部分，旧城区和现代城市。 调整浏览器窗口大小，查看内容对大小调整的反应。 .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; } .col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; } [class*="col-"] { float: left; padding: 15px; } [class*="col-"] { width: 100%; padding: 15px; } 样式页面上的 CSS 媒体查询 飞行 城市 岛屿 美食 城市 哈尼亚是克里特岛干尼亚地区的首府。城市可以分为两部分，旧城和现代城。 调整浏览器窗口大小，看看内容对调整大小的反应。 /* For desktop: */ .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; } .col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; } [class*="col-"] { float: left; padding: 15px; } @media only screen and (max-width: 768px) { /* For mobile phones: */ [class*="col-"] { width: 100%; } }