其屏幕適配方面并不比原生態(tài)代碼簡(jiǎn)單。下面給大家分享下我總結(jié)出來(lái)的H5界面適配：
一、Media Queries
網(wǎng)上一搜一大把的一個(gè)方式MediaQueries，在CSS中寫(xiě)下不同屏幕下使用不同的CSS來(lái)實(shí)現(xiàn)屏幕適配，這個(gè)方式不但可以進(jìn)行字體的適配還能實(shí)現(xiàn)不同界面顯示不同的樣式：
1：CSS中根據(jù)要求寫(xiě)不同的屏幕范圍，如下:
@media screen and (min-width: 240px) and(max-width:319px){
html {font-size: 10px; }
}
2：HTML代碼頭部添加下面一段：
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1.0,user-scalable=no;" />
這里的各項(xiàng)參數(shù)所代表的意思可以另行百度。
這種方式跟android中通過(guò)多個(gè)drawable、layout、value文件夾各自編寫(xiě)XML界面的方式相同。

二、em和rem的使用
避免px單位的使用是個(gè)很重要的一點(diǎn)。這里用em和rem來(lái)代替px。
em：根據(jù)父標(biāo)簽的字體大小來(lái)設(shè)置當(dāng)前標(biāo)簽的寬高或字體大小。如：
<div id=”a”>
<div id=”b”></div>