媒体查询适配不同移动端屏幕尺寸大小

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; } }

转载于:https://www.cnblogs.com/wuwenshi/p/7767041.html