HTML自适应WAP页面CSS代码示例 - 响应式布局教程

以下是一个简单的HTML自适应WAP页面的CSS代码示例：

/* Reset Styles */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

/* Global Styles */ body { background-color: #fff; font-family: Arial, sans-serif; font-size: 12px; line-height: 1.5; color: #333; }

/* Page Styles */ #wrapper { width: 100%; max-width: 480px; margin: 0 auto; }

#header { background-color: #333; color: #fff; padding: 10px; text-align: center; }

#content { padding: 10px; }

#footer { background-color: #333; color: #fff; padding: 10px; text-align: center; }

/* Media Queries for Responsive Design / / Small screens */ @media only screen and (max-width: 480px) { body { font-size: 10px; } #header, #footer { padding: 5px; } #content { padding: 5px; } }

/* Medium screens */ @media only screen and (min-width: 481px) and (max-width: 768px) { body { font-size: 12px; } #header, #footer { padding: 10px; } #content { padding: 10px; } }

/* Large screens */ @media only screen and (min-width: 769px) { body { font-size: 14px; } #header, #footer { padding: 15px; } #content { padding: 15px; } }

在这个示例中，我们使用了'媒体查询'（Media Queries）来实现响应式布局。媒体查询允许我们根据设备的屏幕尺寸（宽度）来应用不同的CSS规则。我们定义了三个不同的屏幕尺寸区间，并在每个区间中设置不同的字体大小和内边距（padding）。在'小屏幕'上，我们将字体大小设置为10px，并将内边距减少到5px，以适应较小的屏幕。在'中等屏幕'上，我们将字体大小设置为12px，并将内边距增加到10px。在'大屏幕'上，我们将字体大小设置为14px，并将内边距增加到15px。这样，我们的页面就可以在不同的设备上自适应地显示，并提供更好的用户体验。