如何让我的 css 适用于屏幕分辨率？

Question

目前，我的 css 将在一种分辨率下工作，然后当我尝试使用不同分辨率的屏幕编辑它时，它会改变它并且看起来不一样。我向其中添加了一个包装 div，但它仍在执行，任何人都可以帮助我看看我做错了什么吗？任何建议将不胜感激！

这是我的 css 的全部内容：

#Wrapper {height: 100%;
width: 90%;
margin-right: auto;
margin-bottom: 1%;
margin-left: auto;}

#Title_Background {background: #3399FF;
position: absolute;
height: 15%;
width: 98%;
top: 0px;
left: 0px;
margin-right: 1%;
margin-left: 1%;
border-radius: 10px;}

#Title h1 {font-family: Arial;
font-size: 24px; 
color: black;
position: relative;
text-align: center;
top: 20px;}

#img1 {position: absolute;
height: 2%;
width: 4%;
top: 22px;
left: 51px;}

#LeftNav {background: #3399FF;
position: absolute;
float: left;
clear: left;
height: 82%;
width: 9%;
top: 16%;
left: 0px;
border-radius: 10px;
margin: 1%;}

#LeftNav p {font-family: Arial;
font-size: 18px;
text-align: center;
padding: 10px;
margin-top: 90px;
margin-right: 1%;
margin-left: 1%;
position: relative;
border: 3px solid #000000;
border-style: outset;}

.Inset p {position: relative;
border: 3px solid #000000;
border-style: inset !important;}

.Content {background: yellow;
position: absolute;
height: 60%;
width: 72%;
top: 250px;
left: 14%;
margin: 0 auto;}

.Content p {font-family: Arial;
font-size: 20px;
top: 200px;
text-align: center;}

#RightNav {background: #3399FF;
position: absolute;
float: right;
clear: right;
height: 82%;
width: 9%;
top: 16%;
right: 0px;
border-radius: 10px;
margin: 1%;}

Answer 1

我认为您可能想研究一下“响应式设计”
这是一篇文章：
http://thinkvitamin.com/design/beginners-guide-to-响应式网页设计/
你可以通过谷歌等获得更多信息。

简短摘要：结合使用几种技术，您可以使您的网页支持各种分辨率。

@media 标签可以帮助您定位某些分辨率或范围，并调整大小或更改内容以适应。