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

我设计的页面在浏览器中放大时，像“带有标题”的框一样放在用户的框中。用户图像从盒子里出来等等。浏览器放大更改页面结果和顺序，CSS和HTML

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

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

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

Html, body { 
 
\t margin:0; 
 
} 
 
div { 
 
\t display:block; 
 
} 
 
#Header{ 
 
    padding-top:10px; 
 
    padding-bottom:5px; 
 
    padding-left:10px; 
 
    padding-right:10px; 
 
    margin:0 0 1.5% 0; 
 
    height:25px; 
 
    background-color:#333; 
 
} 
 
#User_Aside{ 
 
\t margin: 40px 65px 2px; 
 
\t float:left; 
 
\t width:20%; 
 
\t padding-bottom:10px; 
 
\t border: 1px solid #9799a7; 
 
} 
 
.Article{ 
 
\t margin: 2px 65px 2px 0px; 
 
\t float:left; 
 
\t width:35%; 
 
\t background-color:#FF9; 
 
} 
 
#Right_Aside{ 
 
\t margin: 2px 65px 2px 0px; 
 
\t float:left; 
 
\t width: 20%; 
 
\t background-color:#FF9; 
 
} 
 

 
#Footer { 
 
    clear: both; 
 
    margin-bottom: 0; 
 
} 
 

 
h1 { 
 
\t padding:5px 0 5px; 
 
\t font-size:15px; 
 
\t font-weight:bold; 
 
\t text-align:center; 
 
} 
 
div.image_user { 
 
    content:url(http://placehold.it/200x200); 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
\t background: #eaeaed; 
 
    border: 1px solid #9799a7; 
 
\t padding: 4px; 
 
} 
 
p{ 
 
\t font-size:12px; 
 
\t font-weight:bold; 
 
\t text-align:center; 
 
\t padding: 20px 30px 10px; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
<link href="Untitled-2.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
<div Id="Container"> <!-- Start Of Container --> 
 
<div class="wrap"> 
 
    <div Id="Header"> Notification Bar </div> 
 
    
 
    <div Id="User_Aside"> 
 
    <div class="User_Name"> 
 
    <h1> User's Name </h1> 
 
    </div> 
 
    <div class="image_user"></div> 
 
    <div Id="User_info"> 
 
    <p> Test Test Test Test test Test Test 
 
    Test Test Test Test test Test Test 
 
    Test Test Test Test test Test Test 
 
    Test Test Test Test test Test Test 
 
    Test Test Test Test test Test Test 
 
    Test Test Test Test test Test Test</p> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="Article"> 
 
    <h2 class="Title"> The Title </h2> 
 
    
 
    </div> 
 
    
 
    <div Id="Right_Aside"> Left</div> 
 
    <div Id="Footer"> Footer</div> 
 
    </div> 
 
    </div> <!-- End Of Container --> 
 

 
    
 
</body> 
 
</html>

来源

2015-03-13 Lan

“缩放压扁”一直是浏览器和自适应网页设计的主要问题。我在铬上，你的外观很好，最多3个变焦。 Chris Coyier对此进行了很好的研究，因为当人们放大阅读网站时，允许水平滚动而不是缩小内容几乎是更好的选择。

有一个zoom属性，您可以在CSS中使用不同的媒体查询，这可以帮助您保持所有内容相对相同。

首先要检查的肯定是这个CSS-Tricks文章。克里斯谈论这个确切的问题，并有一个相对普遍的方式来对抗浏览器的缩放。

他的修复程序的基本思想是使用em's而不是px或%来定义大小。由于em基于页面上1'M'的大小，因此在缩放时，'M'将更改大小，从而更改所有尺寸的em's。

来源

2015-03-13 12:28:58

谢谢你，读起来很有趣。以为我能够通过编写下面的代码来解决这个问题：body，html {min-width：1200px;}。再次感谢 – Lan 2015-04-10 14:44:53

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

回答

相关问题