响应式设计（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处添加断点。
【响应式设计（CSS媒体查询）】请参阅以下示例：

< !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>