个性化阅读
专注于IT技术分析

响应式设计:CSS媒体查询

本文概述


什么是媒体查询?

CSS Media查询是W3C建议和CSS3模块, 用于适应屏幕分辨率(例如智能手机屏幕与计算机屏幕)等条件。

  • 最早在CSS3中使用的媒体查询技术。
  • 它在2012年6月成为W3C推荐。
  • 它是CSS2中用于不同媒体类型(即屏幕和打印)的媒体相关样式表的扩展。
  • 最常用的媒体功能是“宽度”。
  • 仅当满足特定条件时, 它才使用@media规则来包含CSS属性块。

媒体查询的推荐媒体功能

以下是W3C建议用于媒体查询的媒体功能列表。

特征 最小/最大 描述
color integer yes 它指定每个颜色分量的位数。
color-index integer yes 它指定颜色查找表中的条目数。
device-aspect-ratio integer/integer yes 它指定设备的纵横比。
device-height length yes 它指定输出设备的高度。
device-width length yes 它指定输出设备的宽度。
grid integer no 对于基于网格的设备来说确实如此。
height length yes 它指定渲染表面的高度。
monochrome integer yes 它指定单色帧缓冲区​​中每个像素的位数。
resolution 分辨率(“ dpi”或“ dpcm”) yes 它指定显示屏的分辨率。
scan “渐进式”或“隔行扫描” no 它指定“电视”媒体类型的扫描过程。
width length yes 它指定渲染表面的宽度。

什么是响应式网页设计?

响应式Web设计一词由Ethan Marcotte给出。它可以帮助你使用流畅的网格, 灵活的图像和媒体查询来逐步增强网页以适应不同的查看环境, 例如台式机, 智能手机, 平板电脑等。


拍摄屏幕快照时, 你使用什么屏幕分辨率?

智能手机:320像素

平板电脑:768px

上网本:1024px

桌面:1600px

让我们以一个示例来看一下媒体查询的简单用法:

本示例指定如果你将窗口的大小调整为小于500px, 则背景颜色将被更改。

请参阅以下示例:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
    background-color:yellow;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:green;
    }
}
</style>
</head>
<body>
<p>If you resize the browser window and the width of this document is less than 500 pixels, the background-color is "green", otherwise it is "yellow"</p>
</body>
</html>

如何添加断点?

媒体查询可用于创建响应式网页。断点用于网页, 你希望设计的某些部分在断点的每一侧表现不同。

让我们举个例子:

在这里, 我们使用媒体查询在768px处添加断点。

请参阅以下示例:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: purple;
    color: pink;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :green;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: green;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
<h1>srcmini</h1>
</div>

<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>C/C++</li>
<li>Java</li>
<li>SQL</li>
<li>Android</li>
<li>HTML</li>
<li>CSS</li>
<li>Cloud Computing</li>
<li>PHP</li>
<li>JSON</li>
<li>JQuery</li>
<li>MongoDB</li>
<li>Oracle</li>

</ul>
</div>

<div class="col-6 col-m-9">
<h1>About srcmini</h1>
<p>srcmini is written and developed that students may learn computer science related technologies easily.</p>
</div>

<div class="col-3 col-m-12">
<div class="aside">
<h2>What is srcmini?</h2>
<p>srcmini is the No.1 Java training institute in Noida, Delhi, Gurgaon, Ghaziabad and Faridabad.
 You will get practical training on Java by our Java expert who have 7+ year industrial experience.</p>
<h2>Why srcmini?</h2>
<p>Life Time Validity, Training by Java Professionals, Problem Solving Team, Project Development, Small Batches to focus on each student
</p>
<h2>How to reach?</h2>
<p>srcmini is located in Noida (Gautam Budhh Nagar). The full address is G-13 Second 
Floor Sector 3 (Near Sector-16 Metro Station)
Noida(U.P)</p>
</div>
</div>

</div>

<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>
赞(0)
未经允许不得转载:srcmini » 响应式设计:CSS媒体查询

评论 抢沙发

评论前必须登录!