我正在尝试使用 CSS 媒体查询和相对宽度/高度值(以 % 表示)的响应式布局。在我从浏览器放大之前，所有屏幕宽度都可以正常工作。当我放大时，只有字体大小增加，而 div 容器的高度/宽度保持不变。这“破坏”了我的设计。有什么解决办法吗？
html:-
<html>
<head>
<link href="style.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<div id="banner" style="background-color:Black; width:100%; height:15%">
<div style="margin-left:10%; width:20%; float:left"> <img id="logo" src="b.jpg" />
</div>
<div id="title" style=" float: right; color:White"> Ganju and his activities</div>
</div>
<div id="dir_cont" style="margin:auto;">
<img id="dir" src="a.jpg" /> <span id="dir_a">We like to introduce ourselves as
a........*some text*
</span>
</div>
</body>
</html>
和 css 文件:-
#dir_cont
{
width: 80%;
}
#dir
{
width:30%;
float:left;
}
#dir_a
{
width:70%;
float:left;
}
#logo
{
height:100%;
}
#title
{
margin-right:10%;
}
@media all and (max-width:450px){
#title
{
font-size:3vw;
margin-right:0%;
}
#dir_cont{width:100%}
#dir{width:100%;
float:none;
}
#dir_a
{
width:100%;
float:none;
}
最佳答案
百分比大小取自父容器。如果 parent 有一个固定的大小(例如 px)，那么你总是会得到一个固定的大小。查看http://css-tricks.com/css-font-size/
关于html - 为什么在浏览器中缩放时只有字体大小增加？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24968259/