CSS3 媒体查询
CSS 媒体查询使您能够格式化文档以在不同大小的输出设备上正确显示。
媒体查询和响应式网页设计
媒体查询允许您为特定范围的设备（如手机、平板电脑、台式机等）自定义网页的呈现方式，而无需更改任何标记。 媒体查询由媒体类型和零个或多个表达式组成，这些表达式与特定媒体功能（例如设备宽度或屏幕分辨率）的类型和条件相匹配。
由于媒体查询是一个逻辑表达式，它可以解析为真或假。 如果媒体查询中指定的媒体类型与显示文档的设备类型匹配，并且媒体查询中的所有表达式都满足，则查询结果将为真。 当媒体查询为真时，相关的样式表或样式规则将应用于目标设备。 这是标准设备的媒体查询的简单示例。
/* 智能手机 (portrait and landscape) ---------- */
@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 */
}
/* 平板电脑、iPad（纵向和横向） ---------- */
@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 媒体查询来更改网页宽度和相关元素，从而为不同设备上的用户提供最佳观看体验。
以下样式规则将根据屏幕或视口大小自动更改容器元素的宽度。 例如，如果视口宽度小于 768 像素，它将覆盖 100% 的视口宽度，如果大于 768 像素但小于 1024 像素，它将是 750 像素宽，依此类推。
.container {
margin: 0 auto;
background: #f2f2f2;
box-sizing: border-box;
}
/* Mobile phones (portrait and landscape) ---------- */
@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 媒体查询，通过很少的自定义来使您的多列网站布局更具适应性和响应性。
如果视口大小大于或等于 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;
}
}Advertisements