oh-my-docs

Summary for developers

Project maintained by italkso Hosted on GitHub Pages — Theme by mattgraham

响应式 Web 设计

1. 概述

响应式Web设计的核心技术

响应式Web设计

网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

不需要依赖服务端或后端方案，仅使用基于HTML5和CSS3的响应式Web设计，就可以让一个网站同时适配多种设备和多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）变化。

可以参考 http://caniuse.com 来确定平台和浏览器版本对某个特性的支持程度。

使用HTML5和CSS3实现响应式Web设计涉及的基本要素：

视口 meta 标签

浏览器中使用视口（viewport）指代可以呈现网页的区域，视口通常并不等于屏幕大小。视口使用<meta>标签作为网页和移动浏览器的接口。网页通过这个标签告诉浏览器，它希望浏览器如何渲染当前页面。此处将按照设备的宽度（device-width）来渲染网页内容。大多数情况下，可以使用如下写法：

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

minimum-scale=0.5和maximum-scale=2结合可以实现 0.5 ~ 2 倍的缩放。允许缩放是一个重要的无障碍特性。但你也可以是使用user-scalable=no表示禁止缩放。（标签拥有属性，属性拥有值）

让图片随窗口缩放

创建一个CSS文件：css/styles.css，并将它链接到HTML页面的头部。声明max-width规则，是要保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大）。

img {
	max-width: 100%;
}

媒体查询

最小宽度媒体查询 是指在这个媒体查询中设置的CSS规则，只在视口符合最小定义宽度条件时才会应用到网页。实际的最小宽度可以使用不同的长度单位指定，比如百分比、em、rem和px。

@media指令告诉浏览器这是一个媒体查询，screen 告诉浏览器这里的规则只适用于屏幕类型，打印类型是 print，而and (min-width:50rem)的意思是其中的规则只适用于视口宽度在50rem以上的情况。

@media screen and ( min-width: 50rem) {
   /* style */
}

2. 媒体查询

媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width、height和color都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适配不同的设备。 - https://www.w3.org/TR/css3-mediaqueries/

在针对所有设备的媒体查询中，可以使用简写语法，即省略关键字 all 及随后的 and。如果不指定关键字，关键字就是 all。如果不是想针对特定的媒体样式，就不要写 screen and了。

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

【组织和编写媒体查询的注意事项】

Example

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

3. 弹性布局与响应式图片

3.1 将固定像素大小转换为比例大小

结果 = 目标 / 上下文

将固定像素大小转换为比例大小的公式为「结果 = 目标 / 上下文」，即用元素所在容器的大小除元素的大小。理解了「目标除以上下文等于结果」，就可以将任何固定大小布局转换成响应式或弹性布局。比如，布局宽度为 960px（上下文），使用三栏布局（左中右），左中右分别对应 200px（目标）, 660px（目标）,100px（目标）。则转换过程如下：

一般应该从小屏幕设计向桌面设计转换。针对小屏幕，应该是「把内容显示在一根长条里」，将左边栏会作为「画外元素」存在，通常用于保存菜单导航之类的内容，只有当用户点击了某个菜单图标时才会滑入屏幕。主内容区位于页头下方，而右边栏又在主内容区下方，最后是页脚区。

3.2 传统 CSS 布局机制

3.3 FlexBox - 方向、对齐、次序和弹性

使用Flexbox可以实现无数种可能的布局，而且得益于其“伸缩性”，这种布局机制非常适合响应式设计。

IE9及以下版本不支持Flexbox。为了让Flexbox有效地跨浏览器显示，需要前缀来保证某些特性跨浏览器可用。可以使用自动加前缀的插件 Autoprefixer，Autoprefixer有针对Sublime Text 等文本编辑器的诸多版本。

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

3.4 响应式图片

利用好srcset、sizes和picture，始终为用户提供符合他们需要的图片。

4. HTML5与响应式Web设计

HTML是构建网页的标记语言，是所有网站和Web应用的基础，最新版本是 HTML5。所有现代的浏览器都理解HTML5中新的语义元素（新的结构化元素、视频和音频标签）。

