你有没有对于样式在不同设备展示的效果不同而苦恼，比如：在iphone 6/8上正常显示一行，在iphone 5中却发生换行情况。此类需要精确适配时，利用 @media + rem 来解决，就方便很多了！只需要用rem来布局即可
ps：
rem 是根据根节点（html）的font-size 来确定的。
关于 @media 具体细节请参阅 MDN 媒体查询 @media
简单来说，用户进入页面时，@media会检测当前用户设备的屏幕大小，来加载相应的样式，我们就可以利用这个特性，针对不同屏幕做不同的样式。
附上代码
@media screen and (min-width : 320px) {
html {
font-size : 10px !important;
}
}
@media screen and (min-width : 323.2px) {
html {
font-size : 10.1px !important;
}
}
@media screen and (min-width : 326.4px) {
html {
font-size : 10.2px !important;
}
}
@media screen and (min-width : 329.6px) {
html {
font-size : 10.3px !important;
}
}
@media screen and (min-width : 332.8px) {
html {
font-size : 10.4px !important;
}
}
@media screen and (min-width : 336px) {
html {
font-size : 10.5px !important;
}
}
@media screen and (min-width : 339.2px) {
html {
font-size : 10.6px !important;
}
}
@media screen and (min-width : 342.4px) {
html {
font-size : 10.7px !important;
}
}
@media screen and (min-width : 345.6px) {
html {
font-size : 10.8px !important;
}
}
@media screen and (min-width : 348.8px) {
html {
font-size : 10.9px !important;
}
}
@media screen and (min-width : 352px) {
html {
font-size : 11px !important;
}
}
@media screen and (min-width : 355.2px) {
html {
font-size : 11.1px !important;
}
}
@media screen and (min-width : 358.4px) {
html {
font-size : 11.2px !important;
}
}
@media screen and (min-width : 361.6px) {
html {
font-size : 11.3px !important;
}
}
@media screen and (min-width : 364.8px) {
html {
font-size : 11.4px !important;
}
}
@media screen and (min-width : 368px) {
html {
font-size : 11.5px !important;
}
}
@media screen and (min-width : 371.2px) {
html {
font-size : 11.6px !important;
}
}
@media screen and (min-width : 374.4px) {
html {
font-size : 11.7px !important;
}
}
@media screen and (min-width : 377.6px) {
html {
font-size : 11.8px !important;
}
}
@media screen and (min-width : 380.8px) {
html {
font-size : 11.9px !important;
}
}
@media screen and (min-width : 384px) {
html {
font-size : 12px !important;
}
}
@media screen and (min-width : 387.2px) {
html {
font-size : 12.1px !important;
}
}
@media screen and (min-width : 390.4px) {
html {
font-size : 12.2px !important;
}
}
@media screen and (min-width : 393.6px) {
html {
font-size : 12.3px !important;
}
}
@media screen and (min-width : 396.8px) {
html {
font-size : 12.4px !important;
}
}
@media screen and (min-width : 400px) {
html {
font-size : 12.5px !important;
}
}
@media screen and (min-width : 403.2px) {
html {
font-size : 12.6px !important;
}
}
@media screen and (min-width : 406.4px) {
html {
font-size : 12.7px !important;
}
}
@media screen and (min-width : 409.6px) {
html {
font-size : 12.8px !important;
}
}
@media screen and (min-width : 412.8px) {
html {
font-size : 12.9px !important;
}
}
@media screen and (min-width : 416px) {
html {
font-size : 13px !important;
}
}
@media screen and (min-width : 419.2px) {
html {
font-size : 13.1px !important;
}
}
@media screen and (min-width : 422.4px) {
html {
font-size : 13.2px !important;
}
}
@media screen and (min-width : 425.6px) {
html {
font-size : 13.3px !important;
}
}
@media screen and (min-width : 428.8px) {
html {
font-size : 13.4px !important;
}
}
@media screen and (min-width : 432px) {
html {
font-size : 13.5px !important;
}
}
@media screen and (min-width : 435.2px) {
html {
font-size : 13.6px !important;
}
}
@media screen and (min-width : 438.4px) {
html {
font-size : 13.7px !important;
}
}
@media screen and (min-width : 441.6px) {
html {
font-size : 13.8px !important;
}
}
@media screen and (min-width : 444.8px) {
html {
font-size : 13.9px !important;
}
}
@media screen and (min-width : 448px) {
html {
font-size : 14px !important;
}
}
@media screen and (min-width : 451.2px) {
html {
font-size : 14.1px !important;
}
}
@media screen and (min-width : 454.4px) {
html {
font-size : 14.2px !important;
}
}
@media screen and (min-width : 457.6px) {
html {
font-size : 14.3px !important;
}
}
@media screen and (min-width : 460.8px) {
html {
font-size : 14.4px !important;
}
}
@media screen and (min-width : 464px) {
html {
font-size : 14.5px !important;
}
}
@media screen and (min-width : 467.2px) {
html {
font-size : 14.6px !important;
}
}
@media screen and (min-width : 470.4px) {
html {
font-size : 14.7px !important;
}
}
@media screen and (min-width : 473.6px) {
html {
font-size : 14.8px !important;
}
}
@media screen and (min-width : 476.8px) {
html {
font-size : 14.9px !important;
}
}
@media screen and (min-width : 480px) {
html {
font-size : 15px !important;
}
}
@media screen and (min-width : 483.2px) {
html {
font-size : 15.1px !important;
}
}
@media screen and (min-width : 486.4px) {
html {
font-size : 15.2px !important;
}
}
@media screen and (min-width : 489.6px) {
html {
font-size : 15.3px !important;
}
}
@media screen and (min-width : 492.8px) {
html {
font-size : 15.4px !important;
}
}
@media screen and (min-width : 496px) {
html {
font-size : 15.5px !important;
}
}
@media screen and (min-width : 499.2px) {
html {
font-size : 15.6px !important;
}
}
@media screen and (min-width : 502.4px) {
html {
font-size : 15.7px !important;
}
}
@media screen and (min-width : 505.6px) {
html {
font-size : 15.8px !important;
}
}
@media screen and (min-width : 508.8px) {
html {
font-size : 15.9px !important;
}
}
@media screen and (min-width : 512px) {
html {
font-size : 16px !important;
}
}
@media screen and (min-width : 515.2px) {
html {
font-size : 16.1px !important;
}
}
@media screen and (min-width : 518.4px) {
html {
font-size : 16.2px !important;
}
}
@media screen and (min-width : 521.6px) {
html {
font-size : 16.3px !important;
}
}
@media screen and (min-width : 524.8px) {
html {
font-size : 16.4px !important;
}
}
@media screen and (min-width : 528px) {
html {
font-size : 16.5px !important;
}
}
@media screen and (min-width : 531.2px) {
html {
font-size : 16.6px !important;
}
}
@media screen and (min-width : 534.4px) {
html {
font-size : 16.7px !important;
}
}
@media screen and (min-width : 537.6px) {
html {
font-size : 16.8px !important;
}
}
@media screen and (min-width : 540.8px) {
html {
font-size : 16.9px !important;
}
}
@media screen and (min-width : 544px) {
html {
font-size : 17px !important;
}
}
@media screen and (min-width : 547.2px) {
html {
font-size : 17.1px !important;
}
}
@media screen and (min-width : 550.4px) {
html {
font-size : 17.2px !important;
}
}
@media screen and (min-width : 553.6px) {
html {
font-size : 17.3px !important;
}
}
@media screen and (min-width : 556.8px) {
html {
font-size : 17.4px !important;
}
}
@media screen and (min-width : 560px) {
html {
font-size : 17.5px !important;
}
}
@media screen and (min-width : 563.2px) {
html {
font-size : 17.6px !important;
}
}
@media screen and (min-width : 566.4px) {
html {
font-size : 17.7px !important;
}
}
@media screen and (min-width : 569.6px) {
html {
font-size : 17.8px !important;
}
}
@media screen and (min-width : 572.8px) {
html {
font-size : 17.9px !important;
}
}
@media screen and (min-width : 576px) {
html {
font-size : 18px !important;
}
}
@media screen and (min-width : 579.2px) {
html {
font-size : 18.1px !important;
}
}
@media screen and (min-width : 582.4px) {
html {
font-size : 18.2px !important;
}
}
@media screen and (min-width : 585.6px) {
html {
font-size : 18.3px !important;
}
}
@media screen and (min-width : 588.8px) {
html {
font-size : 18.4px !important;
}
}
@media screen and (min-width : 592px) {
html {
font-size : 18.5px !important;
}
}
@media screen and (min-width : 595.2px) {
html {
font-size : 18.6px !important;
}
}
@media screen and (min-width : 598.4px) {
html {
font-size : 18.7px !important;
}
}
@media screen and (min-width : 601.6px) {
html {
font-size : 18.8px !important;
}
}
@media screen and (min-width : 604.8px) {
html {
font-size : 18.9px !important;
}
}
@media screen and (min-width : 608px) {
html {
font-size : 19px !important;
}
}
@media screen and (min-width : 611.2px) {
html {
font-size : 19.1px !important;
}
}
@media screen and (min-width : 614.4px) {
html {
font-size : 19.2px !important;
}
}
@media screen and (min-width : 617.6px) {
html {
font-size : 19.3px !important;
}
}
@media screen and (min-width : 620.8px) {
html {
font-size : 19.4px !important;
}
}
@media screen and (min-width : 624px) {
html {
font-size : 19.5px !important;
}
}
@media screen and (min-width : 627.2px) {
html {
font-size : 19.6px !important;
}
}
@media screen and (min-width : 630.4px) {
html {
font-size : 19.7px !important;
}
}
@media screen and (min-width : 633.6px) {
html {
font-size : 19.8px !important;
}
}
@media screen and (min-width : 636.8px) {
html {
font-size : 19.9px !important;
}
}
@media screen and (min-width : 640px) {
html {
font-size : 20px !important;
}
}
