Question

我试图在这里设置一个响应式页面。它对背景图像工作正常，但我不知道如何为其他div元素做这件事。我实际上是初学者。所以请向我解释我应该如何构建我的元素。非常感谢你。

这是我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<head>
<link href="style.css" rel="stylesheet" type="text/css"> 
<title>PAGE</title>
</head>
<div id="wrapper">

<div id="content">
CONTENT. CONTENT. CONTENT. CONTENT. 
CONTENT. CONTENT. CONTENT. CONTENT. 
CONTENT. CONTENT. CONTENT. CONTENT. 
CONTENT. CONTENT. CONTENT. CONTENT. 
CONTENT. CONTENT. CONTENT. CONTENT. 
</div>

<div id="push">
</div>

</div>
<div id="footer">
&#169; Copyright 20XX
</div>

</body>
</html>

我的CSS：

＆＃13;

html
{
background-image: url(wildbull-crop.jpg);
background-repeat:no-repeat;
background-position: center top;
background-color:rgb(194,190,189);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
width:100%;
}

body
{
height:100%;
overflow:hidden;
}

#content
{
width:33%;
border:solid thin black;
background-color:white;
opacity:0.7;
}

#footer
{
position:absolute;
left:0;
bottom:0;
width:100%;
height:100px;
background-color:orange;
}

#wrapper
{
min-height:100%;
width:100%;
border:solid thin white;
height:100%;
margin-bottom:100px;
}

＆＃13;

Answer 1

按屏幕尺寸研究CSS3媒体查询。这是一个很好的例子，可以帮助您入门：

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

元素根据屏幕大小调整大小

1 个答案: