移动端适配的简易方案

参考网易的rem适配方案,大致如下:

第一步:
media标签写在head里面:


第二步:加载头部script



附注:7.5是根据你的设计稿的width决定写多少,如果是640的,那就写6.4;其他道理一样!

第三步:在css样式里,一个div如果是宽500px 高200px;那么就是这样写:

div{width:5rem;
height:2rem
}

字体不用rem;直接写像素!就是这么简单!

第四步:添加一个css

@media screen and (max-width:321px){
    font-size:15px
}

@media screen and (min-width:321px) and (max-width:400px){
    font-size:16px
}

@media screen and (min-width:400px){
    font-size:18px
}

你可能感兴趣的:(移动端适配的简易方案)