我正在尝试创建一个基本的响应式 404 html 页面。但是,每当我更改屏幕尺寸(或使用移动设备)时,文本就会重叠。 如果这个问题问得不太好,我深表歉意;我还在努力学习。
这是我的代码,我还附上了问题的图片。
#holder {
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#div2 {
width: 50px;
height: 30px;
color: #54b1c8;
font-size: 160%;
position: fixed;
top: 44%;
left: 38.5%;
font-family: 'exo2';
-ms-transform: rotate(-66deg);
/* IE 9 */
-webkit-transform: rotate(-66deg);
/* Chrome, Safari, Opera */
transform: rotate(-66deg);
}
#huge {
position: fixed;
top: 39%;
left: 40%;
color: #54b1c8;
font-family: 'exo2';
font-size: 960%;
}
#h2 {
position: fixed;
top: 57%;
left: 40%;
font-family: 'exo2';
font-size: 360%;
}
<div id="holder">
<div id="div2">Error</div>
<div id="huge">404</div>
<div id="h2">Not Found</div>
</div>
最佳答案
您可以通过多种不同的方式来解决这个问题。
一个好的起点是使用媒体屏幕查询。 您可以查找屏幕尺寸表来了解尺寸差异。
在你的CSS代码中,你可以调用特定的媒体查询来为不同的屏幕尺寸显示不同的CSS。
@media only screen and (min-width : 1px) and (max-width : 400px) {
#div {some:css;}
}
@media only screen and (min-width : 401px) and (max-width : 800px) {
#div {some-different:css;}
}
更好的选择是学习如何使用 bootstrap - 一个易于使用的响应式框架。
关于html - 将 div 元素聚集在一起并使其响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32310755/