响应式 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 元素 ：

• 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>

• 这里用

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

• <detail> 和 <summary> 元素

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

• <header> 元素

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

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

    ）。

• <footer> 元素

  • <footer> 元素应该用于在相应区块中包含与区块相关的内容，可以包含指向其他文档的链
    接，或者版权声明。与 <header> 一样，

• address 元素

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

    标签里。

• h1 到 h6

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

• b 元素

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

• em 元素

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

• i 元素

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

所支持的设备
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) { ... }