响应式
1.meta:vp 阻止缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.尽量不要写width / height，改用max / min
不要把宽高写死，使用最小宽度和最大高度
3.flex布局
尽量使用flex布局
4.media query
尽量使用媒体查询，给不同的宽度，使用不同的样式。
动态REM
动态REM不是响应式，只针对移动端方案。
原因：手机的尺寸问题，手机特点，长宽高不相同。
为了在做出一套布局，在各个手机上是一样的。淘宝的前端工程师想到了一种方案，等比放大/缩小。可以在所有手机上做到完美的展示。
中国大公司都不做响应式。除了博客和新闻类网站，其他类型绝不做响应式。一般做两套网站，PC端一个/移动端一个。
设备像素比
设备像素比 = 用物理像素宽度 ÷ 虚拟像素；
像素的大小是多少？
像素的大小，是由操作系统算出来的，硬件不管。比如1920*1080分辨率，使用屏幕 ÷ 1920*1080；
像素的意义，这个像素只能显示一种颜色，不能显示多种颜色。
像素是绝对单位，还是相对单位？
对于物理世界来说，像素肯定不是绝对的，但也不是相对的，因为没办法知道相对于谁。一般不讨论，如果一定要说，像素是一个绝对单位。因为像素不随着设备
em是一个相对单位，相对于font-size；
px ,相对于用户设置系统的分辨率，大的说是一个绝对单位。
REM是什么？
HTML默认字体大小 16px;
REM = root em; (根元素的em;根元素就是HTML)===>HTML font-size
html{
font-size: 26px;
}
p{
font-size: 2rem; /* html font size*/
}
REM和EM的区别？
EM是继承父元素的font-size大小，并乘以自身倍数。
很少用em;如果指定自身大小，自身font-size就不会有变化。
REM就是相对根元素的大小。
总结：REM永远相对于根元素，EM相对于自身的font-size；
由于自身的font-size经常受影响，所有EM有很多不稳定性，基本都是继承来的。
font-size最小值
font-size设置的数值过低，受浏览器自己的逻辑判断，浏览器会认为你看不清，数值不会变化，不同字体最小值可能不同。
最保险的最小字体： 12px;
手机浏览器不会限制最小值。
动态REM
动态REM就是把html和font-size,动态的计算出来，其他的所有元素，都以HTML为基准，HTML就是一个屏幕宽度，REM就是一个屏幕宽度；
<script>
document.write(`
<style>
html{
font-size: ${document.documentElement.clientWidth}px;
}
</style>
`)
</script>
动态REM实例
任何手机设备上都是这个样子。
动态REM会被淘汰
动态REM实际在实现VW的功能。(如25vw,屏幕宽度的25%；1vw屏幕的1%)，以后趋势是基于vw去做，根本不要动态REM。
目前不能普及使用的原因，VW的兼容并没有那么好，
如果用户手机全是Android 4.2，VW就用不了了，如果手机全是iPhone，VW、动态REM都可以。
(iPhone用户升级欲望很强，大部分人都已经升级到最新版。)，系统升级，浏览器就会升级，浏览器升级就会支持VW。不同的用户，针对不同的代码
1像素的border
当设备窗口变化时，是虚拟的一像素，还是物理的一像素？
虚拟一像素。
iPhone 6 Plus / iPhone 7 plus 都是x3的屏幕；
需求，做出一像素物理border
- 想法一，做个缩放，transform: scale(.5);(放弃，缩放效果也会影响宽高。)
-
想法二，只放回动态REM，整个页面缩为原来的一半，如果单位是REM，就把REM的初始值×2，
如果单位是px,就不还原，如果单位是REM，就×2。
(以REM为单位的所有单位,先缩小一倍，再放大一倍，就是不变。以像素为单位的所有东西，缩小为原来的一半，但是不放大。只有REM放大了。)
如何实现。
使用js,获取当前屏幕是×2还是×3。
打印出设备像素比
alert(window.devicePixelRatio)
meta的viewport只能设置一次，浏览器看了一次之后就不会再看。
使用js生成meta:vp，不能生成之后再改，没有效果。
在安卓低端版本的UC浏览器不支持。
可伸缩布局方案
