响应式布局

核心技术

1. 媒体查询：允许内容根据设备的某些特性，如视口宽度、屏幕分辨率等来呈现，为不同的视口大小编写特定的规则。
2. 弹性网格布局：弹性网格布局是通过相对单位（如百分比），这使得布局可以适应不同的屏幕大小。
3. 可变图片：意思是图片的大小可以根据屏幕尺寸的变化而变化。这意味着不同的设备和屏幕尺寸提供适当大小的图片，从而优化性能和用户体验。

---

媒体查询

针对不同的媒体类型定义的不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

设置 viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1, user-scalable=no">

• width=device-width: 自适应手机屏幕的尺寸宽度
• maximum-scale: 缩放比例的最大值
• minimum-scale: 缩放比例的最小值
• inital-scale: 缩放的初始化
• user-scalable: 用户的可以缩放的操作

设置 width=device-width, initial-scale=1 ，让视口的宽度等于设备宽度并且禁止进行缩放，确保移动设备上正确的大小显示

/* pc width > 1100px */
html{ font-size: 100%;}
body {
	font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
	body {
		font-size: 1.4rem;
	}
}
/* ipad */
@media screen and (max-width: 768px) {
	body {
		font-size: 1.3rem;
	}
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
	body {
		font-size: 1.25rem;
	}
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
	body {
		font-size: 1.125rem;
	}
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
	body {
		font-size: 1rem;
	}
}
/* iphone5 */
@media screen and (max-width: 320px) {
	body {
		font-size: 0.75rem;
	}
}

rem 布局

• CSS3 新增的单位，Android2.x+、ios5+都支持。
• rem 单位相对于根元素 html 的 font-size 来决定大小的。（em 相对于父元素）。

rem 响应式的布局思想：

• 不给元素设置具体宽度，对于一些小图标可设定具体值
• 设置的固定值都用 rem 做单位（在HTML总设置一个基准值： px 和 rem 的对应比例，然后在效果图上获取 px 值，布局的时候转化为 rem 值)
• js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定

缺点： 在响应式布局中，必须通过js来动态控制根元素 font-size 的大小，css样式和js代码有一定耦合性

REM 布局也是目前多屏幕适配的最佳方式。
默认情况下我们html标签的 font-size 为 16px ，我们利用媒体查询，设置在不同设备下的字体大小。

---

视口单位

• 类似百分比方案，单位是vw（视口宽度）
• 1vw等于视口宽度的1%，使得元素的大小可以根据视口的宽度动态变化，借助 calc 函数可实现单位上的换算。
• vw 表示相对于视图窗口的宽度， vh 表示相对于视图窗口高度，除了 vw 和 vh 外，还有 vmin 和 vmax 两个相关的单位。
• 例如在桌面端浏览器视口尺寸为 650px ，那么 1vw = 650 * 1% = 6.5px（这是一个理论值，如果浏览器不支持0.5px ，那么实际渲染结果可能是 7px ）。

// iPhone 6尺寸作为设计稿基准
$vm_base: 375;
@function vw($px) {
	@return ($px / 375) * 100vw;
}