前端靜態網頁, 由UI出帶標尺的效果圖, 和切圖資源, 將其實現成最終的網頁呈現給用戶.
之所以有這篇博文, 是因為UI設計的效果圖原始寬度是 1920px, 其中的標注尺寸也是以這個寬度為基礎的.
在網頁開發時, 嚴格按照標注尺寸布置頁面元素, 最終的網頁展現效果在我的 Win10 系統上整體偏大. 我的系統分辨率正是 1920 x 1080, 按說不應該呀.
想到 [顯示設置] 里面有一項 [縮放與布局], 系統默認給我的設置的是 125%(推薦) 是不是這個設置, 導致頁面整體被放大了呢, 於是, 我在chrome里面 ctrl + 滾輪 將網頁縮小到80%時, 發現這個縮小比例下面, 網頁效果和UI出圖是一致的. ctrl + 0 將網頁重置成 100%, 最大化chrome窗口, F12 查看頁面元素, 顯示html的寬度並不足 1920, 注意, 這個時候窗口是最大化的. 原來 Win10 里面的 [縮放與布局] 設置導致了網頁的全屏寬度和實際屏幕寬度不一致
原因找到了, 既然chrome縮放到80%和效果圖一致, 那么能不能讓用戶一打開網頁,默認按這個比例縮放顯示呢. 當然是可以的, 下面的css表示當網頁全屏寬不足 1920 時, 整體縮放 80%.
@media (max-width: 1919px) {
html {
zoom: 80%;
}
}
但是這個時候的用 IE 瀏覽器打開網頁還是沒有縮放效果, 那么如果解決在 IE 瀏覽器下面的縮放問題呢? 帶着這個問題, 在網絡上搜索后, 找到一項 IE 特有的樣式控制指令 @-ms-viewport 最終, 我們解決網頁縮放問題的代碼如下:
@media (max-width: 1919px) and (min-width: 768px) {
html {
zoom: 80%;
}
@-ms-viewport { width: 1920px; }
}
知識摘要
CSS3 @media 查詢
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。