020-85201717 / 13725302004
廣州網(wǎng)站建設(shè)在做手機(jī)網(wǎng)站的時(shí)候，經(jīng)常會(huì)涉及到屏幕的適配問題，以前的辦法是判斷手機(jī)的分辨率來(lái)的，經(jīng)常是640px之類的判斷，但是現(xiàn)在隨著手機(jī)的分辨率越來(lái)越高，分辨率的花樣越來(lái)越多，通過(guò)像素來(lái)判斷實(shí)在是太麻煩了，所以今天的這篇文章就教給大家使用css的orientation屬性來(lái)判斷手機(jī)是豎屏還是橫屏，這樣寫兩套css就可以匹配了。
@media是css3中新定義的，功能非常強(qiáng)大，顧名思義PC是無(wú)法匹配橫豎屏的，所以orientation只對(duì)移動(dòng)設(shè)備起效。
1.頭部聲明
復(fù)制代碼
代碼如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
加到
<head></head>
2. media匹配屏幕是橫屏還是豎屏
代碼如下:
@media all and (orientation : landscape) { </p> <p>/* 這是匹配橫屏的狀態(tài)，橫屏?xí)r的css代碼 */
body {
}
}
@media all and (orientation : portrait){ </p> <p>/* 這是匹配豎屏的狀態(tài)，豎屏?xí)r的css代碼 */
body {
background-color: #00ff00;
}
}
3. 應(yīng)用的地方
（1）手機(jī)WEB頁(yè)面元素內(nèi)容一般都是通過(guò)百分比定義的，以便能夠在不同分辨率設(shè)備下都能正常顯示，雖然這樣，但是移動(dòng)設(shè)備的屏幕分辨率寬度和高度相差還是很大，同樣的頁(yè)面在屏幕翻轉(zhuǎn)過(guò)來(lái)時(shí)可能百分比定義的元素寬度會(huì)變得非常大，這樣就會(huì)失去頁(yè)面的美觀性，這樣，如果用orientation匹配屏幕的翻轉(zhuǎn)狀態(tài)，就可以寫不同的css加以控制頁(yè)面樣式。
（2）對(duì)于有背景圖的移動(dòng)WEB頁(yè)面，可以根據(jù)orientation匹配屏幕屏幕狀態(tài)，設(shè)置不同的background。
（3）稍微有技術(shù)的一點(diǎn)：某些有相對(duì)定位元素的WEB頁(yè)面，將某元素定位到頁(yè)面底部，當(dāng)屏幕是豎屏狀態(tài)時(shí)，可能因?yàn)轫?yè)面總長(zhǎng)度小于屏幕高度(但是大于屏幕寬度)，這時(shí)將相對(duì)定位元素定位到底部是正確的，但是當(dāng)屏幕翻轉(zhuǎn)成為橫屏?xí)r，此時(shí)因?yàn)轫?yè)面內(nèi)容高度大于屏幕高度(就是未翻轉(zhuǎn)時(shí)屏幕寬度)，相對(duì)定位元素會(huì)覆蓋在頁(yè)面內(nèi)容之上，導(dǎo)致頁(yè)面出現(xiàn)問題，這時(shí)可用orientation匹配屏幕狀態(tài)，調(diào)整css代碼。
關(guān)于匹配屏幕橫豎屏狀態(tài)還可通過(guò)JS判斷，js中onorientationchange是window的一個(gè)事件，可以通過(guò)監(jiān)聽事件匹配屏幕橫豎屏。
版權(quán)所有：廣州騰虎網(wǎng)絡(luò)科技有限公司
粵ICP備13073147號(hào) 
