Question

我正在尝试创建一个响应式的基本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>

Answer 1

你可以通过多种不同方式解决这个问题。

一个好的起点是使用媒体屏幕查询。您可以查找屏幕尺寸图表来获取尺寸。

在您的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 - 一个易于使用的响应式框架。

Answer 2

你可以这样使用

#holder {
        width: 100%;
        position: absolute;
        height: 100%;
        z-index: 999999;
    }

        #holder .test {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 250px;
            margin-left: -125px;
            height: 150px;
            margin-top: -75px;
        }

        #holder #div2 {
            color: #54b1c8;
            font-family: "exo2";
            font-size: 160%;
            height: 30px;
            margin-bottom: -70px;
            margin-left: -30px;
            width: 50px;
            -ms-transform: rotate(-66deg); /* IE 9 */
            -webkit-transform: rotate(-66deg); /* Chrome, Safari, Opera */
            transform: rotate(-66deg);
        }

        #holder #huge {
            color: #54b1c8;
            font-family: "exo2";
            font-size: 960%;
            margin-bottom: -20px;
        }

        #holder #h2 {
            font-family: 'exo2';
            font-size: 360%;
        }

和HTML

<div id="holder">
    <div class="test">
        <div id="div2">Error</div>
        <div id="huge">404</div>
        <div id="h2">Not Found</div>
    </div>
</div>

Answer 3

试试这个：

给你巨大的

@interface CustomWindow : NSWindow
@end

@implementation CustomWindow

+ (NSButton *)standardWindowButton:(NSWindowButton)b forStyleMask:(NSUInteger)styleMask
{
  NSButton *button = [super standardWindowButton:b forStyleMask:styleMask];
  if (b == NSWindowZoomButton) {
    button.hidden = YES;
  }
  return button;
}

和你的#div2

margin-top: -115px;

原因是，这可以帮助您404完全位于页面的中心。

Answer 4

你可以试试这个。最小宽度#holder设置为320px;适用于小型设备。

<style> 
#holder {
left:0;
position:relative;
max-width: 18%;
min-width:320px;
margin:90px auto;
transform:translate(0%,90%);
text-align:center
}
#div2 {
width: 50px;
height: 30px;
color: #54b1c8;
font-size: 160%;
position:absolute;
top: 40; 
left: 20;

font-family: 'exo2';
-ms-transform: rotate(-66deg); /* IE 9 */
-webkit-transform: rotate(-66deg); /* Chrome, Safari, Opera */
transform: rotate(-66deg);
}
#huge {     
top: 1%;
left: 40%;
color: #54b1c8;
font-family: 'exo2';
font-size: 960%;
 }
#h2 {
padding:0px;
margin:0px;
position:absolute;
bottom:-25;
left:35;
font-family: 'exo2';
font-size: 360%;
}
</style>

  <div id="holder">
    <div id="div2">Error</div>
    <div id="huge">404</div>
    <div id="h2">Not Found</div>
  </div>

将div元素聚类在一起并使其响应

4 个答案: