媒体查询和的动态REM是响应式页面和移动端的常用技术。
媒体查询的主要方式有：
link元素媒体查询
<link rel=”stylesheet” media=”mediatype and|not|only (meida feature)” href=”example.css”/>
样式表中媒体查询
<style>
@media meidiatype and|not|only (media feature){
.div{display:none;}
}
</style>
其中mediatype取值有：
all 所有设备；print 打印机和打印预览；screen 电脑、平板、手机；
meidia feature取值有：
常用max-width;device-width等
动态REM
动态REM是手机端布局常见的一种方式，具有适配各种手机屏幕尺寸的优势。
rem是个相对单位，1rem等于html元素的font-size；于是可以通过JS设置html元素的font-size等于屏幕的宽度，就可以得到一个动态的rem单位。
let size = window.innerWidth / 10;
style.innerHTML = `html{font-size:${size}px}
上述代码通过写入style标签的方式将html元素的字体大小设置为屏幕宽度的十分之一，这样1rem就等于屏幕宽度的十分之一。
