css3媒体查询和响应式设计 – CSS3高级教程

上一章CSS3高级教程请查看：css3 滤镜filters
CSS媒体查询使你能够在不同大小的输出设备上正确地显示文档。
媒体查询和响应式Web设计媒体查询允许你为特定范围的设备(如移动手机、平板电脑、台式机等)自定义web页面的表示，而无需更改标记。媒体查询由媒体类型和零个或多个表达式组成，这些表达式与特定媒体特性(如设备宽度或屏幕分辨率)的类型和条件匹配。
由于媒体查询是一个逻辑表达式，因此可以将其解析为true或false。如果媒体查询中指定的媒体类型与文档所显示的设备类型匹配，并且满足媒体查询中的所有表达式，那么查询的结果将为真。当媒体查询为真时，相关样式表或样式规则将应用于目标设备。下面是一个用于标准设备的简单媒体查询示例。

/* 智能手机(纵向和横向) ---------- */ @media screen and (min-width: 320px) and (max-width: 480px){ /* styles */ } /* 智能手机(纵向) ---------- */ @media screen and (max-width: 320px){ /* styles */ } /* 智能手机(横向) ---------- */ @media screen and (min-width: 321px){ /* styles */ } /* Tablets, iPads (portrait and landscape) ---------- */ @media screen and (min-width: 768px) and (max-width: 1024px){ /* styles */ } /* 平板电脑ipad(纵向) ---------- */ @media screen and (min-width: 768px){ /* styles */ } /* 平板电脑ipad(横向) ---------- */ @media screen and (min-width: 1024px){ /* styles */ } /* 台式机和笔记本电脑 ---------- */ @media screen and (min-width: 1224px){ /* styles */ } /* 大屏幕 ---------- */ @media screen and (min-width: 1824px){ /* styles */ }

提示: 媒体查询是创建响应式布局的好方法。使用媒体查询，你可以为在智能手机或平板电脑等设备上浏览的用户定制不同的网站，而无需更改页面的实际内容。
根据屏幕大小更改列宽度你可以使用CSS媒体查询来更改web页面宽度和相关元素，从而为用户在不同设备上提供最佳的查看体验。
以下样式规则将根据屏幕或视口大小自动更改容器元素的宽度。例如，如果视口宽度小于768像素，它将覆盖100%的视口宽度; 如果它大于768像素，但小于1024像素，它将是750像素宽，依此类推。

.container { margin: 0 auto; background: #f2f2f2; box-sizing: border-box; } /* 移动手机(纵向和横向) ---------- */ @media screen and (max-width: 767px){ .container { width: 100%; padding: 0 10px; } } /* 平板电脑和ipad(纵向和横向) ---------- */ @media screen and (min-width: 768px) and (max-width: 1023px){ .container { width: 750px; padding: 0 10px; } } /* 低分辨率的台式机和笔记本电脑 ---------- */ @media screen and (min-width: 1024px) { .container { width: 980px; padding: 0 15px; } } /* 高分辨率的台式机和笔记本电脑 ---------- */ @media screen and (min-width: 1280px) { .container { width: 1200px; padding: 0 20px; } }

注意: 你可以使用元素上的CSS3 box-sizing属性来创建更直观、更灵活的布局，而不需要付出太多的努力。
根据屏幕大小更改布局你还可以使用CSS媒体查询，使你的多栏网站布局更适应和响应设备通过很少的定制。
【css3媒体查询和响应式设计 – CSS3高级教程】下面的样式规则将创建一个两列布局，如果视口大小大于或等于768像素，但如果小于这个大小，它将作为一个列布局呈现。

.column { width: 48%; padding: 0 15px; box-sizing: border-box; background: #93dcff; float: left; } .container .column:first-child{ margin-right: 4%; } @media screen and (max-width: 767px){ .column { width: 100%; padding: 5px 20px; float: none; } .container .column:first-child{ margin-right: 0; margin-bottom: 20px; } }