0

我对网页设计比较陌生，但据我了解，em 应该可以缩放到任何屏幕尺寸。除了一些琐碎的边框外，我将所有东西都定义为 em 或 %，但是，当我尝试在不同的屏幕上查看它时，没有 div 或它们的内容缩放。

我究竟做错了什么？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Name</title>
<link rel="stylesheet" href="css/style2.css" type="text/css">
</head>
<body>
<div id="Center">
    <div id="home1">
        <img src="WelcomeScreen.jpg" alt="Welcome!"/> 
    </div>
</div>

<div id="Left">
    <div class="button1" id="a1">
    </div>
    <div class="button1" id="a2"></div>
    <div class="button1" id="a3"></div>
</div>

<div id="Right">
    <div class="button1" id="a4"></div>
    <div class="button1" id="a5"></div>
    <div class="button1" id="a6"></div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

div{
display: inline-block;
}

div img{
height: auto;
width: 100%;
border: 3px solid black;
border-radius: 2em;
}

#home1{
position: relative;
border: 1px solid black;
border-radius: 2em;
margin-top: 4em;
left: 50%;
margin-left: -25em;
width: 50em;
height: 37.5em;
box-shadow: 0em 0em 5em 2em #000000;
}

.button1{
height: 10em;
width: 15em;
border: 1px solid black;
border-radius: 1em;
}

#a1{
position: relative;
margin-top: 1em;
margin-left: 1em;
}
#a2{
position: relative;
margin-top: 6em;
margin-left: 1em;
}
#a3{
position: relative;
margin-top: 6em;
margin-left: 1em;
}

#a4{
position: relative;
margin-top: 1em;
margin-right: 2em;
}

#a5{
position: relative;
margin-top: 6em;
margin-right: 2em;
}
#a6{
position: relative;
margin-top: 6em;
margin-right: 2em;
}


#Center{
height: 50em;
width: 60em;
padding: 0.8em;
border: 1px solid black;
left: 50%;
}

#Left{
float: left;
height: 50em;
width: 16em;
padding: 1em;
border: 1px solid black;
}

#Right{
align-content: center;
float: right;
height: 50em;
width: 16em;
padding: 1em;
border: 1px solid black;
}
4

2 回答 2

0

Em 是单位，意思是“默认浏览器的字体大小”。

你应该做的是：

  1. 阅读 CSS 媒体查询和响应式断点
  2. html { font-size: X px }每个断点分别使用
  3. 使用 rems 而不是 ems。（Rem 是“给定页面的默认字体大小”，以及您在步骤 2 中设置的默认大小。）

希望这可以帮助。

于 2014-06-04T12:02:13.140 回答
0

正如 Gaby 在评论中提到的，ems 只是相对于字体大小，它们不会缩放以适应浏览器宽度。它们仍然可以很好地用于字体大小调整，因为当用户最终增大字体大小时，内容不太可能中断，因为它不是以像素为单位定义的。

但是，如果您希望元素缩放，您应该使用百分比，即width: 50%而不是width: 50em. 这样，元素将始终是父元素宽度的 50%。请注意，您还需要为父元素提供百分比宽度，以查看实际的缩放

如果您想更好地控制不同尺寸的布局，您应该研究媒体查询。那里有很多帖子，但这应该可以帮助您入门。http://css-tricks.com/css-media-queries/

于 2014-06-04T12:12:04.007 回答