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

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

html css

Html 如何自动调整div大小以匹配窗口大小,html,css,resize,Html,Css,Resize,我想更改它，以便在调整窗口大小时，包括div在内的所有内容都会调整大小。不仅仅是背景。我刚刚开始使用HTML，所以可能不熟悉更高级的概念。如何调整页面中的div大小以适应窗口这是我的主页 <!DOCTYPE HTML> <html lang="en-US"> <head>  <meta charset="UTF-8"> <title>Keyan Kazemian</title>

我想更改它，以便在调整窗口大小时，包括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>

对较小的设备使用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 */
}

有关媒体查询的更多信息，请参阅本页。

您试图实现的是响应式布局，它根据屏幕分辨率而变化。注意，它不仅仅是调整div、段落等的大小，还需要考虑很多其他的东西，如

。

导航栏
图像
网格等

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

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