這里提供三種網頁自適應的方法：
方案一：用比例控制大小
<head>標簽里寫入
<meta name="viewport" content="width=device-width, initial-scale=1.0">
以下是相關的屬性的解釋：
- width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）
- height：和 width 相對應，指定高度
- initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例，1.0就是占網頁的100%
- maximum-scale：允許用戶縮放到的最大比例
- minimum-scale：允許用戶縮放到的最小比例
- user-scalable：用戶是否可以手動縮放
然后網頁內的所有元素的大小，位置都用%去寫，不能用px等，顯然比較蛋疼的一種方法，
方案二：使用媒體查詢
這里會用到css3的@media,可以根據查詢媒體的解析度，針對不同的解析度寫不同的css，在執行時會自動識別來執行不同css樣式，也比較繁瑣，
舉個例子,當瀏覽器視窗小于 500px 時，背景變為藍色：
@media only screen and (max-width: 500px) {
body {
background-color: blue;
}
}
方案三：定義div大小來限定
在寫的所有元素外面套一個div塊，規定min-width和min-height，這樣在瀏覽器縮小尺寸的時候布局就不會亂掉，當然也要注意，這時候設計所有元素時參照的的最大的父元素就不能看body了，得看你用的div這個塊的大小，(簡單易實作，但并沒有實作真正的自適應！）
例如：
div{
min-width: 1920px;
min-height: 1080px;
}
最后：
提供一種可以實作背景居中和網頁的元素位置居中的參考，即使改變瀏覽器尺寸，背景及其中元素依然可以不變位置，用到了絕對定位
//在定義最大的塊div或body時
.div{ position: absolute; width: 想要的網頁背景寬度; height: 想要的網頁背景長度; top:0; left:50%; margin-left:-（想要的網頁背景寬度的一半） ; //關鍵 }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/72069.html
標籤：Html/Css
上一篇：css中的絕對定位與相對定位