响应式设计——媒体查询

时间 2020-05-21

标签响应设计媒体查询繁體版

原文原文链接

1、响应式设计javascript

　　响应式设计的概念是页面的设计应根据用户的行为（如调整浏览器窗口大小）和设备环境（如屏幕大小、屏幕定向）进行相应的调整。它能够由多方面组成，包括弹性网格和布局、弹性图片、媒体查询等。css

2、媒体查询html

2.1媒体查询的概念java

在css2中容许使用media来对特定的媒体应用特定的样式，例如针对屏幕或者打印机。能够经过<link>标签的media属性为样式表指定特定的媒体。css3

<link rel="stylesheet" type="text/css" href="screen-style.css" media="screen" />

可是这种方式只能针对媒体的类型，不能根据媒体的各类功能特性来设定相应的样式，而css3中的媒体查询则能够。git

　　媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width和height 等。使用媒体查询，能够在不改变　　　　　页面页面内容的状况下，为特定的一些输出设备定制显示效果。github

　 2.2媒体查询的语言chrome

　　　1.在css样式表中使用@media浏览器

　@media screen and (max-width:800px){ 　　　　　　body{ 　　　　　　　　background-color:red;
　　　　　　} 　　　　}

①其中screen是媒体类型的一种(屏幕)，其余的媒体类型以下ide

媒体类型	媒体类型说明
all	全部媒体
aural	听觉媒体
braille	点字触觉媒体
handled	便携媒体，如手机、平板电脑
print	打印预览图等
projection	投影设备
screen	显示器、笔记本、移动端等设备
tty	如打字机或终端等设备
tv	电视机等设备类型
embossed	盲文打印机

②其中and是关键字，用于链接多个并列条件，其余关键字还有not和only。not是指排除某种设备，除了指定的这种设备以外，其余的均可以。如：

@media not screen{ body{ color:red;
       } }

　　是指不是显示屏以外的应用此样式。

　　 only是对于不支持Media Queries可是可以正确读取Media Type的设备隐藏样式表。Media Queries是css3对Media Type的一个扩展，因此不支持Media Queries的浏览器，应该仍然要识别Media Type。好比：

@media only screen and (max-width:990px){ body{ color:red;  
      } }

　　对于支持Media Queries的设备，可以正确应用样式，就像only不存在同样；对于不支持Media Queries可是可以正确读取Media Type的设备，因为先读取到only而不是screen，因此会忽略这个样式；不支持media Queries的IE不管是否有only，都忽略样式。下面是Media Queries的支持状况：

IE6	不支持
IE7	不支持
IE8	不支持
IE9+	支持
chrome5	支持
Opera10	支持
Firefox3.6	支持
Safari4	支持

逗号（,）用来表示并列，即或者。好比：

@media handheld and (max-width:20em),screen and (max-width:30em){ body{ color:red;
    } }

这个表示在宽度小于20em的手持设备，或者宽度小于30em的屏幕中应用此样式。

③其中对于(max-width:800px)就是媒体特性，被置放在一对圆括号里面。媒体特性只接受单个的逻辑表达式做为其值，或者没有值。其中大部分接受max/min的做为前缀。下表是一些媒体特性：

媒体特性	取值	含义	支持 max/min
width	length	视口宽度	支持
height	length	视口高度	支持
device-width	length	设备屏幕的宽度	支持
device-height	length	设备屏幕的高度	支持
orientation	portrait\| landscape	检查设备处于横向仍是纵向	不支持
aspect-ratio	ratio(16/9)	基于视口宽度和高度的宽高比	支持
device-aspect-ratio	ratio(16/9)	基于设备宽度和高度的宽高比	支持
color	integer	每种颜色的位数	支持
color-index	integer	设备的颜色索引表中的颜色数	支持
monochrome	integer	检查单色帧缓冲区中每像素所使用的位数	支持
resolution	resolution(300pdi/118dpcm)	用来检测屏幕或打印机的分辨率	支持
scan	progressive/ interlace	电视机的扫描方式	不支持
grid	interger	用来检测输出设备是网格设备仍是位图设备	不支持

2.经过<link>标签的media属性为样式表指定特定的媒体查询

<link rel="stylesheet" media="screen and (orientation:portrait)" href="screen.css" />

2.3媒体查询的兼容

IE8及其如下的浏览器不支持css3 Media Queries，而目前实现media queries兼容的库比较成熟的有respond.js 和 css3-mediaqueries-js，它们各有优缺点，respond.js压缩后只有1K，只实现了Media Queries中最经常使用的min-width/max-width的兼容；css3-mediaqueries-js基本实现了全部css3规范中的media query特性的兼容，因此致使压缩有16k。

<!--[if lt IE 9]> <script type="text/javascript" src="respond.js"></script> <![endif]-->

或者

<!--[if lt IE 9]> <script type="text/javascript" src="css3-mediaqueries-js.js"></script> <![endif]-->

2.4媒体查询的小案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Media Queries</title>
        <style type="text/css"> .box{ width:800px; height:50px; line-height: 50px; margin:40px auto; border:1px solid #000;
            } @media only screen and (max-width:1300px){ #boxred{ background:red;
                } #boxblue,#boxgreen{ background:none;
                } } @media only screen and (max-width:1100px){ #boxblue{ background:blue;
                } #boxred,#boxgreen{ background:none;
                } } @media only screen and (max-width:900px){ #boxgreen{ background:green;
                } #boxred,#boxblue{ background:none;
                } } </style>
    </head>
    <body>
        <div id="boxred" class="box">当浏览器窗口宽度小于1300px时，这儿变成红色</div>
        <div id="boxblue" class="box">当浏览器窗口宽度小于1100px时，这儿变成蓝色</div>
        <div id="boxgreen" class="box">当浏览器窗口宽度小于900px时，这儿变成绿色</div>
    </body>
</html>

View Code

参考文章：http://www.swordair.com/blog/2010/08/431/