h5做適應不同手機尺寸（不同手機尺寸，不依賴框架）

因為近期要做一個投放機器上的落地頁，最好適應ipad,及不同手機尺寸，又因為對框架不太熟悉，只能各種百度和找方法，做一個不依賴任何框架，但是適應不同手機尺寸，最高適應至1080px的h5單頁面

首先自適應頁面就得盡量不使用px單位(絕對單位)，而使用rem(相對單位)，簡單介紹rem它是相對於根元素大小變化的一個相對單位，具體參考rem的介紹http://www.ofmonkey.com/front/rem,效果圖如下：

1.html頁面加<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

2.js部分

<script type="text/javascript">
        //自適應頁面
         var fontSize = 50;
            var _w = document.body.clientWidth;
            console.log(_w);
            var font = document.documentElement.clientWidth / 7.5 + 'px';
            document.getElementsByTagName('html')[0].style.fontSize = font;
        
            window.onresize = function(){
                var _w = document.body.clientWidth;
                var font = document.documentElement.clientWidth / 7.5 + 'px';
        //獲取html標簽
                document.getElementsByTagName('html')[0].style.fontSize = font;
            }
    </script>

3.本頁面基准值是100，所以大小按照設計稿除以100，例如：設計稿寬度是100px（width:100px），那么用rem應該是0.01rem(width:0.01rem)。

字體、margin、padding以rem為單位，另外圖片使用100%，遇到其他涉及寬度的地方可以用百分比代替px，示例部分代碼如下：

#container .banner img{
    width: 100%;
    display: block;
}
#container .content{
    padding: 0 0.25rem 1.4rem;
    background: #f3f2fb;
}
#container .content .caption{
    font-size: 0.39rem;
    font-weight: bold;
    padding: 0.49rem 0 0.43rem;
}

以上如有錯誤之處，歡迎指正，有更加優化和簡潔的方法，歡迎評論區補充哦，大家一起學習，一起進步！