动态REM

响应式

1.meta:vp 阻止缩放

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就是一个屏幕宽度；

使用js计算出屏幕宽度

单位放大10倍

实现

---

动态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浏览器不支持。
可伸缩布局方案