访问 https://html5boilerplate.com/可以获取 HTML5的模板。这个模板预置了HTML5“最佳实践”，包括基础的样式和可选的工具，比如Modernizr。

5. CSS3 新特性

关注对响应式设计有用的CSS技术、单位和选择符。

6. CSS3高级技术

CSS3特性 使用 说明
文字阴影 text-shadow: 1px 1px 1px #ccc;
text-shadow: none;		 右偏移，下偏移， blur，色值
使用负值可让阴影往左上方偏移
多文字阴影（逗号分隔）
盒阴影 box-shadow: inset 0px 3px 5px #444; 使用 inset时为内阴影
多重阴影（逗号分隔）
背景渐变 linear-gradient或radial-gradient repeating-radial-gradient
多重背景图片 background: url('../img/1.png’), url('../img/2.png’); 在一个元素上堆叠多个背景图片
滤镜 filter: drop-shadow(8px 8px 6px #333); 基于SVG滤镜，可以多个同时用

渐变背景

background: linear-gradient(45deg, blue -50%, green);
background: radial-gradient(20rem circle at center, black,orange, red);
background: radial-gradient(closest-side circle at center, green,blue);
background: repeating-radial-gradient(black 0px, orange 5px, red 10px);

使用渐变背景创造图案

.carbon-fibre {
        margin: 1rem;
        width: 400px;
        height: 200px;
        background:
        radial-gradient(black 15%, transparent 16%) 0 0,
        radial-gradient(black 15%, transparent 16%) 8px 8px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px
        9px;
        background-color:#282828;
        background-size:16px 16px;
}

@media (min-width: 45rem) {
    .carbon-fibre {
    	background: #333;
    }
}

可以依靠媒体查询来在不同的响应式场景中使用不同的效果。例如，一个渐变图案可能在小视口中比较好看，但是在视口较大的情况下，使用一个纯色的背景会比较好。

多重背景

html {
    height: 100vh;
	width: 100vw;
	background:
        url('rosetta.png'),
        url('moon.png'),
        url('stars.jpg');
    background-size: 100% 50%, 300px 400px, auto;	/*auto,cover,contain*/
    background-position: top 50px right 80px, 40px 40px, top center;
	background-repeat: no-repeat;
}

高分辨率背景图像

html {
	background-image: url('bg.jpg');
}
@media (min-resolution: 1.5dppx) {
	html {
		background-image: url('bg@1_5x.jpg');
	}
}

CSS 滤镜

filter: drop-shadow(8px 8px 6px #333);
filter: url ('./img/filters.svg#filterRed');
filter:blur(3px);
filter:brightness(2);
filter:grayscale(.8);
filter:hue-rotate(25deg);	/*只有hue-rotate滤镜能使用负值*/
filter:invert(75%);
filter:opacity(50%);
filter:saturate(15%);
filter:sepia(.74);			/*褐色滤镜*/

可以使用多个滤镜，使用空格分隔它们。

filter: opacity(10%) blur(2px) sepia(35%);

CSS 性能

括号外的决定了页面的架构，括号内的决定了页面的性能。不要担心CSS选择器（大括号外面的部分）的性能表现。然而，CSS中某个部分真的会让页面慢下来。那些在渲染前必须进行的计算工作，会给浏览器带来了额外的工作量。因此，慎重地使用滤镜效果

7. SVG与响应式Web设计

SVG是XML[XML1.0]中用于描述二维图形的语言。SVG支持三种图形对象：矢量图形形状（例如由直线和曲线组成的路径）、图像和文本。 —SVG 1.1规范

SVG（Scalable Vector Graphics，可伸缩矢量图）允许在代码中使用矢量点来描述二维图像。这种优势使SVG被广泛应用到图标、线条图和图表的表示中。因为矢量图是使用相对点来保存数据的，所以可以缩放到任意大小而不会损失清晰度。此外，由于SVG仅仅保存矢量点，相比于同等尺寸的JPEG、GIF和PNG，其文件大小更小。浏览器广泛支持SVG。

除了最小的图片资源，如果可能的话，使用SVG替代JPEG、GIF或者PNG。这样可以产生和分辨率无关的图片，而且大小也比位图图像小得多。

SVG 基础知识

SVG的根元素

SVG的根元素有width、height和viewbox属性。视框（viewbox）定义了SVG中所有形状需要遵循的坐标系。

<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<title>Star 1</title>
	<desc>Created with Sketch.</desc>
	<defs></defs>
	<g id="Page-1" stroke="none" stroke-width="1" fill="none" fillrule="
	evenodd" sketch:type="MSPage">
	<polygon id="Star-1" stroke="#979797" stroke-width="3"
	fill="#F8E81C" sketch:type="MSShapeGroup" points="99 154 40.2214748
	184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374
	63.5491503 99 4 128.389263 63.5491503 194.105652 73.0983006 146.552826
	119.45085 157.778525 184.901699 "></polygon>
	</g>
</svg>

命名空间

这些命名空间只是在生成SVG的程序中使用。在Web页面上展示SVG时 xmlns 并非必需，在优化流程中，为了减小SVG的大小，会把它们去掉。

标题和描述标签

title和desc标签提高了SVG文档的可读性。当SVG图片被应用为背景图片的时候，去除这些标签减小文件大小。

defs 标签

用于储存所有可以复用的元素定义的地方，如梯度、符号、路径等。defs元素是引用元素的容器，十分重要。

元素g

把其他元素捆绑在一起。

SVG 形状元素

SVG拥有一系列可用的现成形状（path、rect、circle、ellipse、line、polyline、polygon）。

SVG 路径

由任意数量的连接点组成的，即允许你自由创造你想要的形状（SVG文件的价值所在）。

使用流行的图像编辑工具和服务创建SVG

AI、Sketch、Inkscape或在线SVG 编辑器，利用SVG 图标服务（如https://icomoon.io/）。

在Web 页面中插入SVG

内联SVG

SVG仅仅是一个XML文档，所以你可以直接将它插入到HTML中。只需要直接在HTML标记内插入SVG标记即可。另外，如果你删除掉svg元素的width和height属性，SVG就会自动缩放来填满容器。

不同插入方式下可以使用的功能

无论用什么方式插入，SVG都会使用设备最高的分辨率来渲染。在大多数情况下，分辨率无关性是使用SVG的理由。至于选择哪种插入方式，一般取决于你的工作流和手头上的工作。

image-20210330004839325

使用GreenSock 添加SVG 动画。

优化SVG

使用自动化工具（如SVGO）来优化SVG文件，尽可能压缩资源大小。Iconizr（https://iconizr.com/）会默认用SVGO处理SVG文件，要尽量避免无意义的多次优化。

把SVG 作为滤镜

SVG 中媒体查询的注意事项

8. CSS3过渡、变形和动画

通过CSS3的三个主要代理，即过渡（transition）、变形（transform）和动画（animation），就可以完成大部分动画工作。

过渡

当元素的CSS状态改变时，过渡是最简单的创造视觉效果的方式。在CSS中过渡属性应用到元素的初始状态（ from状态）。可以进行过渡的元素参见列表。示例中使用了相邻兄弟选择器+。

nav {
    transition: all 1s ease 0s;
}

a + a {
	border-left: 1px solid #aaa;
}
a:hover {
	box-shadow: inset 0 -3px 0 #CC3232;
}

过渡相关的属性（属性、持续时间、调速函数和延迟）

在不同时间段内过渡不同属性

当一条规则要实现多个属性过渡时，这些属性不必步调一致。

过渡调速函数

ease、linear、ease-in、ease-out、ease-in-out和cubic-bezier都是预置好的贝塞尔曲线，本质上是缓动函数，是过渡在数学上的描述。下面的截图来自https://easings.net/。

image-20210330100341561

通配选择器*

（不推荐在生产环境中这么做）。使用CSS通配选择器*来选择页面的所有元素，然后为所有元素都设置一个耗时1秒的过渡效果。声明中省略了过渡调速函数，浏览器默认会使用ease；声明中同样省略了延迟时间，浏览器会默认使用none，所以过渡效果不会有延迟。

* {
	transition: all 1s;	
}

8.2 2D变形

过渡（transition）是从一种状态平滑转换到另一种状态，而变形（transformation）则定义了元素将会变成什么样子。变形是在文档流外发生的。一个变形的元素不会影响它附近未变形的元素的位置。可用的CSS3变形有两种：2D和3D。

2D变形（结合 :hover 使用）

2D变形模块的完整规范文档

transform: scale(2);
transform: scale(0.5);

transform: translate(-20px, -20px);
transform: translate(-50%, -50%);

transform: rotate(30deg);
transform: rotate(3600deg);

transform: skew(40deg, 12deg);
transform: skew(10deg);

transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
transform-origin: 270px 20px;

矩阵变形工具Matrix Construction Set

transform-origin 属性修改变形原点。

有一个小技巧，在某些浏览器中，绝对定位只能逐像素操作，而变形可以实现比一像素更精确的定位。

3D 变形

<div class="flipper">
	<span class="flipper-object flipper-vertical">
		<span class="panel front">The Front</span>
		<span class="panel back">The Back</span>
	</span>
</div>

.flipper {
	perspective: 400px;
	position: relative;
}
.flipper-object {
	position: absolute;
	transition: transform 1s;
	transform-style: preserve-3d;
}
panel {
	top: 0;
	position: absolute;
	backface-visibility: hidden;
}

.flipper-vertical .back {
	transform: rotateX(180deg);
}
.flipper-horizontal .back {
	transform: rotateY(180deg);
}
.flipper:hover .flipper-vertical {
	transform: rotateX(180deg);
}
.flipper:hover .flipper-horizontal {
	transform: rotateY(180deg);
}

flipper-horizontal 水平翻转元素 flipper-vertical 垂直翻转元素

perspective属性设置透视，transform3d属性在X轴（左/右）、Y轴（上/下）、Z轴（前/后）上移动元素。

.flipper:hover .flipper-vertical {
	transform: rotateX(180deg) translate3d(0, 0, -120px);
	animation: pulse 1s 1s infinite alternate both;
}
.flipper:hover .flipper-horizontal {
	transform: rotateY(180deg) translate3d(0, 0, 120px);
	animation: pulse 1s 1s infinite alternate both;
}

使用变形实现渐进增强

transform3d的最大用处在于将面板移入移出屏幕，尤其是如“离屏”导航模式。

当你需要使用JavaScript和现代CSS功能（如变形）来制造交互效果的时候，尽可能考虑一下低级设备的支持性问题。在制作这种交互模式的时候，我发现最有用的办法是从最低级的功能开始，逐步增强。所以，首先为不能使用JavaScript的情况进行搭建。毕竟这种状况下，如果你的菜单展示需要依赖JavaScript，将菜单放置在屏幕外会导致用户不能使用你的菜单。于是我们将菜单标签直接放在文档流中的导航区域里。这样，在最坏的情况下，用户也可以滚动到页脚，点击他们想要切换的标签。

8.3 动画

CSS3动画由两部分组成：首先是关键帧声明，然后是在动画属性中使用该关键帧声明。相较于3D变形，CSS3动画的支持度更高。

9. 表单

HTML5 表单中的元素

<fieldset>
	<legend>About the offending film (part 1 of 3)</legend>
	<div>
        <label for="film">The film in question?</label>
        <input id="film" name="film" type="text" placeholder="e.g. KingKong" required>
	</div>
</fieldset>

HTML5 的新输入类型

type=“email / number / url / tel / search / color”, pattern

9.3 如何给不支持新特性的浏览器打补丁

9.4 使用CSS 美化HTML5 表单

利用Flexbox 维持元素间的均匀间隔和其灵活性

利用变形和过渡让被聚焦的输入域放大，让被聚焦的提交按钮垂直翻转

利用盒阴影和渐变凸显表单中不同的区域

利用媒体查询在不同的视口下调整Flexbox的方向

利用CSS3的伪类选择器确保选择的正确性

10. 实现响应式Web设计

.rule {
	/* 小型视口样式 */
}
@media (min-width: 40em) {
    .rule {
        /* 中型视口样式 */
    }
}
@media (min-width: 70em) {
	.rule {
		/* 大型视口样式 */
	}
}

链接