CSS橫向全屏指的是,在網頁中使用CSS實現橫向占滿整個屏幕的效果。
body { margin: 0; padding: 0; } .container { width: 100%; height: 100vh; display: flex; flex-direction: row; overflow-x: auto; } .item { width: 100vw; height: 100vh; }
以上代碼是實現CSS橫向全屏的關鍵。首先,將body的margin和padding都設置為0,這是為了避免在容器中出現不必要的留白。其次,創建一個class名為container的容器,將其寬度設為100%并設置其高度為瀏覽器可視窗口的高度(100vh),并將其display屬性設為flex以實現容器中的元素橫向排列。最后,在容器中創建class名為item的子元素,將其寬度設為瀏覽器可視窗口的寬度(100vw)和高度設為瀏覽器可視窗口的高度(100vh),即可實現橫向全屏的效果。
通過以上的CSS代碼,我們可以很方便地創建一個橫向全屏的網頁布局,適用于像圖片展示、橫向滾動網站等場景。值得注意的是,以上代碼中的overflow-x屬性設為auto,這是為了在容器中放置過多的item時出現橫向滾動條,方便用戶查看內容。