html - 使 CSS 主题响应

Question

以下是我所有网页的 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; }

问题是，一旦我有足够的文本添加到网页中，文本的某些部分就会越界并在白色背景中可见(在浅棕褐色之外)。任何人都可以告诉我我需要做的必要更改.

Answer 1

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

使用此代码并自定义赢得的作品