Как мне заставить мою CSS работать на разрешениях экрана? - PullRequest
Новая
       13

Как мне заставить мою CSS работать на разрешениях экрана?

2 голосов
/ 29 ноября 2011

В данный момент мой 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%;}

1 Ответ

4 голосов
/ 29 ноября 2011

Я думаю, что вы, возможно, захотите заглянуть в «Адаптивный дизайн». Вот статья: http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/, и вы можете получить больше через Google, ECT.

Краткое резюме. Используя несколько методов, вы можете сделать свои веб-страницы доступными для различных разрешений.

Тег @media может помочь вам нацелить определенные разрешения или диапазоны, а также изменить размер или изменить его для соответствия.

...