移動端關於手機橫屏時樣式修改

2021-07-22 06:12:40 字數 560 閱讀 4387

蠻多方法通過js來實現手機橫屏時的各種操作,但是在這裡我要說的是一種通過css來實現移動端橫屏時展示效果的方法。這裡我舉的栗子是乙個固定區域顯示的栗子。

在正常情況下(手機不橫屏使用),我進行了乙個固定頂部的布局,效果如下所示:

然後我希望橫屏的時候顯示為如下效果:

由此來實現橫屏的時候固定頂部的區域的所佔地方減小。那麼關鍵的樣式**只要通過 @media來實現橫屏是修改對應的樣式了詳細看如下**為手機橫屏是對應呼叫到的樣式。

即關鍵主要用@media screen來實現我們頁面的自適應啦,而且@media screen 對移動端也很友好,又無需使用外掛程式,是不是用的很爽啊。**中的landscape就是標識著當手機橫屏時會識別裡面的樣式而不適用正常情況下的樣式啦。使用起來簡單快捷。

(首次發表文章,文章記錄結束了,撒花……賽高!!!)

移動端判斷橫屏豎屏

可能我們在寫移動端專案的時候會有要求或者為了更好的體驗會做橫豎屏檢測,以達到更好的使用者體驗。判斷橫豎屏 var utils delay var detectres document.getelementbyid j detectres var detectdata document.getelem...

移動端開發 禁止橫屏

對於移動端的頁面,很多時候是不希望橫屏顯示的,有可能橫屏顯示頁面顯示不全或者影響美觀,也或者其他的方面。那麼有什麼辦法能解決這一問題呢?看成品請移步文章最後,看效果請點這裡 下面就簡單講講兩種方法 1.通過判斷視窗寬高值的比值判斷是否橫屏 對於正常手機螢幕來說,視窗寬度是小於視窗高度的,即 寬度 高...

移動端如何強制頁面橫屏

最近公司要開發乙個移動端的類網頁遊戲 長按按鈕有個自行車一直騎行,碰到某個國家的地標就彈出該國的相應say hello的tip,要求橫屏顯示,不能豎屏。然而當使用者豎屏開啟時,而且沒開啟手機裡的橫屏模式,還要逼使用者去開啟。這時候使用者早就不耐煩的把你的遊戲關掉了。解決辦法就是在豎屏模式下,寫乙個橫...