响应式 Web 设计（一）布局 及其 标签语义化

响应式 Web 设计

响应式Web

• 弹性网格布局、弹性图片/媒体、媒体查询

• 所谓响应式Web设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

• 设计思路

  • 即先为小屏幕设计内容、样式，然后再向大屏幕扩展

为什么不用 width:100% ?
要实现图片的自动缩放，也可以使用更通用的 width 属性，比如
width:100% 。然而，这条规则在这里的效果不同。如果给 width 属性设置一个
值，那么图片就会按照该值显示，不考虑自身固有宽度。以我们例子中的LOGO
（同样也是一张图片）为例，这条规则会导致它显示得跟它的容器一样宽。在容
器比图片宽得多的情况下（就像我们这里的LOGO一样），图片会被无谓地拉伸。

---

媒体查询

body {
	background-color: grey;
}
@media screen and (min-width: 320px) {
    body {
   	 	background-color: green;
    }
}
@media screen and (min-width: 550px) {
    body {
    	background-color: yellow;
    }
}
@media screen and (min-width: 768px) {
    body {
    	background-color: orange;
    }
}
@media screen and (min-width: 960px) {
    body {
    	background-color: red;
    }
}

• CSS中的 @import会增加 HTTP 请求（进而影响加载速度），因此请慎用
• 常见的是在CSS文件内部直接使用媒体查询

使用媒体查询链接不同的 CSS 文件

• CSS属于**“阻塞渲染”**的资源。换句话说，浏览器需要下载并解析链接的CSS文件，然后再渲染页面。
• 请注意，「阻塞渲染」仅是指该资源是否会暂停浏览器的首次页面渲染。无论CSS是否阻塞渲染，CSS资源都会被下载，只是说非阻塞性资源的优先级比较低而已。

分隔媒体查询的利弊

• 多个文件就会多个HTTP请求，HTTP请求多了会明显影响页面加载速度。
• 性能优化
  •  所有图片都压缩过了；
     所有脚本都拼接和缩短了；
     所有资源都采用了gzip压缩；
     所有静态内容都缓存到了CDN；
     所有多余的CSS规则都被清除了
• 除非在极端情况下，否则我都建议在既有的样式表中写媒体查询，跟常规的规则写在一起。

组合媒体查询还是把它们写在需要的地方

.thing {
	width: 50%;
}
@media screen and (min-width: 30rem) {
    .thing {
    	width: 75%;
    }
}
/* 这里是另外一些样式规则 */
.thing2 {
	width: 65%;
}
@media screen and (min-width: 30rem) {
    .thing2 {
   	 	width: 75%;
    }
}

• 写在一起的话，便于维护代码，虽然这样写看起来有点蠢，！但是！，如果该规则需要视条件而变，那我就把相应的媒体查询紧接着写在它的下面。这样在需要查找与某个选择符相关的规则时，就不用再从
  **一个一个的代码块里找了。**而且，事实上gzip压缩（应该用它来压缩服务器上的所有可以压缩的资源）完全可以把差别降到可以忽略不计的程度。

弹性布局与响应式图片

• 即媒体查询虽然可以让我们根据视口大小分别切换不同的样式，但我们的设计在这些“断点”之间必须要平滑过渡才行。而使用弹性布局就可以轻松解决这个问题，实现设计在媒体查询断点间的平滑过渡。

• 将固定像素大小转换为弹性比例大小，这个转换有一个简单的公式

  • $$结果=目标/上下文$$

• 两个响应式Web设计的核心技术：将固定大小转换为比例大小，以及使用媒体查询相对于视口大小应用CSS规则。

一是比例值的小数点后面是否真有必要带那么多数字。尽管宽度本身最终会被浏览器转换为像素，但保留这
些位数有助于将来的计算精确（比如嵌套元素中更精确的计算）。因此我保留小数点后面的所有位数。

二是在实际的项目中要考虑JavaScript不可用的情况，此时也应该保证用户能看到菜单内容。

既有布局技术，比如行内块、浮动以及表格的缺点

行内块与空白

• 使用行内块（inline-block）来布局的最大问题，就是它会在HTML元素间渲染空白。
  • 解决方案 ： font-size:0

浮动

• 第一个，如果给浮动元素的宽度设定百分比，那么最终计算值在不同平台上的结果不一样（有
  的浏览器向上取整，有的浏览器向下取整）。于是，有时候某些区块会跑到其他区块底下，而有
  时候这些区块一侧又会莫名出现一块明显的间隙。
• 第二个，通常都要清除浮动，才能避免父盒子/元素折叠。虽然很容易做，但每次清除都相
  当于在提醒我们：浮动并非一个地道的布局机制。

Flexbox 概述

 方便地垂直居中内容
 改变元素的视觉次序
 在盒子里自动插入空白以及对齐元素，自动对齐元素间的空白
 让你年轻10岁（也许没那么夸张，但以我有限的经验来看，它能减少你不少压力）

使用 Flexbox

Flexbox有4个关键特性：方向、对齐、次序和弹性

• 完美垂直居中文本

.class {
    /* 其他属性 */
    display: flex;
    align-items: center;
    justify-content: center;
}

 display: flex ：这是Flexbox的根本所在。这里就是把当前元素设置为一个Flexbox（而
不是 block 或 inline-block 之类的）。
 align-items ：这是要在Flexbox中沿交叉轴对齐项目（在这个例子中垂直居中文本）。
 justify-content ：在这里设置内容沿主轴居中。在Flexbox中，可以把它想象成Word
软件中的一个按钮，用于左、中、右对齐文本（稍后我们会介绍， justify-content 还
有其他值）。

• 偏移

display: flex;
align-items: center;

• 反序

   flex-direction: row-reverse
  

• 垂直排列

在包含元素中使用 flex-direction:column; ，再把自动外边距属性删掉：

display: flex;
flex-direction: column;
align-items: center;

Flexbox 的对齐

• 关于Flexbox的对齐，最重要的是理解坐标轴。有两个轴，“主轴”和“交叉轴”。这两个轴
  代表什么取决于Flexbox排列的方向。比如，如果将Flexbox的方向设置为 row ，则主轴就是横轴，
  而交叉轴就是纵轴。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xthVLjQn-1574610637824)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20191124221154717.png)]

交叉轴的对齐

Flexbox为交叉轴对齐提供了以下值。
 flex-start ：把元素的对齐设置为 flex-start ，可以让元素从Flexbox父元素的起始边
开始。
 flex-end ：把元素的对齐设置为 flex-end ，会沿Flexbox父元素的末尾对齐该元素。
 center ：把元素放在Flexbox元素的中间。
 baseline ：让Flexbox元素中的所有项沿基线对齐。
 stretch ：让Flexbox中的所有项（没交叉轴）拉伸至与父元素一样大。

justify-content

• justify-content 可以告诉浏览器怎么处理其余空间。
• space-between 会在子元素之间添加相同宽度的空白，
• space-around 则在它们两边各添加相同宽度的空白。

响应式图片

通过 srcset 切换分辨率

<img src="scones_small.jpg" srcset="scones_medium.jpg 1.5x, scones_
large.jpg 2x" alt="Scones taste amazing">

srcset 及 sizes 联合切换

<img srcset="scones-small.jpg 450w, scones-medium.jpg 900w"
sizes="(min-width: 17em) 100vw, (min-width: 40em) 50vw" src="sconessmall.
jpg" alt="Scones">

---

HTML5 的新语义元素

• **main 元素：**使用 main 标签来声明主内容区

  • “文档的主内容指的是文档中特有的内容，导航链接、版权信息、站点标志、广告
    和搜索表单等多个文档中重复出现的内容不算主内容（除非网页或文档的主要内容就是
    搜索表单）。”

• section 元素 ：section 元素用于定义文档或应用中一个通用的区块。

  • 在开发Web应用时，我一般会用 section 包装可见组件。

• nav 元素 ：

  元素用于包装指向其他页面或同一页面中不同部分的主导航链接。但它不一定非要用 在页脚中（虽然用在页脚中是可以的）；页脚中经常会包含页面共用的导航。

  如果你通常使用无序列表（

  • ）和列表标签（
  • ）来写导航，那最好改成用 nav 嵌套
    多个 a 标签。

• article 元素：

  用于包含一个独立的内容块
  • 明显可以放到 article 元素中的内容有博客正文和新闻报道。
  • 内部的
    应该与外部

    相关

• aside 元素：

  元素用于包含与其旁边内容不相关的内容。实践当中，我经常用它包装侧边栏（在 内容适当的情况下）。这个元素也适合包装突出引用、广告和导航元素。基本上任何与主内容无 直接关系的，都可以放在这里边。

• <figure> 和 <figcaption> 元素

  • 与

    相关的规范原文如下：
    “……因此可用于包含注解、图示、照片、代码，等等。”

<figure class="MoneyShot">
	<img class="MoneyShotImg" src="img/scones.jpg" alt="Incrediblescones" />
    <figcaption class="ImageCaption">Incredible scones, picture from
    Wikipedia</figcaption>
</figure>

• 这里用

  元素包装了一个小小的独立区块。在它里面，又使用

  提供
  了父 figure 元素的标题。

• <detail> 和 <summary> 元素

  • 你是不是常常想在页面中添加一个“展开”/“收起”部件？

• <header> 元素

  • 实践中，可以将
    元素用在站点页头作为“报头”，或者在

    元素中用作
    某个区块的引介区。它可以在一个页面中出现多次（比如页面中每个 中都可以有一
    个

    ）。

• <footer> 元素

  • <footer> 元素应该用于在相应区块中包含与区块相关的内容，可以包含指向其他文档的链
    接，或者版权声明。与 <header> 一样，
    同样可以在页面中出现多次。比如，可以用它
    作为博客的页脚，同时用它包含文章正文的末尾部分。不过，规范里说了，作者的联系信息应该
    放在

    元素中。

• address 元素

  • <address> 元素明显用于标记联系人信息，为最接近的
    或 所用。不过有
    一点不好理解，它并不是为包含邮政地址准备的（除非该地址确实是相关内容的联系地址）。邮
    政地址以及其他联系信息应该放在传统的

    标签里。

• h1 到 h6

  • “ h1 到 h6 元素不能用于标记副标题、字幕、广告语，除非想把它们用作新区块或子
    区块的标题。”

• b 元素

  • \“ 元素表示只为引人注意而标记的文本，不传达更多的重要性信息，也不用于
    表达其他的愿望或情绪。比如，不用于文章摘要中的关键词、评测当中的产品名、交互
    式文本程序中的可执行命令，等等。”

• em 元素

  • \ em 元素表示内容中需要强调的部分。

• i 元素

  • “一段文本，用于表示另一种愿望或情绪，或者以突出不同文本形式的方式表达偏
    离正文的意思。”

元信息

所谓元信息，是指描述自身的信息，元信息类标签，就是HTML用于描述文档自身的一类标签，它们通常出现在head标签中，一般都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）

元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示给用户，有时候则不会。

head标签

首先我们先来了解一下head标签，head标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器使用。

head标签规定了自身必须是html标签中的第一个标签，它的内容必须包含一个title，并且最多只能包含一个base。如果文档作为iframe，或者有其他方式指定了文档标题时，可以允许不包含title标签。

title 标签

title标签表示文档的标题，从字面上就非常容易理解。

表示标题的标签： h1 – h6 和 title 之间的区别

title作为元信息，可能会被用在浏览器收藏夹、微信推送卡片、微博等各种场景，这时侯往往是上下文缺失的，所以title应该是完整地概括整个网页内容的。

