Html 内容不能扩展到各种屏幕大小，即使使用；em"；s_Html_Css_Scale_Em_Sizing

Html 内容不能扩展到各种屏幕大小，即使使用；em"；s

html css

Html 内容不能扩展到各种屏幕大小，即使使用；em"；s,html,css,scale,em,sizing,Html,Css,Scale,Em,Sizing,我对网页设计比较陌生，但据我所知，em应该可以扩展到任何屏幕大小。我把所有东西都定义为em或%，除了一些无关紧要的边框，然而，当我试图在不同的屏幕上查看它时，没有div或它们的内容比例我做错了什么 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Name</title> <link rel="stylesheet" href="css/style

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


名称
@字符集“utf-8”；
/*CSS文档*/
div{
显示：内联块；
}
部门经理{
高度：自动；
宽度：100%；
边框：3倍纯黑；
边界半径：2米；
}
#家庭1{
位置：相对位置；
边框：1px纯黑；
边界半径：2米；
边缘顶端：4em；
左：50%；
左边距：-25em；
宽度：50em；
身高：37.5公分；
盒影：0em 0em 5em 2em#000000；
}
.按钮1{
高度：10公分；
宽度：15em；
边框：1px纯黑；
边界半径：1米；
}
#a1{
位置：相对位置；
边缘顶部：1米；
左边距：1米；
}
#a2{
位置：相对位置；
边缘顶端：6em；
左边距：1米；
}
#a3{
位置：相对位置；
边缘顶端：6em；
左边距：1米；
}
#a4{
位置：相对位置；
边缘顶部：1米；
右边距：2米；
}
#a5{
位置：相对位置；
边缘顶端：6em；
右边距：2米；
}
#a6{
位置：相对位置；
边缘顶端：6em；
右边距：2米；
}
#居中{
高度：50em；
宽度：60em；
填充：0.8em；
边框：1px纯黑；
左：50%；
}
#左{
浮动：左；
高度：50em；
宽度：16em；
填充：1em；
边框：1px纯黑；
}
#对{
对齐内容：居中对齐；
浮动：对；
高度：50em；
宽度：16em；
填充：1em；
边框：1px纯黑；
}

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

你应该做的是：

了解CSS媒体查询和响应断点

对每个断点分别使用

html{font-size:X px}

使用rems而不是ems。（Rem是“给定页面的默认字体大小”，以及您在步骤2中设置的默认大小。）

希望这能有所帮助。

正如Gaby在评论中提到的，ems只是与字体大小有关，它们无法根据浏览器的宽度进行缩放。它们仍然很适合用于字体大小调整，因为当用户将字体大小调大时，内容不太可能中断，因为它不是以像素为单位定义的

但是，如果要缩放元素，则应使用百分比，即

width:50%

，而不是

width:50em

。这样，元素将始终为父元素宽度的50%。请注意，您还需要为父元素指定一个以百分比表示的宽度，以查看缩放效果

如果您想对不同大小的布局有更多的控制，您应该查看媒体查询。有很多帖子，但这应该让你开始

em

与字体大小有关，而不是与屏幕大小有关。。