首先页面顶部加上style
<style>
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
</style>
- 所有宽度布局都用百分比(因为一般手机布局都是左右各(50%),或宽度满屏(100%),或者三个(30%)
- 所有高度都用rem(rem会根据页面字体大小自动调整,上面的style内容就是为了这个服务)
- 所有图片都先随便设置并不同组命名不同的class,最后统一用js处理,这样能保持宽高比例不变,防止拉伸
$(function(){
$(".class").each(function(){
var width = $(this).width();
$(this).height(width*xxx);//这里的xxx是比例,先计算原图的宽高比,在这里乘上
});
});