CSS——移动端适配方案

移动端适配方案
一、百分百布局,流式布局。代表网站优酷、腾讯、天猫、百度
　　流式布局原则：
　　　　文字流式(fluid)
　　　　控件弹性(flexible)
　　　　图片等比缩放(scale)
　　好处：大屏幕下显示更多内容
　　坏处：宽屏下比例会有些不协调

二、等比缩放布局，也叫rem布局。代表网站网易、爱奇艺、美团、淘宝
　　单位：
　　　　em 是一个相对单位，1em等于当前元素或父元素的font-size值
　　　　rem 是一个相对单位，1rem等于根元素的font-size值
　　　　vw/vh 把屏幕分成100份，1vw相对于屏幕宽的1%
方法：
　　　通过JS动态设置font-size：
　　　举例：
　　　　iphone6举例(iphone的屏幕宽度为375px)：

<style>
#box{width:1.4rem;height:1rem;background:red;}
</style>
<script>
var fontsize = document.doucumentElement.clientWidth / 3.75;
document.documentElement.style.fontSize = fontsize + 'px';
</script>

　　通过vm动态设置font-size:
　　　　vw/vh
　　注：要给body重置下font-size:16px;