电脑缩放布局比例的不同对静态网页正常显示的影响
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/miLogo.png" alt="">-->
<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>
<!--
<fieldset class="others">
<legend align="center">其他方式登录</legend>
</fieldset>
<svg class="icon" aria-hidden="true">
<a href="#"><use xlink:href="#icon-QQ1"></use></a>
</svg>
<svg class="icon" aria-hidden="true">
<a href="#"><use xlink:href="#icon-weibo"></use></a>
</svg>
<svg class="icon" aria-hidden="true">
<a href="#"><use xlink:href="#icon-zhifupingtai-zhifubao"></use></a>
</svg>
<svg class="icon" aria-hidden="true">
<a href="#"><use xlink:href="#icon-weixin"></use></a>
</svg>
-->
</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/guoHui.png" alt="">-->
<img src="//images.cnblogs.com/cnblogs_com/TomHe789/1790616/o_200619233311guoHui.png" alt="">
京ICP证110507号
</p>
</div>
</body>
</html>
这是正常显示的截图
这是显示有问题的截图
-------------------------分割线-------------------------
现在好像确定了 是电脑缩放布局 不同的原因！
我的电脑上设置的是100%的缩放布局：
显示的有问题的电脑设置的则是125%的缩放布局：
但是有啥办法可以使网页在不同的缩放布局下都可以正常显示的解决办法吗？
所有回答(3)
0
浏览器兼容性问题。
IE chrome Firefox每一个浏览器我都试过了 不是浏览器兼容性问题
@陈太浪: 首先，代码一样的，而且你使用的是内联样式，在单个html文件，又没有引入样式或js文件，直接排除代码问题。
接着就去找浏览器兼容性，运行环境上找问题，逐个排查。
主要是这个分析过程，可以总结一下
@独行侠X: 这个问题我已经补充了，已经确定了是电脑缩放布局不同所导致的，但是不知道如何解决！
@陈太浪: 系统缩放比例问题，可以写css样式定义宽度时实用百分比模式。这样是一种解决方案
最好使用相对布局，会灵活一点
0
解决方法其实也很简单，你把你的电脑按照这样调，然后看页面效果。
这东西就是个粗话，也是个细活，需要的是耐心和时间。这就是天朝人力资源丰富的好处了。
你说的是啥？可以说具体一点吗？具体调啥？
我现在的问题是想知道如何使这个网页在不同的缩放布局下，最终的显示效果却是一样的。
@陈太浪: 把你的电脑调成125%缩放。
然后再调CSS，你就会发现你是做不到或者很难做到不同布局缩放情况下完全一致的显示效果。
但可以做到不让浏览者大倒胃口的显示效果。
因为文字大小会跟着变化。
而如果你想保证基本一致，那只能先调整缩放到最大，比如175%（万一有人就是喜欢175呢）
然后做设计，做完，调成150,修改设计，好了，调成125，再修改设计。
最后网站就是非死不可和推他那傻大粗的模样了。
或者更具体的说，就是我也没啥好方法，这事情比做一个网站可能都麻烦。
@爱编程的大叔: 你的意思是说：我可以通过你提供的这种方法来更改网页的CSS代码，从而使网页在不同的缩放情况下，虽然也一些差别，但显示的却并不是那么的突兀。是这个意思吗？
0
