[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){} ~~~ 20191114更新 # Rem布局（全網最準確布局） 首先設計稿是750px的寬度（下文以750px設計稿為準） ## HTML內容 `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 添加一個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);