Question

我对网页设计比较陌生，但据我了解，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;
}

Answer 1

Em是单位含义＆＃34;默认浏览器的字体大小＆＃34;。

你应该做的是：

了解CSS媒体查询和响应断点
分别对每个断点使用html { font-size: X px }
使用rems而不是ems。（Rem是＆＃34;给定页面的默认字体大小＆＃34;，以及您在步骤2中设置的默认大小。）

希望这有帮助。

Answer 2

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

但是，如果您想要缩放元素，则应使用百分比，即width: 50%而不是width: 50em。这样，元素将始终是父宽度的50％。 请注意，您还需要为父元素提供百分比宽度，以便查看操作中的缩放

如果您希望以不同的尺寸更好地控制布局，则应该查看媒体查询。那里有很多帖子，但这应该让你开始。 http://css-tricks.com/css-media-queries/

即使使用“em”，内容也不会缩放到各种屏幕尺寸

2 个答案: