當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

详解布局之--静态、自适应、流式、响应式

發布時間：2025/3/21 HTML 46 豆豆

生活随笔收集整理的這篇文章主要介紹了详解布局之--静态、自适应、流式、响应式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、自適應布局

1、定義：可以自動識別屏幕寬度，并做出相應的調整。

例如：《福爾摩斯歷險記》六個主人公的頭像。如果屏幕寬度大于1300像素，則6張圖片并排在一行。

如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。

如果屏幕寬度在400像素到600像素之間，則導航欄移到網頁頭部。

如果屏幕寬度在400像素以下，則6張圖片分成三行。

2、實現

在網頁頭部<head>中加入<meta name="viewport" content="width=device-width,initial-scale=1" />

解釋：viewpoint是網頁默認的寬度和高度，網頁默認寬高等于屏幕寬高（width=device-width）,原始縮放比例為1（initial-scale=1），即網頁初始大小占網頁大小的100%。

3、兼容

對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

4、使用條件

由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度。寬度使用百分比（width：xx%）,字號只能使用（em）。

5、核心

使用CSS3的@media媒體查詢。

　　　　href="smallScreen.css" />

除了用html標簽加載CSS文件，還可以在現有CSS文件中加載。

　　@import url("tinyScreen.css") screen and (max-device-width: 400px);

二、流式布局

1、定義：各個區塊的位置是浮動的，當一行容納不下時，自動擠到下一行，而不會出現滾動條。

轉載于:https://www.cnblogs.com/candy-Yao/p/7399231.html

以上是生活随笔為你收集整理的详解布局之--静态、自适应、流式、响应式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。