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-responsive-web-design/ 你可以通过谷歌获得更多，等等。

简短摘要：结合使用一些技巧，您可以将网页用于各种分辨率。

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

如何使我的CSS工作屏幕分辨率？

1 个答案: