什么是响应式布局
一个网站能够兼容多个终端
响应布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
@media媒体查询
特点：
使用 @media 查询，可以对不同的媒体类型定义不同的样式。
使用：
- @media 媒体类型 and (媒体特性) { css code}
- < link media=“媒体类型 and (媒体特性)” href=‘外部css文件路径’>
简写： media="(媒体特性)"
| 媒体类型 | 描述 |
|---|---|
| aural | 用于语音和音乐合成器 |
| braille | 用于触觉反馈设备 |
| handheld | 用于小型或手持设备 |
| 用于打印机 | |
| projection | 用于投影图像，如幻灯片 |
| screen | 所有浏览器 用于计算机显示器 |
| tty | 用于使用固定间距字符格的设备。如电传打字机和终端 |
| tv | 用于电视类设备 |
| embossed | 用于凸点字符（盲文）印刷设备 |
| speech | 用于语音类型 |
| all | 所有浏览器 用于所有媒体设备类型 |
Rem 介绍
- rem 是 font size of the root element（根元素的字体大小）
- rem （相对单位）是指相对于根元素的字体大小的单位。一旦根节点html定义的font-size变化，那么整个网页中运用到rem的也会随之变化。
- rem 取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度
- chrome浏览器字体小于12px（会被重置为12px)
Rem自适应原理
移动端自适应rem原理，可以根据屏幕的宽度来自适应宽高和字体大小，rem是根据根元素的大小而改变大小，所以只要把根元素的字体大小根据屏幕的宽度大小做出相应的改变就可以自适应屏幕了。
媒体查询改变根元素的字体大小（了解）
CSS3新增加了媒体查询功能，也就是可以根据设备媒体的属性做相关的判断，然后执行不同的CSS规则。 媒体查询细节参考。
媒体查询以@media开头，然后后面可以跟上 判断的条件，比如：screen表示屏幕设备, and是并且的意思， min-width是最小宽度的意思。
@media screen and (min-width: 320px) {
html {font-size: 50px;}
}
@media screen and (min-width: 360px) {
html {font-size: 56.25px;}
}
@media screen and (min-width: 400px) {
html {font-size: 62.5px;}
}
@media screen and (min-width: 440px) {
html {font-size: 68.75px;}
}
@media screen and (min-width: 480px) {
html {font-size: 75px;}
}
@media screen and (min-width: 640px) {
html {font-size: 100px;}
}
js实现动态改变根元素的字体大小（了解）
通过js动态获取屏幕的宽度（document.clientWidth）然后根据屏幕宽度动态计算出rem的实际值。
假设，640px的设备 1rem = 100px
公式： rem = document.body.clientWidth / 640 * 100px;
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 3.75rem;
height: 2rem;
font-size: .2rem;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">滨河天下</div>
<script>
var w = document.documentElement.clientWidth;;//获取页面可见宽度
var sw = 375 / 100; //按375比100基本单位
var fs = w / sw; //根据屏幕宽度计算出来的字号大小
document.getElementsByTagName("html")[0].style.fontSize = fs + 'px'; //设置字号的大小
//宽口大小改变的时候设置字号的大小
window.onload = function () {
window.onresize = function () {
w = document.documentElement.clientWidth;//屏幕宽度
fs = w / sw; //根据屏幕宽度计算出来的字号大小
document.getElementsByTagName("html")[0].style.fontSize = fs + 'px';
}
}
</script>
</body>
</html>
移动端适配布局开发解决方案 ：flexible
移动端适配布局开发解决方案
flexible方案最靠谱，应用也最广泛。
优势
- 保证不同设备下的统一视觉体验。
- 不需要你再手动设置viewport，根据当前环境计算出最适合的viewport。
- 支持任意尺寸的设计图，不局限于特定尺寸的设计图。 支持单一项目，多种设计图尺寸，专为解决大型，长周期项目。
- 提供px2rem转换方法，CSS布局，零成本转换，原始值不丢失。
另外推荐：基于 flexible方案的 hotcss
