Создание адаптивной темы CSS

Question

Создание адаптивной темы CSS

0

Ниже приведен код CSS для всех моих веб-страниц:

   /* Site Colors:
    #1A446C - blue grey
    #689DC1 - light blue
    #D4E6F4 - very light blue
    #EEE4B9 - light tan
    #8D0D19 - burgundy
*/

html { height: 100%; width: 100%; }
body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif; background: #D4E6F4;
    font-size: 13px; line-height: 15px; }
img { border: none; }
table, tr, td { border-collapse: collapse; vertical-align: top; font-size: 13px; line-height: 15px;}
a { color: #8D0D19;}

#header { height: 70px; margin: 0px; padding: 0px; text-align: left; 
    background: #1A446C; color: #D4E6F4; }
#header h1 { padding: 1em; margin: 0px;}
#main { margin: 0px; padding: 0px; height: 600px; width: 100%; background: #EEE4B9; }
#structure { height: 600px; width: 100%; }
#footer { height: 2em; margin: 0px; padding: 1em; text-align: center; 
    background: #1A446C;  color: #D4E6F4; }

/* Navigation */
#navigation { width: 150px; padding: 1em 2em; color: #D4E6F4; background: #8D0D19; }
#navigation a { color: #D4E6F4; text-decoration: none; }
ul.subjects { padding-left: 0; list-style: none; }
ul.pages { padding-left: 2em; list-style: square; }
.selected { font-weight: bold; }

/* Page Content */
#page { padding-left: 2em; vertical-align: top; background: #EEE4B9; }
#page h2 { color: #8D0D19; margin-top: 1em;}
#page h3 { color: #8D0D19; }

Проблема в том, что как только у меня будет достаточный текст для добавления на веб-страницу, часть текста выходит из строя и становится видимой на белом фоне (вне светлого загар). Может кто-нибудь сказать мне необходимые изменения, которые мне нужно сделать.

Mithilesh 14 нояб. 2013, в 12:35

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Bipin Kumar Pal · Accepted Answer · 2013-11-14T08-36-00.000Z

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Используйте этот код и настройте выигранную работу

Хорошо, что касается зависимости от устройства, но как мне сделать ее отзывчивой в моем случае?
пожалуйста, используйте ширину и другие свойства тега в @media target screen max-width