本文共 1150 字，大约阅读时间需要 3 分钟。

前端静态网页, 由UI出带标尺的效果图, 和切图资源, 将其实现成最终的网页呈现给用户.

之所以有这篇博文, 是因为UI设计的效果图原始宽度是 1920px, 其中的标注尺寸也是以这个宽度为基础的.

想到 [显示设置] 里面有一项 [缩放与布局], 系统默认给我的设置的是 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 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

摘自：

获取更多信息

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

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

WEB：

转载地址：https://liveqing.blog.csdn.net/article/details/88862559 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！