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

【问题标题】：How to automatically resize divs to match window size如何自动调整 div 大小以匹配窗口大小
【发布时间】：2014-10-21 04:50:18
【问题描述】：

我想改变它，所以当我调整窗口大小时，包括 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;}

【问题讨论】：

标签： html css resize

【解决方案1】：

您想要实现的称为响应式布局，它会根据屏幕分辨率而变化。请注意，仅调整 div、段落等的大小是不够的，您还需要考虑很多其他的事情，例如

导航栏
图片
网格等

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

【讨论】：

【解决方案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 了解有关媒体查询的更多信息。

【讨论】：