溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用css3匹配手機(jī)屏幕橫豎狀態(tài)

發(fā)布時(shí)間：2021-07-27 11:14:21 來(lái)源：億速云 閱讀：173 作者：chen 欄目：web開(kāi)發(fā)

這篇文章主要講解了“如何使用css3匹配手機(jī)屏幕橫豎狀態(tài)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何使用css3匹配手機(jī)屏幕橫豎狀態(tài)”吧！

@media是css3中新定義的，功能非常強(qiáng)大，顧名思義PC是無(wú)法匹配橫豎屏的，所以orientation只對(duì)移動(dòng)設(shè)備起效。

1.頭部聲明

代碼如下:


<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 {  
       background-color: #ff0000;  
   }  
}  
@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)問(wèn)題，這時(shí)可用orientation匹配屏幕狀態(tài)，調(diào)整css代碼。

關(guān)于匹配屏幕橫豎屏狀態(tài)還可通過(guò)JS判斷，js中onorientationchange是window的一個(gè)事件，可以通過(guò)監(jiān)聽(tīng)事件匹配屏幕橫豎屏。

感謝各位的閱讀，以上就是“如何使用css3匹配手機(jī)屏幕橫豎狀態(tài)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何使用css3匹配手機(jī)屏幕橫豎狀態(tài)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手