共计 7091 个字符，预计需要花费 18 分钟才能阅读完成。
响应式 -@media
响应式就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本（响应式开发一套界面）；随之而来的就是我们熟知的自适应，自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术（需要开发多套界面）。
不同点
自适应设计 通过检测视口分辨率，来判断当前访问的设备是：pc 端、平板、手机，从而请求服务层，返回不同的页面；响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
自适应 对页面做的屏幕适配是在一定范围：比如 pc 端（>1024）一套适配, 平板（768-1024）一套适配，手机端（<768）一套适配; 响应式一套页面全部适配。（可以想象：响应式设计要考虑的内容要比自适应设计复杂的多）
共同点
两者都是优化适应互联网中越来越分化的视口浏览体验，而出现的为视口提供更好的体验的技术。用技术来使页面适应不同分辨率的视口的设计。
响应式优缺点和标志
标志
面包屑菜单
改变浏览器宽度会在不同分辨率下显示不同的布局
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
自适应网站优缺点和标志
标志
大多只是适配单个终端的主流 N 个主流视口（2- 3 个）
当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现横向滑动指示器（主要 出现在 pc 端，移动端决不允许出现这种情况）
总体框架不变，横线布局的板块大多会有所减少
优点
对网站的复杂程度兼容性更大
实施起来代价更低，
代码更高效
测试更容易，运营相对更精准（图片可控性更高）
缺点：
在移动端设计大行其道之下，同一个网站，往往需要为不同的设备开发不同的页面，增加开发成本
当需求改变时，可能会改动多套代码。流程繁琐。
响应式引入方式
1. 外部引入：
<link href=”url” media=”screen and (min-width:0px) and (max-width:400px)”></link>
2. 内部：
@media screen and (min-width:0px) and (max-width:400px){
//style 样式
}
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> 响应式布局 </title>
<style>
/* 基本样式 */
body {
margin: 0;
padding: 0;
background-color: #ddd;
}
.side {
height: 300px;
background-color: #4eb3b9;
}
.main {
height: 300px;
background-color: #ff0097;
}
/*device-width: >= 1000px*/
@media screen and (min-width: 1000px) {
.parent {
width: 960px;
margin: 0 auto;
}
.side {
width: 300px;
height: 300px;
background-color: #4eb3b9;
float: left;
}
.main {
width: 650px;
height: 300px;
margin-left: 10px;
background-color: #ff0097;
float: left;
}
}
/*device-width:400px-1000px*/
@media screen and (min-width: 400px) and (max-width: 1000px) {
.parent {
display: flex;
}
.side {
width: 300px;
}
.main {
flex: 1;
margin-left: 10px;
}
}
/*device-width: <= 400px*/
@media screen and (max-width: 400px) {
.parent {
display: flex;
flex-flow: column wrap;
}
.side {
flex: 1;
margin-bottom: 10px;
}
.main {
flex: 1;
}
}
</style>
</head>
<body>
<div class=”parent”>
<div class=”side”></div>
<div class=”main”></div>
</div>
</body>
</html>
flex 弹性盒模型布局
一、
flex-wrap: nowrap (不换行，主轴方向空间不足默认压缩伸缩项目)
flex-wrap: wrap (换行，主轴方向空间不足换行)
flex-direction : (设置主轴的排列方向，规定了 flex-start 和 flex-end 的位置)
row — 行模式
column — 列模式
二、沿主轴或者侧轴排列伸缩项目 justify-content
– 控制伸缩项目在伸缩容器中，主轴 (main) 的排列方式。
align-items
– 控制伸缩项目在伸缩容器中，侧轴 (cross) 的排列方式。
align-content:
– 控制伸缩项目，在在伸缩容器中，侧轴 (cross) 的排列方式
前提条件：
1. 必须有两行或者以上。
2.flex-wrap: wrap
3. 设置伸缩项目，伸缩容器的宽度，导致水平空间不足。
三、设置伸缩项目的排列顺序，沿着侧轴对齐，压缩率等 align-self
– 伸缩项目自己决定在伸缩容器中，侧轴 (cross) 的排列方式
– 只能设置在 伸缩项目 中。
flex-grow
– 分配伸缩容器的剩余空间
– 只能设置在 伸缩项目 中。
order
– 设置伸缩项目在 伸缩容器 排列顺序 (flex-direction 决定排列方向)
– 只能设置在 伸缩项目 中。
flex-shrink: 压缩率 正整数 0 不压缩，默认是 1.flex-basis: 伸缩项目 初始化的宽度 = width
相关链接：链接描述
适配
想要了解适配，当然少不了跟适配相关的一些基础概念了呢
像素的相关概念
屏幕尺寸、屏幕分辨率、屏幕像素密度
屏幕尺寸：
指屏幕的对角线的长度，单位是英寸，1 英寸 =2.54 厘米。
常见的屏幕尺寸有 2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0 等。
屏幕分辨率：（iphone6 750*1334）
指在横纵向上的像素点数，单位是 px，1px= 1 个像素点。一般以纵向像素 * 横向像素来表示一个手机的分辨率，如 1960*1080。（这里的 1 像素指的是物理设备的 1 个像素点）
屏幕像素密度 / 像素密度 / 屏幕密度：
屏幕上每英寸可以显示的像素点的数量，单位是 ppi，即“pixels per inch”的缩写。
屏幕像素密度与屏幕尺寸和屏幕分辨率有关
物理像素,CSS 像素
设备像素 / 物理像素：（分辨率）
买手机的时候会有一个 n x m 的分辨率，那是屏幕的 n x m 个呈像的点，一个点（小方格）为一个物理像素。（它是屏幕能显示的最小粒度）
设备像素也被称为物理像素, 他是显示设备中一个最微小的物理部件。
每个像素可以根据操作系统设置自己的颜色和亮度。
任何设备的物理像素的数量都是固定的
CSS 像素：
CSS 像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web 页面上的内容。
它是为 web 开发者创造的，在 css 或者 javascript 中使用的一个抽象的层
一般情况下，CSS 像素被称为与设备无关的像素（device-independent 像素），简称为“DIPs”。
在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个设备像素。
css 像素与物理像素的关系
一个 width 为 200px 的元素，它占据了 200 个 css 像素，但 200 个 css 像素占据多少个物理像素取决于 屏幕的特性（是否是高密度, 即像素比）和用户的缩放行为。
在苹果的视网膜屏幕上，视网膜的像素密度是普通屏幕的两倍，这个元素就跨越了 400 个设备像素
如果用户放大，它将跨越更多的设备像素
设备独立像素：设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，
这个点代表一个可以由程序使用的虚拟像素(比如: css 像素)，然后由相关系统转换为物理像素。
位图像素：一个位图的像素是栅格图像 (如：png, jpg, gif 等) 最小的数据单元
1 个位图像素对应于 1 个物理像素，图片才能得到完美清晰的展示
对于 web 开发者而言：
我们使用的每一个 css 和 javascript 定义的像素本质上代表的都是 css 像素，我们在开发过程中并不在意一个 css 像素到底跨越了多少个设备像素。我们将这个依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器。
像素比
像素比: 它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素 window.devicePixelRatio
视口和浏览器窗口
在普通的桌面端，视口的默认宽度和浏览器窗口的宽度一致。
在移动端, 浏览器厂商面临着一个比较大的问题, 他们如何将数以万计甚至可以说是数以亿计的 pc 端网页完整的
呈现在移动端设备上, 并且不会出现横向滚动条?
如果这个时候, 视口的宽度还是和浏览器窗口的宽度一致? 我们都知道 pc 端网页一般都为 960px 或者 1024px，
那么要完整的放下它们，我们移动端浏览器必须要有个容器放下它吧，而且只有有了这个容器我们才能很好的规定到底我移动端的
浏览器到底能放下多大的页面吧（可能大于 960 页可能大于 1024）。这个数值最好大于 960，而且设备间的这个容器大小是没有
太大差异的
而且基于用户体验我们更关心 width
移动端浏览器厂商是不是得做点什么了（这个容器应该由浏览器厂商设置）
在 pc 端：
我们浏览器的视口（初始包含块，视口）是要小于我们的屏幕的，一般默认情况下是等于
在移动端：
我们浏览器的视口（布局视口）是要远大于我们的屏幕的独立设备像素的
移动端浏览器厂商要实现的目标：
在小屏幕的移动设备上，尽可能的缩小网站来让用户看到网站的全貌
他们做到了，但是问题又来了：
在小屏幕的移动设备上，如果设备屏幕视口的宽度和浏览器窗口的宽度一样会导致很丑陋的结果，所有的布局都会被压在一起。
所以在移动端浏览器上遇到一个没有为移动端做优化的网站，它会尽可能的缩小网站来让用户看到网站的全貌。这对用户的体验来说，是一件非常可怕的事情。如果你想在一个小小的手机屏幕上显示一个为桌面设计的网站，你必须得舍弃一些布局。
layout viewport 和 visual viewport
layout viewport:
手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口的宽度远大于屏幕的宽度
布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。
可以通过 document.documentElement.clientWidth 来获取
在 pc 端，单独一个 width 为 20% 的元素最终拿到的值要根据初始包含块的 width 来决定，因为我们横向的布局都是
按初始包含块开始填的，在移动端一样，不过我们这个时候应该叫它布局视口。
visual viewport:
视觉视口与设备屏幕一样宽，并且它的 css 像素的数量会随用户的缩放而改变
visual viewport 的宽度可以通过 window.innerWidth 来获取，
但在 Android 2, Oprea mini 和 UC 8 中无法正确获取。
理想视口
我们分析知道：布局视口的默认宽度并不是一个理想的宽度，对于我们移动设备来说，最理想的情况是
用户刚进入页面时不再需要缩放。这就是为什么苹果和其他效仿苹果的浏览器厂商会引进理想视口！
只有是专门为移动设备开发的网站，他才有理想视口这一说。而且只有当你在页面中加入 viewport 的 meta 标签，理想视口才会生效。
<meta name=”viewport” content=”width=device-width” />
这一行代码告诉我们，布局视口的宽度应该与理想视口的宽度一致
css 传统的单位有：px、%、em，而随着技术的发展，css3 增加了一些新的单位 rem、vh、vw、vm 等，使我们的 web 页面能适应各种不同的终端显示，现在我们来看看这些单位的区别，这样对后面进行视口之间的适配有直接的帮助
– pixel（像素）是图像的基本采样单位。所以它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念, 单位面积内的像素，可大可小, 是相对于显示器屏幕分辨率而言的. 用 PX 设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的 Web 页面时，如果改变了浏览器的缩放，这时会使用我们的 Web 页面布局被打破.
– em 相对长度单位。em 是相对于父元素的 font-size 而计算的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体 (16px) 尺寸。这样就会存在一个问题，进行任何元素都要根据其父元大小设置。
– Rem 是相对于根元素 html 字体大小，这样就意味着，我们只需要在根元素确定一个参考值。
– % 一般来说是相对于父元素来讲
– viewpoint width（vw），视窗宽度，1vw 等于视窗宽度的 1%。如果浏览器的宽是 500px, 1vw 为 5px(还有 vh 等)（尽管 % 和 vw 在很多地方都很相似 在使用的过程中还是要注意 在出现竖向滚动条的时候 vw=%+ 滚动条的宽度）。
viewport 适配
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″/>
<title></title>
<!–
UI 给你一张设计图 320px
320px 变成屏幕宽度
图片 会失真
–>
<style type=”text/css”>
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div id=”box”></div>
</body>
<script type=”text/javascript”>
var targetW = 320;
var width = document.documentElement.clientWidth;
var scale = width/targetW;
var metaNode = document.querySelector(‘meta[name = “viewport”]’);
metaNode.setAttribute(‘content’,’initial-scale=’+scale);
</script>
</html>
相关链接：链接描述
rem 适配
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no” />
<title></title>
<!–
为什么要适配：
要实现等比！（如果屏幕是宽度 320px, 那么元素宽度为 160px, 占据就是一半，在各个设备上都是一样）
等比是实质：一个 css 像素在不同机型上，所包含是物理像素不同，实现等比
默认情况等不等比：
不加 meta 标签时是等比的
加了 meta 标签后：
不能等比了 一个 css 像素所占据的物理像素的个数确定了
–>
<!–
rem 适配的本质：
rem 参照根元素字体
不管视图多大，在不同机型上，1rem 等于视图的宽度
所以，根标签的 font-size 改成布局视口的大小
–>
<style type=”text/css”>
*{
margin: 0;
padding: 0;
}
#box{
width: 8rem;
height: 8rem;
background: burlywood;
}
</style>
</head>
<body>
<div id=”box”>
</div>
</body>
<script type=”text/javascript”>
// var width = document.documentElement.clientWidth;
// var html = document.querySelector(‘html’);
// html.style.fontSize = width + ‘px’;
(function(){
var styleNode = document.createElement(‘style’);
var width = document.documentElement.clientWidth;
styleNode.innerHTML = ‘html{font-size: ‘+ width/16 +’px !important;}’;
document.head.appendChild(styleNode);
})();
</script>
</html>
上下左右居中的几种实现。
经过上面一顿晕头转向的理解，接下来看几个常用的居中形式吧（工作中肯定经常碰到的）
是不是以为我又会长篇大论，才不会，我没这么傻，来老铁 –> [链接描述][3]
https://blog.csdn.net/mars2009/article/details/79683924
Iconfont 字体图标 (阿里巴巴矢量字体图标库) 原理以及实现
链接描述
