srcmini本文概述
什么是媒体查询？
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>
评论前必须登录！
注册