前端開發-基於@media網頁縮放處理

前端靜態網頁, 由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 是很是有用的。

當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。

摘自：http://www.runoob.com/cssref/css3-pr-mediaquery.html