html - 我需要能够调整整个窗口的大小

  显示原文与译文双语对照的内容

这是我的主页


<!DOCTYPE HTML>
<html lang="en-US">
<head> 
<!-- META -->
<meta charset="UTF-8"> 
<title>Keyan Kazemian</title>
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type="text/css" type='text/css'>
<link rel="stylesheet" href="styleone.css">
</head>
<body>
<div style="background: rgba(30,26,29,0.7); position: fixed; top:300px; left:440px; height:160px; width:600px; moz-border-radius:5px; border-radius:5px;">
<h1> Keyan Kazemian </h1>
<p> Hello, my name is Keyan and this is my life. </p>
</div>
<a style="display:block" href="about-me.html"> <div class="links">About Me</div> </a>
<a style="display:block" href="#music.html"> <div class="linktwo"> Music </div> </a>
<a style="display:block" href="#comingsoon"> <div class="linkthree"> Video </div> </a>
<a style="display:block" href="#comingsoon"> <div class="linkfour"> App Development </div> </a>

</body>
</html>

这是我的样式表


.links { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1046px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 80px;}
.linktwo { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1252px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 160px;}
.linkthree { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1458px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 160px;}
.linkfour { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1664px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 0.9em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 80px;}
a:link {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;} 
a:visited {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;} 
a:hover {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;} 
a:active {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;} 

html { 
 background: url(trop.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
 body {font-size: 100%;}
 h1 {color:#fcfcf5; font-size: 3em; font-family: 'Luckiest Guy', cursive; text-align: center;}
 p {color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center;}

我想改变它,所以当我调整窗口的大小,包括div的改变。 不只是 background 。我刚刚开始了 HTML,所以我可以能不熟悉更高级的概念。

感谢你的帮助

时间: 作者:

对小型设备使用CSS媒体查询也称为响应设计( 窗口调整大小),使用你的主要样式表。 对于div使用较小的字体大小和 margin,以便在小型设备上可以查看。


@media (max-width: 600px) {
 selector {
//style for smaller devices
 }
} 

例如ipad的媒体查询


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
{ 
/* STYLES GO HERE */
//use width upto 768px
}

//media queries for iPad mini

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{ 
/* STYLES GO HERE */
}

查看这里链接了解有关媒体查询的更多信息。

你正在尝试实现的是响应式布局,它根据屏幕分辨率变化。 注意,这不仅仅是调整 div 。段落的大小,而且需要考虑它的他类似的事情。

  • 导航栏
  • 图像
  • 网格等。

在这篇文章中覆盖RWD是不可能的,但你可以在搜索引擎上找到很多东西。 在这里仍然引用这些链接:,这里是,这里是

作者:
...