浏览器放大更改页面结果和顺序、CSS&；HTML

我设计的页面，当在浏览器中放大时，像带有“标题”的框一样的框放在用户框下。用户图像会从盒子里拿出来，等等

我已经寻找了一段时间的答案，但我可能没有很好地理解它，或者我写的一些代码阻止了它的工作。提供的一些答案建议确定px中的宽度和高度，这可能会解决问题，但对于更大的屏幕，此解决方案可能看起来很小。如果我写的尺寸很小，则它只适用于我的屏幕。事实恰恰相反

请解释，最好提供代码，以便我能更好地理解

请注意，在Chrome中，如果100%缩放，它会显示我想要的结果

Html，正文{
保证金：0；
}
div{
显示：块；
}
#标题{
填充顶部：10px；
垫底：5px；
左侧填充：10px；
右边填充：10px；
利润率：0.1.5%0；
高度：25px；
背景色：#333；
}
#把用户放在一边{
利润率：40px 65px 2px；
浮动：左；
宽度：20%；
垫底：10px；
边框：1px实心#9799a7；
}
.文章{
保证金：2px65px 2px0px；
浮动：左；
宽度：35%；
背景色：#FF9；
}
#放在一边{
保证金：2px65px 2px0px；
浮动：左；
宽度：20%；
背景色：#FF9；
}
#页脚{
明确：两者皆有；
页边距底部：0；
}
h1{
填充：5px 0 5px；
字体大小：15px；
字体大小：粗体；
文本对齐：居中；
}
div.image\u用户{
内容：网址(http://placehold.it/200x200);
左边距：自动；
右边距：自动；
背景：#eaed；
边框：1px实心#9799a7；
填充：4px；
}
p{
字体大小：12px；
字体大小：粗体；
文本对齐：居中；
填充：20px 30px 10px；
}

无标题文件
通知栏
用户名
测试测试
测试测试
测试测试
测试测试
测试测试
测试测试

标题
左边
页脚

浏览器和快速响应的web设计始终关注“缩放挤压”。我使用的是chrome浏览器，你的浏览器最多可以放大3倍。克里斯·科伊尔（Chris Coyier）对此进行了深入研究，因为当人们放大阅读网站时，最好允许水平滚动，而不是挤压你的内容

CSS中有一个属性

zoom

可以用于不同的媒体查询，这可以帮助您保持所有内容的外观相对相同

首先要检查的肯定是这篇文章。Chris谈到了这个确切的问题，并且有一个相对通用的方法来解决浏览器缩放问题

---

他的解决方案的基本思想是使用

em的

而不是

px

或

%

来定义尺寸。由于

em

是基于页面上1'M'的大小，当你缩放时，该'M'将改变大小，从而改变你的

em的所有大小。
谢谢你，读起来很有趣。我想我可以通过编写以下代码来解决这个问题：body，html{minwidth:1200px；}。再次感谢