Question

我正在尝试设计一个css和html网站，但我遇到了一些使其响应的问题。 http://finfeeder.x10host.com/

以下是我在移动设备和桌面设备上看起来的样子。

基本上，随着显示器变得越来越小，图片应该变得更小并且保持在相同的位置，直到它成为移动设备完全改变的特定尺寸。相反，它只是变得更小，更错位......

我知道我不知道CSS布局是如何工作的，但是W3schools对于我的愚蠢自我并没有说明问题。

<!DOCTYPE html>
<html>
<head>
<style>

div.main {
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
}

div.buttons {
    position: absolute;
    left: 330px;
    top: 550px;
    z-index: 0;   
}

</style>
</head>
<body>

<div class="main">
  <img src='https://xo2.x10hosting.com:2083/cpsess6981183432/viewer/home%2ffinfeede%2fpublic_html%2fimages/desktop_betta.jpg' style='width:100%' alt='[]' />
</div>
<div class="buttons">
<a href="http://facebook.com">
<img src='http://i.imgur.com/dhFsqcW.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://pinterest.com">
<img src='http://i.imgur.com/qatEe7q.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://instagram.com">
<img src='http://i.imgur.com/IoRiRiD.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://twitter.com">
<img src='http://i.imgur.com/eqsUM0m.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://kickstarter.com">
<img src='https://xo2.x10hosting.com:2083/cpsess6981183432/viewer/home%2ffinfeede%2fpublic_html%2fimages/kickbutton.gif' style='width:100%' alt='[]' />
</a>

</div>
</body>
</html>

请查看我的回复，了解网站应该是什么样的链接。谢谢你好心！

Answer 1

首先，div本身被指定为硬编码的绝对位置。如果将其更改为百分比，则无论屏幕有多窄，它都将保留在屏幕的同一部分。

您还可以使用max-width和min-width属性来防止元素变得太小或太大。

您还应确保将html和body的宽度和高度定义为视口的100%。这种方式和元素将继承正确的宽度和高度。

<style>

html, body {
height: 100%;
width: 100%;
}

div.main {
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
height: 30%; /* This could also be coded with a px, pt, etc */
}

div.buttons {
position: absolute;
left: 5%;
top: 5%;
width: 90%;
z-index: 0;   
}

</style>

由于html，body和div.main都是视口宽度的100％，因此将div.buttons从左侧定位为5％并将其设置为＆＃39;无论视口有多大或多小，宽度为90％都会使其在任何一侧都有5％的空间。

通常很好的做法是定义高度和宽度等内容，即使您认为不需要，因为在某些时候，另一个元素可以继承该属性，或者相对于它定位。

如果您使用Google的Chrome浏览器，则可以使用control + shift + i启用开发人员工具，并预览您的网页在各种设备上的外观。

CSS框布局不好玩

1 个答案: