1、使用media的時候需要先設置<meta>標簽來兼容移動設備的展示。
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width=device-width :寬度等於當前設備的寬度
user-scalable=no：用戶是否可以手動縮放（默認設置為no，不允許用戶放大縮小頁面）
initial-scale=1：初始的縮放比例（默認設置為1.0）
minimum-scale=1：允許用戶縮放到的最小比例（默認設置為1.0）
maximum-scale=1：允許用戶縮放到的最大比例（默認設置為1.0）
2、設置如：當屏幕寬度在375px~383px時，100px=1rem，寫樣式時把px單位換算成rem
@charset "UTF-8";
@media screen and (max-width: 319px) {
html {
font-size: 85.33333px; } }
@media screen and (min-width: 320px) and (max-width: 359px) {
html {
font-size: 85.33333px; } }
@media screen and (min-width: 360px) and (max-width: 374px) {
html {
font-size: 96px; } }
@media screen and (min-width: 375px) and (max-width: 383px) {
html {
font-size: 100px; } }
@media screen and (min-width: 384px) and (max-width: 399px) {
html {
font-size: 102.4px; } }
@media screen and (min-width: 400px) and (max-width: 413px) {
html {
font-size: 106.66667px; } }
@media screen and (min-width: 414px) and (max-width: 767px) {
html {
font-size: 110.4px; } }
@media screen and (min-width: 768px) and (max-width: 1023px) {
html {
font-size: 160.4px; } }
@media screen and (min-width: 1024px){
html {
font-size: 210.4px; } }