问当浏览器尺寸改变时，如何使网站改变其图像/文本的布局？
EN

Stack Overflow用户

提问于 2015-02-17 03:20:37

回答 1查看 135关注 0票数 0

我一直在尝试开发自己的网站，遇到了一个问题；当我调整浏览器的大小时，我的网站看起来就不一样了。每样东西都调整大小，移动自己，这样每件事都是互相重叠的。我希望我的网站像这样运行：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>

如何优化此代码以使其重新定位以适应移动和网络的浏览器？谢谢你。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-02-17 03:36:04

你想要的是响应的网页设计。，你需要改变你的CSS (和jS)，以便他们可以改变你的网站的布局，根据它正在被观看的媒体。下面是一些关于进行响应性设计的技巧：

设置视口。这样做是为了使CSS像素与设备独立像素的数量相匹配。允许页面再流内容以匹配不同的屏幕大小，无论是在小型手机上呈现还是在大型桌面监视器上呈现。就像这样：
不要使用绝对。使用绝对定位可能会破坏页面的外观，当可用空间略小于您所开发的内容时，会使内容从视图中流出。尝试使用相对定位，使页面上的元素重新流动，并根据视口大小的变化进行调整。
使用CSS3媒体查询。您可以使用这些查询将条件放在页面布局方式上，具体取决于正在查看的媒体类型。例如： @媒体屏幕和(最大宽度:300 max){ /*The CSS，当最大宽度为300 max*/} 阅读更多这里。
使网站优雅地降级，或逐步增强。这两个设计理念都强调，您的网站不应严重依赖新技术或可选技术来布局您的网页。您不应该使用jS来调整视图的大小。相反，使用CSS。该网站应该在没有新技术或禁用新技术的平台上很好地显示。
跨平台一致性。使用normalize.css或mordernizr.js的可以使网站跨平台更一致地显示，让它们一致地显示本机元素并使用特征检测。

看看这个文章。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28554089

复制

相似问题

问当浏览器尺寸改变时，如何使网站改变其图像/文本的布局？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当浏览器尺寸改变时，如何使网站改变其图像/文本的布局？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当浏览器尺寸改变时，如何使网站改变其图像/文本的布局？
EN