HTML響應式布局實現詳解

2021-08-22 08:27:42 字數 1779 閱讀 2851

（1）viewport是網頁預設的寬度和高度，上面這行**的意思是：網頁寬度預設等於螢幕寬度 （width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。

所有主流瀏覽器都支援這個設定，包括ie9。對於那些老式瀏覽器（主要是ie6、7、8），需要使用css3-mediaqueries.js。

（2）x-ua-compatible

x-ua-compatible是自從ie8新加的乙個設定，對於ie8以下的瀏覽器是不識別的。 通過在meta中設定x-ua-compatible的值，可以指定網頁的相容性模式設定。

#ie瀏覽器，無論是否用dtd宣告文件標準，ie8/9都會以ie7引擎來渲染頁面。

#ie瀏覽器，ie8/9都會以ie8引擎來渲染頁面。

#ie瀏覽器，ie8/9及以後的版本都會以最高版本ie來渲染頁面。

#ie=edge告訴ie使用最新的引擎渲染網頁，chrome=1則可以啟用chrome frame。

這裡的chrome=1不是說ie的技術增強了可以模擬chrome瀏覽器，而是與谷歌開發的google chrome frame(谷歌內嵌瀏覽器框架gcf)有關。這個外掛程式可以讓使用者的ie瀏覽器外觀不變，但使用者在瀏覽網頁時實際上使用的是chrome的核心，並且支援windows xp及以上系統的ie6/7/8。

頁面中各個區塊的位置都是浮動的，不是固定不變的，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢位），避免了水平滾動條的出現

.left


.right
@media screen and (max-device-width: 400px)  }
當螢幕小於400時，left取消了浮動。

"自適應網頁設計"的核心，就是css3引入的media query模組。自動探測螢幕寬度，然後載入相應的css檔案，如果螢幕寬度小於600畫素（max-device-width: 600px），就載入css600.css檔案。如果螢幕寬度在600畫素到980畫素之間，則載入css600-980.css檔案。

除了用html標籤載入css檔案，還可以在現有css檔案中載入

@import url("css600.css") screen and (max-device-width: 600px);
（1）width:auto; / width:xx%;

（2）字型大小是頁面預設大小的100%，即16畫素。字型不要使用絕對大小"px"，要使用相對大小「rem」

html body
"自適應網頁設計"還必須實現的自動縮放。

img, object
老版本的ie不支援max-width，所以只好寫成：

img
windows平台縮放時，可能出現影象失真現象。這時，可以嘗試使用ie的專有命令

img
或使用js--imgsizer.js

addloadevent(function() );

響應式布局詳解

響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用 大勢所趨 來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候，首先要...

響應式布局詳解

響應式布局等於流動網格布局，響應式布局就是實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使 在手機和平板電腦上有更好的瀏覽閱讀體驗。換句話說就是乙個 能夠相容多個終端，而不是為了每乙個終端做乙個特定的版本。在我看來，響應式布局更像是自適應布局的優化 自適應布局 流體布局 通過re...

HTML頁面響應式布局

同一套頁面可以相容不同解析度的裝置。實現 依賴於柵格系統 將一行平均分成12個格仔，可以指定元素佔幾個格仔 步驟 1.定義容器。相當於之前的table 容器分類 1.container 兩邊留白 2.container fluid 每一種裝置都是100 寬度 2.定義行。相當於之前的tr 樣式 ro...