媒體查詢和的動態(tài)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等

動態(tài)REM

動態(tài)REM是手機端布局常見的一種方式，具有適配各種手機屏幕尺寸的優(yōu)勢。
rem是個相對單位，1rem等于html元素的font-size；于是可以通過JS設置html元素的font-size等于屏幕的寬度，就可以得到一個動態(tài)的rem單位。

let size = window.innerWidth / 10;
     style.innerHTML = `html{font-size:${size}px}

上述代碼通過寫入style標簽的方式將html元素的字體大小設置為屏幕寬度的十分之一，這樣1rem就等于屏幕寬度的十分之一。