当浏览器尺寸发生变化时，如何让网站更改图像/文本的布局？

时间：2015-02-17 03:20:38

标签： html css

我一直在努力开发自己的网站并遇到问题;当我重新调整浏览器大小时，我的网站看起来不一样。一切都调整大小并自行移动，以便一切都相互重叠。我希望我的网站像这个网站一样运作：http://teixido.co/

这是我的网站：http://www.coopertimewell.com/

这是html和css的所有源代码：

@charset "utf-8";
 body {
  background-color: #DDDCDC;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}
#anime {
  position: absolute;
  width: 38.3%;
  height: 100%;
  left: .5%;
  top: 1.25%;
}
#ct {
  position: absolute;
  width: 60%;
  left: 36%;
  top: 59%;
}
#official {
  position: absolute;
  width: 40%;
  left: 55%;
  top: 72%;
}
#home {
  position: absolute;
  left: 55.75%;
  top: 3.5%;
  width: 5.8%;
}
#home2 {
  position: absolute;
  left: 55.75%;
  top: 3.5%;
  width: 5.8%;
  z-index: -1;
}
#thecoopertimes {
  position: absolute;
  left: 62%;
  top: 3.5%;
  width: 12.5%;
}
#thecoopertimes2 {
  position: absolute;
  left: 62%;
  top: 3.5%;
  width: 12.5%;
  z-index: -1;
}
#aboutme {
  position: absolute;
  left: 75%;
  top: 3.5%;
  width: 8%;
}
#aboutme2 {
  position: absolute;
  left: 75%;
  top: 3.5%;
  width: 8%;
  z-index: -1;
}
#contact {
  position: absolute;
  left: 83.5%;
  top: 3.5%;
  width: 6.8%;
}
#contact2 {
  position: absolute;
  left: 83.5%;
  top: 3.5%;
  width: 6.8%;
  z-index: -1;
}
#games {
  position: absolute;
  left: 90.72%;
  top: 3.5%;
  width: 6.1%;
}
#games2 {
  position: absolute;
  left: 90.72%;
  top: 3.5%;
  width: 6.1%;
  z-index: -1;
}
#home:hover {
  z-index: -9999999;
}
#home2:hover {
  z-index: 9999999;
}
#thecoopertimes:hover {
  z-index: -9999999;
}
#thecoopertimes2:hover {
  z-index: 9999999;
}
#aboutme:hover {
  z-index: -9999999;
}
#aboutme2:hover {
  z-index: 9999999;
}
#contact:hover {
  z-index: -9999999;
}
#contact2:hover {
  z-index: 9999999;
}
#games:hover {
  z-index: -9999999;
}
#games2:hover {
  z-index: 9999999;
}
#fb {
  position: absolute;
  top: 84%;
  left: 78%;
  width: 6%;
}
#insta {
  position: absolute;
  top: 84.25%;
  left: 83.5%;
  width: 6%;
}
#youtube {
  position: absolute;
  top: 84%;
  left: 89%;
  width: 6%;
}
#fb:hover {
  width: 6.5%;
  top: 83.5%;
  left: 77.7%;
}
#insta:hover {
  width: 6.5%;
  top: 83.9%;
  left: 83.2%;
}
#youtube:hover {
  width: 6.5%;
  top: 83.8%;
  left: 88.7%;
}
#text {
  position: absolute;
  width: 30%;
  left: 65%;
  top: 76%;
}
#bs2 {
  position: absolute;
  top: 40%;
}
#pic {
  position: absolute;
  top: 300%;
  width: 25%;
  height: 55%;
}
#down {
  position: absolute;
  top: 88%;
  left: 50%;
  width: 5%;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home - CooperTimewell.com</title>
  <link href="coopertimewell/anime.ico" rel="icon" type="image/x-icon" />
  <script type="text/javascript">
    if (screen.width < 800) {
      window.location = "mobile.html"
    }
  </script>
  <meta name="description" content="This is just a website about me, and some stuff I'm interested in." />
</head>
<link href="indexstylesheet.css" rel="stylesheet" type="text/css" />

