JS+CSS 自適應屏幕

布局適配方式

現(xiàn)在比較主流的適配方案，可根據視口不同編寫不同樣式達到適應效果，比如框架Bootstrap，它能完成大部分項目需求，但是編寫過于復雜。

主流的布局方式，不僅適用于移動Web，網頁上也表現(xiàn)良好，也是現(xiàn)在使用最多的布局方式。

這種方法只適合簡單要求不高的webApp，一般在適應要求不高，或者大屏顯示沒有要求時候可以使用。

rem 單位介紹
rem（font size of the root element）是相對長度單位。相對于根元素（即html元素）font-size計算值的倍數

• 原理：將px替換成rem，在腳本中使用JS動態(tài)修改html的font-size適配，它可以根據根視口大小去改變基準元素的字體，然后進行等比縮放來進行變化，達到各種屏幕適應。

控制的JS寫法

var?htmlWidth?=?document.documentElement.clientWidth?||?document.body.clientWidth;?//獲取屏幕的寬度

//獲取HTML的Dom元素
var?htmlDom?=?document.getElementsByTagName('html')[0];
//設置根元素字體
htmlDom.style.fontSize=?htmlWidth/20?+?'px';

這種方式目前常用于webapp上，主要是使用rem特性來靈活改變字體大小，達到窗口大小改變等比縮放元素。

拓展部分：

目前在自適應這塊像對于互聯(lián)網電視，由于開發(fā)時候對圖片尺寸是有嚴格要求，因此，集成時候只需要設置視口大小就可以對任何屏幕進行等比縮放。

一般會在meta標簽中直接設置開發(fā)時候基準的大小