Question

我想更改它，所以当我调整窗口大小时，包括div在内的所有内容都会调整大小。不只是背景。我刚刚开始使用HTML，所以我可能不熟悉更高级的概念。如何调整页面中的div以适应窗口？

这是我的主页

<!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;}

Answer 1

您要实现的目标是响应式布局，它会根据屏幕分辨率进行更改。请注意，它不仅仅足以调整div，Paragraph等的大小，但你还需要考虑很多其他的事情，比如

导航栏
图片
网格等。

在这篇文章中覆盖RWD是不可能的，但你可以在搜索引擎上找到很多东西。请参阅这些可用的链接here，here和here。

Answer 2

对较小的设备使用CSS媒体查询，也称为响应式设计（窗口调整大小）将其与主样式表一起使用。为DIV使用较小的字体大小和边距，以便可以在小型设备上查看。

@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 */
}

有关媒体查询的详情，请查看此Link。

如何自动调整div的大小以匹配窗口大小

2 个答案: