电脑缩放布局比例的不同对静态网页正常显示的影响

时间: 2020-06-20来源：博客园

前景提要

电脑缩放布局比例的不同对静态网页正常显示的影响
0 悬赏园豆： 10 [待解决问题] 做了一张静态网页，在我的电脑上所有的浏览器都显示正常
但是在别的电脑上，所有的浏览器却显示的有问题
浏览器的缓存数据也都清理过，还是不起作用
-------------------------分割线-------------------------
实验源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } html,body{ width: 1920px; overflow: hidden; } .top{ width: 1130px; margin: 0 auto; } .center{ width: 100%; height: 588px; /*background: url("images/bg.jpg") no-repeat top center;*/ background: url("https://images.cnblogs.com/cnblogs_com/TomHe789/1790616/o_200619233302bg.jpg") no-repeat top center; position: relative; } .center>.mainBox{ width: 410px; height: 556px; position: absolute; top: 50px; left: 1110px; background-color: white; } .mainBox>.box-top{ width: 410px; height: 82px; text-align: center; padding-top: 20px; box-sizing: border-box; } .box-top>a{ text-decoration: none; font-size: 24px; color: #666; } .box-top>a:hover{ color: #f56600; } .box-top>span{ height: 30px; display: inline-block; border: 1px solid rgb(224,224,224); margin: -7px 30px; } .box-bottom{ padding-left: 30px; box-sizing: border-box; } .box-bottom>input{ width: 346px; height: 48px; margin: 10px auto; padding: 13px 16px 13px 14px; box-sizing: border-box; outline: none; border: 1px solid rgb(224,224,224); } input[type="button"]{ width: 346px; height: 48px; background-color: #ff6700; color: #fff; border: 0; } input[type="button"]:hover{ cursor: pointer; } .box-bottom>.inf{ width: 346px; } .inf>.inf-left{ float: left; } .inf-left>a{ color: #ff6700!important; } .inf>.inf-right{ float: right; color: #999; margin: 0 5px; } .inf a{ text-decoration: none; font-size: 14px; color: #999; } .box-bottom>.others{ width: 348px; height: 29px; font-size: 12px; color: #ccc; border-color: rgba(224,224,224,0.4); border-left: 0; border-right: 0; border-bottom: 0; margin-top: 140px; } svg{ font-size: 30px; margin-left: 20px; } svg:nth-of-type(1){ margin-left: 100px; } .footer{ width: 100%; margin-top: 100px; text-align: center; } .footer>span>a{ font-size: 13px; color: #757575; text-decoration: none; } .footer>span{ margin-left: 10px; color: #757575; cursor: pointer; } .footer>span:nth-of-type(1)>a{ color: #333; } .footer>p{ font-size: 13px; color: #757575; margin-top: 20px; } </style> <script src="font/iconfont.js"></script> </head> <body> <div class="top"> <a href="https://www.mi.com/index.html">  <img src="//images.cnblogs.com/cnblogs_com/TomHe789/1790616/o_200619233319miLogo.png" alt=""> </a> </div> <div class="center"> <div class="mainBox"> <div class="box-top"> <a href="#" style="color: #f56600;">帐号登录</a> <span></span> <a href="#">扫码登录</a> </div> <div class="box-bottom"> <input type="text" placeholder="邮箱/手机号码/小米ID"> <input type="text" placeholder="密码"> <input type="button" value="登录"> <div class="inf"> <span class="inf-left"><a href="#">手机短信登录/注册</a></span> <span class="inf-right"><a href="#">立即注册</a></span> <span class="inf-right">|</span> <span class="inf-right"><a href="#">忘记密码?</a></span> </div>  </div> </div> </div> <div class="footer"> <span><a href="#">简体</a></span> <span>|</span> <span><a href="#">繁体</a></span> <span>|</span> <span><a href="#">English</a></span> <span>|</span> <span><a href="#">常见问题</a></span> <span>|</span> <span><a href="#">隐私政策</a></span> <p>小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-  <img src="//images.cnblogs.com/cnblogs_com/TomHe789/1790616/o_200619233311guoHui.png" alt=""> 京ICP证110507号 </p> </div> </body> </html> 这是正常显示的截图
这是显示有问题的截图

-------------------------分割线-------------------------
现在好像确定了是电脑缩放布局不同的原因！
我的电脑上设置的是100%的缩放布局：

显示的有问题的电脑设置的则是125%的缩放布局：

但是有啥办法可以使网页在不同的缩放布局下都可以正常显示的解决办法吗？ HTML CSS 陈太浪 | 初学一级 | 园豆： 138
提问于：2020-06-20 07:45 显示帮助
使用"Ctrl+Enter"可进行快捷提交，评论支持部分 Markdown 语法：[link](http://example.com) _italic_ **bold** `code`。
< > 分享
分享您的问题
所有回答(3) 0 浏览器兼容性问题。独行侠X | 园豆：202 (菜鸟二级) | 2020-06-20 07:50 IE chrome Firefox每一个浏览器我都试过了不是浏览器兼容性问题支持( 0 ) 反对( 0 ) 陈太浪 | 园豆：138 (初学一级) | 2020-06-20 07:52 @陈太浪: 首先，代码一样的，而且你使用的是内联样式，在单个html文件，又没有引入样式或js文件，直接排除代码问题。
接着就去找浏览器兼容性，运行环境上找问题，逐个排查。
主要是这个分析过程，可以总结一下支持( 0 ) 反对( 0 ) 独行侠X | 园豆：202 (菜鸟二级) | 2020-06-20 08:27 @独行侠X: 这个问题我已经补充了，已经确定了是电脑缩放布局不同所导致的，但是不知道如何解决！支持( 0 ) 反对( 0 ) 陈太浪 | 园豆：138 (初学一级) | 2020-06-20 08:29 @陈太浪: 系统缩放比例问题，可以写css样式定义宽度时实用百分比模式。这样是一种解决方案支持( 0 ) 反对( 0 ) 独行侠X | 园豆：202 (菜鸟二级) | 2020-06-20 08:33 最好使用相对布局，会灵活一点支持( 0 ) 反对( 0 ) 独行侠X | 园豆：202 (菜鸟二级) | 2020-06-20 08:36 编辑文本预览上传图片
Ctrl+Enter键快速提交 0 解决方法其实也很简单，你把你的电脑按照这样调，然后看页面效果。
这东西就是个粗话，也是个细活，需要的是耐心和时间。这就是天朝人力资源丰富的好处了。爱编程的大叔 | 园豆：30664 (高人七级) | 2020-06-20 10:50 你说的是啥？可以说具体一点吗？具体调啥？
我现在的问题是想知道如何使这个网页在不同的缩放布局下，最终的显示效果却是一样的。
支持( 0 ) 反对( 0 ) 陈太浪 | 园豆：138 (初学一级) | 2020-06-20 12:20 @陈太浪: 把你的电脑调成125%缩放。
然后再调CSS，你就会发现你是做不到或者很难做到不同布局缩放情况下完全一致的显示效果。
但可以做到不让浏览者大倒胃口的显示效果。
因为文字大小会跟着变化。
而如果你想保证基本一致，那只能先调整缩放到最大，比如175%（万一有人就是喜欢175呢）
然后做设计，做完，调成150,修改设计，好了，调成125，再修改设计。
最后网站就是非死不可和推他那傻大粗的模样了。
或者更具体的说，就是我也没啥好方法，这事情比做一个网站可能都麻烦。支持( 0 ) 反对( 0 ) 爱编程的大叔 | 园豆：30664 (高人七级) | 2020-06-20 22:07 @爱编程的大叔: 你的意思是说：我可以通过你提供的这种方法来更改网页的CSS代码，从而使网页在不同的缩放情况下，虽然也一些差别，但显示的却并不是那么的突兀。是这个意思吗？支持( 0 ) 反对( 0 ) 陈太浪 | 园豆：138 (初学一级) | 2020-06-20 22:16 编辑文本预览上传图片
Ctrl+Enter键快速提交 0 检测浏览的缩放比，根据缩放比动态调整墨竹丶蝉翼 | 园豆：221 (菜鸟二级) | 2020-06-22 11:53 媒体查询？支持( 0 ) 反对( 0 ) 陈太浪 | 园豆：138 (初学一级) | 2020-06-27 19:00 @陈太浪: https://m.jb51.net/article/55753.htm 支持( 0 ) 反对( 0 ) 墨竹丶蝉翼 | 园豆：221 (菜鸟二级) | 2020-06-27 20:44 编辑文本预览上传图片
Ctrl+Enter键快速提交
清除回答草稿
您需要登录以后才能回答，未注册用户请先注册。

科技资讯:

科技学院:

科技百科:

科技书籍:

网站大全:

软件大全:

更多数据

热门排行

咨询电话（周一至周五9：00-18：00）