而h1则仅仅用于页面展示，它可以默认具有上下文，并且有链接辅助，所以可以简写，即便无法概括全文，也不会有很大的影响。

meta 标签

meta 标签是一组键值对，他是一种通用的元信息表示标签

在head中可以出现任意多个meta标签。一般的meta标签由name和content两个属性来定义。name表示元信息的名，content则用于表示元信息的值。

具有charset属性的meta

从HTML5开始，为了简化写法，meta标签新增了charset属性。添加了charset属性的meta标签无需再有name和content。

charset型meta标签非常关键，它描述了HTML文档自身的编码形式。因此，我建议这个标签放在head的第一个。

<html>
<head>
<meta charset="UTF-8">
……

这样，浏览器读到这个标签之前，处理的所有字符都是ASCII字符，众所周知，ASCII字符是UTF-8和绝大多数字符编码的子集，所以，在读到meta之前，浏览器把文档理解多数编码格式都不会出错，这样可以最大限度地保证不出现乱码。

一般情况下，http服务端会通过http头来指定正确的编码方式，但是有些特殊的情况如使用file协议打开一个HTML文件，则没有http头，这种时候，charset meta就非常重要了。

具有http-equiv属性的meta

具有http-equiv属性的meta标签，表示执行一个命令，这样的meta标签可以不需要name属性了。

例如，下面一段代码，相当于添加了content-type这个http头，并且指定了http编码方式。

除了content-type，还有以下几种命令：

content-language 指定内容的语言；
default-style 指定默认样式表；
refresh 刷新；
set-cookie 模拟http头set-cookie，设置cookie；
x-ua-compatible 模拟http头x-ua-compatible，声明ua兼容性；
content-security-policy 模拟http头content-security-policy，声明内容安全策略。

name为viewport的meta

实际上，meta标签可以被自由定义，只要写入和读取的双方约定好name和content的格式就可以了。

我们来介绍一个meta类型，它没有在HTML标准中定义，却是移动端开发的事实标准：它就是name为viewport的meta。

这类meta的name属性为viewport，它的content是一个复杂结构，是用逗号分隔的键值对，键值对的格式是key=value。

例如：

这里只指定了两个属性，宽度和缩放，实际上viewport能控制的更多，它能表示的全部属性如下：

width：页面宽度，可以取值具体的数字，也可以是device-width，表示跟设备宽度相等。
height：页面高度，可以取值具体的数字，也可以是device-height，表示跟设备高度相等。
initial-scale：初始缩放比例。
minimum-scale：最小缩放比例。
maximum-scale：最大缩放比例。
user-scalable：是否允许用户缩放。
对于已经做好了移动端适配的网页，应该把用户缩放功能禁止掉，宽度设为设备宽度，一个标准的meta如下：

其它预定义的meta

在HTML标准中，还定义了一批meta标签的name，可以视为一种有约定的meta，我在这里列出来，你可以简单了解一下。

application-name：如果页面是Web application，用这个标签表示应用名称。

author: 页面作者。
description：页面描述，这个属性可能被用于搜索引擎或者其它场合。
generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写HTML的网页，不需要加这个meta。
keywords: 页面关键字，对于SEO场景非常关键。
referrer: 跳转策略，是一种安全考量。
theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的UI（如窗口边框或者tab的颜色）。

所支持的设备
Bootstrap 的响应式设计可以让你在不同的设备和屏幕尺寸上看起来更合适一些，这个响应式设计的 CSS 代码会放在一个文件里。下面是包含的东西：

标签 布局宽度 栏宽 间隔
大屏幕显示 1200px 以上 70px 30px
默认 980px 以上 60px 20px
垂直平板 768px 及以上 42px 20px
智能手机到平板电脑 767px 及以下 流动栏，不固定宽度
电话 480px 及以下 流动栏，不固定宽度

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }