App响应式布局

1、手机的响应式布局，所有的单位用rem来表示。

　　如：设计稿的宽度是750，则html标签的font-size=屏幕宽度/7.5。那么在网页中的尺寸 = 设计高上实际的尺寸/100.

把下面的代码作为一个单独的resize.js文件，手机的页面引用这个文件。

$("html").css({"font-size":$(window).width()/7.5});
$(window).resize(function(){
    $("html").css({"font-size":$(window).width()/7.5});
});

 

2、移动端单位rem作为单位，一定要注意，换算后字体的px单位一定不能小于12px。不然的话，rem值非常小，字体还是会有12px的。当屏幕比较小，没什么影响，屏幕一大起来，字体就会变得很小，于其他的元素不统一了。

3、rem单位和em结合起来使用会更好。有字体的标签里高度、行高使用em的有点非常明显。比如 ： input标签，里面给文字设置大小，如果文字的高度比input高，溢出来的就会被切掉，字体只有一半。用em做单位就不会出现这种问题。基本上表单、表格、button的高度都用em做单位比较好。

4、标签的高度和文字的高度有比较明显倍数关系，使用em作为单位，页面的自适应会非常好。

5、手机端适配，开发的时候需要测试 机型（谷歌浏览器中的模拟手机）

　　a、iPhone6

　　b、iPhone5 

　　c、Nexus5 

 

转载于:https://www.cnblogs.com/wfblog/p/8992529.html