前端开发-基于@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

获取更多信息

安防流媒体互联直播-QQ交流群：615081503

国标GB28181无插件LiveGBS-QQ交流群：947137753

WEB：www.liveqing.com:8080