移动端rem
最后更新于：2022-04-01 23:51:04
[TOC]
# 移动端rem使用
注意@media only screen写在需要操控的样式后面，对已声明样式才可以重新赋予新样式，媒体查询@media写在style靠前是不规范的写法，切记。
如果懒得不愿动手可直接将@media的代码放置style尾部。
~~~
/*iphone 4 screen-width:320px*/
@media only screen and (min-width: 320px) and (max-width: 360px) {}
/*三星Galaxy S5 screen-width:360px*/
@media only screen and (min-width: 360px) and (max-width: 375px) {}
/*iphone 6 screen-width:375px*/
@media only screen and (min-width: 375px) and (max-width: 414px) {}
/*iphone 6plus screen-width:414px*/
@media only screen and (min-width: 414px) and (max-width: 768px) {}
/*iPad Mini screen-width:768px*/
@media only screen and (min-width: 768px){}
~~~
# Rem布局（全网最准确布局）
首先设计稿是750px的宽度（下文以750px设计稿为准）
## HTML内容
``
添加一个js
document.documentElement.style.fontSize\=window.innerWidth/75+'px';
window.addEventListener("resize",function(){
document.documentElement.style.fontSize\=window.innerWidth/75+'px';
})
## CSS内容
设置html的css
html{
/\*height: 750px/75;以750的设计稿走，字体默认10px\*/
font-size:calc(100vm/75);
';