媒体查询和动态REM

媒体查询和的动态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就等于屏幕宽度的十分之一。