刚开始科学研究响应式web设计方案，CSS3 Media Queries是新手入门。
Media Queries，其功效便是容许加上表述式用于明确新闻媒体的自然环境状况，为此来运用不一样的款式表。也就是说，其容许大家不在更改內容的状况下，更改网页页面的合理布局以精准适应不一样的机器设备。
那麼，Media Queries是怎样工作中的？
二种方法：
一种是立即在link中分辨机器设备的规格，随后引入不一样的css文档：

 link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)" 

含意是当显示屏的总宽超过相当于400px的情况下，运用styleA.css
在media特性里：

 link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)" 

含意是当显示屏的总宽超过600低于800时，运用styleB.css
另外一种方法，就是立即写在 style 标识里：

@media screen and (max-width: 600px) { /*当显示屏规格低于600px时，运用下边的CSS款式*/
 .class {
 background: #ccc;
}

。
实际上大部分便是款式遮盖~，分辨机器设备，随后引入不一样的款式文档遮盖。
要留意的是因为网页页面会依据显示屏总宽调节合理布局，因此不可以应用肯定总宽的合理布局，都不能应用具备肯定总宽的原素。这一条十分关键，不然会出現横着翻转条。
填补：media query中的not only all等重要字
not: not是用于清除掉一些特殊的机器设备的，例如 @media not print（非复印机器设备）
only: 用于定某类非常的新闻媒体种类。针对适用Media Queries的移动终端来讲，假如存有only重要字，移动终端的Web访问器会忽视only重要字并立即依据后边的表述式运用款式文档。针对不兼容 Media Queries的机器设备但可以载入Media Type种类的Web访问器，碰到only重要字时候忽视这一款式文档。
all: 全部机器设备，这一应当常常见到
也有其他一些：

一个三栏合理布局的，不在同的规格下，变成两栏，再变成一栏

编码以下：

 !DOCTYPE HTML 
 html 
 head 
 meta charset="utf-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" / 
 title css3-media-queries-demo /title 
 style 
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
 padding: 0;
 margin: 0;
.content{
 zoom:1;
.content:after{
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden; 
.leftBox, .rightBox{
 float: left;
 width: 20%;
 height: 500px;
 margin: 5px;
 background: #ffccf7;
 display: inline;
 -webkit-transition: width 1s ease;
 -moz-transition: width 1s ease;
 -o-transition: width 1s ease;
 -ms-transition: width 2s ease;
 transition: width 1s ease;
.middleBox{
 float: left;
 width: 50%;
 height: 800px;
 margin: 5px;
 background: #b1fffc;
 display: inline;
 -webkit-transition: width 1s ease;
 -moz-transition: width 1s ease;
 -o-transition: width 1s ease;
 -ms-transition: width 1s ease;
 transition: width 1s ease;
.rightBox{
 background: #fffab1;
@media only screen and (min-width: 1024px){
 .content{
 width: 1000px;
 margin: auto
@media only screen and (min-width: 400px) and (max-width: 1024px){
 .rightBox{
 width: 0;
 .leftBox{ width: 30%}
 .middleBox{ width: 65%}
@media only screen and (max-width: 400px){
 .leftBox, .rightBox, .middleBox{ 
 width: 98%;
 height: 200px;
 /style 
 /head 
 body 
 div 
 div /div 
 div /div 
 div /div 
 /div 
 /body 
 /html 

自适应网站：@media screen 网页页面模版 如今的网页页面访问媒体过多，不一样的服务平台有不一样的规格，如PC端、手机上端、iPad这些，规格相距过多，不应用自适应网站，就无法适配这种访问器。这儿，

本站內容假如沒有标明出處，全部权均归本网站，出示完全免费免费下载使用，但不可用以商业服务赢利。假如标明出處，则来源于于互连网，本网站不做商业服务主要用途。假如本网站有內容侵害到您的利益，请致函网站站长电子邮箱，本网站当马上删掉。

联络大家