<body>
  <img id="anime" src="coopertimewell/jumper1.png" />
  <a href="http://www.coopertimewell.com">
    <img id="ct" src="coopertimewell/ct2.png" />
  </a>
  <img id="official" src="coopertimewell/official.png" />
  <div id="allbuttons">
    <div id="firstlot">
      <a href="http://www.coopertimewell.com/index">
        <img id="home" src="coopertimewell/buttons/home1.png" />
      </a>
      <a href="http://www.coopertimewell.com/thecoopertimes.html">
        <img id="thecoopertimes" src="coopertimewell/buttons/coopertimes1.png" />
      </a>
      <a href="http://www.coopertimewell.com/aboutme.html">
        <img id="aboutme" src="coopertimewell/buttons/aboutme1.png" />
      </a>
      <a href="http://www.coopertimewell.com/contact.html">
        <img id="contact" src="coopertimewell/buttons/contact1.png" />
      </a>
      <a href="http://www.coopertimewell.com/games">
        <img id="games" src="coopertimewell/buttons/games1.png" />
      </a>
    </div>
    <div id="secondlot">
      <a href="http://www.coopertimewell.com">
        <img id="home2" src="coopertimewell/buttons/home22.png" />
      </a>
      <a href="http://www.coopertimewell.com/thecoopertimes.html">
        <img id="thecoopertimes2" src="coopertimewell/buttons/coopertimes22.png" />
      </a>
      <a href="http://www.coopertimewell.com/aboutme.html">
        <img id="aboutme2" src="coopertimewell/buttons/aboutme22.png" />
      </a>
      <a href="http://www.coopertimewell.com/contact.html">
        <img id="contact2" src="coopertimewell/buttons/contact22.png" />
      </a>
      <a href="http://www.coopertimewell.com/games">
        <img id="games2" src="coopertimewell/buttons/games2.png" />
      </a>
      <a href="http://www.facebook.com/cooper.timewell">
        <img id="fb" src="coopertimewell/fbicon.png" />
      </a>
      <a href="http://www.instagram.com/cooper_timewell">
        <img id="insta" src="coopertimewell/instaicon.png" />
      </a>
      <a href="http://www.youtube.com/user/2667cooper">
        <img id="youtube" src="coopertimewell/youtubeicon.png" />
      </a>
    </div>
  </div>
  <img id="text" src="coopertimewell/text1.png" />
  <img id="pic" src="coopertimewell/duck.gif" />
  <a href="http://www.coopertimewell.com/#pic">
    <img id="down" src="coopertimewell/downie.png" />
  </a>
</body>

</html>

如何优化此代码以使其重新定位，以便适合移动设备和网络浏览器？三江源。

1 个答案:

答案 0 :(得分：4)

您想要的是响应式网页设计。您需要更改CSS（和jS），以便他们可以根据正在查看的媒体更改网站的布局。以下是有关制作响应式设计的一些提示：

  1. 设置视口。这样做是为了使CSS像素与设备无关像素的数量匹配。这允许页面重排内容以匹配不同的屏幕尺寸，无论是在小型移动电话还是大型桌面监视器上呈现。像这样：

    <meta name="viewport" content="width=device-width, initial-scale=1">

  2. 请勿使用绝对。使用绝对定位可能会破坏页面的外观，并且当可用空间比您正在开发的空间略小时，会使内容流出视口。尝试使用相对定位，以便页面上的元素根据视口大小的变化进行重排和调整。

  3. 使用 CSS3媒体查询。您可以使用这些查询在页面布局的方式上放置条件，具体取决于正在查看的媒体类型。例如：

    @media screen and (max-width: 300px) {
  /*The CSS when the maximum width is 300px*/
}

    了解更多here.

  4. 使网站优雅地降级或逐步增强。这两个设计概念都强调您的网站不应该在很大程度上依赖于新技术或可选技术来布局您的页面。您不应该使用jS来调整视口大小。相反，使用CSS。该网站应在无法获得或禁用新技术的平台上显示可接受良好。
  5. 寻求跨平台一致性。使用normalize.css或mordernizr.js，您可以使网站在各个平台上更加一致地显示，使其始终如一地显示原生元素并使用特征检测

    6. 看看这个article。

相关问题
最新问题