手机端的适配

meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no">

将HTML、body的font-size 设置成100px;

每次只需将 设计稿的宽度调成640 然后 除以 100

@media screen and (min- 320px) {html{font-size:50px;}}
@media screen and (min- 360px) {html{font-size:56.25px;}}
@media screen and (min- 375px) {html{font-size:58.59375px;}}
@media screen and (min- 400px) {html{font-size:62.5px;}}
@media screen and (min- 414px) {html{font-size:64.6875px;}}
@media screen and (min- 440px) {html{font-size:68.75px;}}
@media screen and (min- 480px) {html{font-size:75px;}}
@media screen and (min- 520px) {html{font-size:81.25px;}}
@media screen and (min- 560px) {html{font-size:87.5px;}}
@media screen and (min- 600px) {html{font-size:93.75px;}}
@media screen and (min- 640px) {html{font-size:100px;}}
@media screen and (min- 680px) {html{font-size:106.25px;}}
@media screen and (min- 720px) {html{font-size:112.5px;}}
@media screen and (min- 760px) {html{font-size:118.75px;}}
@media screen and (min- 800px) {html{font-size:125px;}}
@media screen and (min- 960px) {html{font-size:150px;}}