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- 319px) {
html {
font-size: 85.33333px; } }
@media screen and (min- 320px) and (max- 359px) {
html {
font-size: 85.33333px; } }
@media screen and (min- 360px) and (max- 374px) {
html {
font-size: 96px; } }
@media screen and (min- 375px) and (max- 383px) {
html {
font-size: 100px; } }
@media screen and (min- 384px) and (max- 399px) {
html {
font-size: 102.4px; } }
@media screen and (min- 400px) and (max- 413px) {
html {
font-size: 106.66667px; } }
@media screen and (min- 414px) and (max- 767px) {
html {
font-size: 110.4px; } }
@media screen and (min- 768px) and (max- 1023px) {
html {
font-size: 160.4px; } }
@media screen and (min- 1024px){
html {
font-size: 210.4px; } }