文章导航

CSS3 Media Queries媒体查询

2018-1-11 16:42| 发布者: admin| 查看: 1271| 评论: 0|来自: 蚂蚁部落

响应式设计能够适应各种屏幕或者设备展现页面(在不同的设备,页面展现风格可能会有不同)。

解决了各种规格设备给程序员带来的挑战,让网页无论是在传统的电脑,平板电脑或者手机上都能正常展示,下面对媒体查询做一下介绍。 

一.CSS2中的媒体查询:

css2中也有媒体查询的应用,不过比较简单,代码如下:

[HTML] 纯文本查看 复制代码
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

上面的代码分别规定三个css文件分别用于显示器、所有类型设备和打印机。

二.媒体查询使用方式:

媒体查询的使用方式多种多样,基本适合css使用方式一一对应的,罗列如下:

link方式引入:

[HTML] 纯文本查看 复制代码
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />

xml方式引入:

[HTML] 纯文本查看 复制代码
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" />

@import方式引入:

[CSS] 纯文本查看 复制代码
@import url("css/reset.css") screen;

css代码中使用:

[CSS] 纯文本查看 复制代码
@media screen{
  选择器{
    属性:属性值;
  }
}

style标签上使用:

[HTML] 纯文本查看 复制代码
<style type="text/css" media="screen">
/*code*/
</style>

三.媒体查询规则:

css2中的媒体查询非常的简单,仅仅能够区分媒体类型。

css3对媒体查询进行了扩展,不但可以依据媒体的类型,且还可以依据媒体的相关属性。

看如下代码实例:

[HTML] 纯文本查看 复制代码
<link rel="stylesheet" media="screen and (max-width: 600px)" href="softwhy.css" />

当页宽度小于或等于600px且应用于屏幕上时,就会调用softwhy.css。

查询规则:

包含一个媒体类型,后跟一个或多个检查特定条件(如最小的屏幕宽度)的表达式。

虽然使用方式不同,定义媒体查询的方式也有所不同,比如media属性方式和@media方式,但是规则都是一样的。

(1).简单代码:

[CSS] 纯文本查看 复制代码
@media all and (min-width:800px) { 
  /*code*/
}

所有最小水平屏幕宽度为800px的屏幕应用指定的css代码。

特别说明:如果媒体类型是all,all可以省略,all后面的and也可以省略,简写如下:

[CSS] 纯文本查看 复制代码
@media (min-width:800px) { 
  /*code*/
}

(2).复杂的查询代码:

[CSS] 纯文本查看 复制代码
@media (min-width:800px) and (max-width:1200px) {
  /*code*/
}

(3).and 关键词:

and用来规定必须同时满足条件,代码如下:

[CSS] 纯文本查看 复制代码
@media screen (min-width:800px) and (max-width:1200px) {
/*code*/
}

当屏幕满足大于等于800px和小于等于1200px时就会使用对应的css代码。

(4).or关键词:

or用来规定只要满足一个条件即可,代码如下:

[CSS] 纯文本查看 复制代码
@media screen (min-width:800px) or (orientation:portrait) {
/*code*/
}

当屏幕尺寸大约等于800px,或者方向是纵向的时就会使用对应的css代码。

(5).not关键字:

[CSS] 纯文本查看 复制代码
@media not print{
/*code*/
}

not用来规定当不是指定条件时即可成立。

(6).竖屏或者横屏:

[CSS] 纯文本查看 复制代码
@media (orientation:portrait) {
  /*code*/
}

上面的表示当竖屏时应用响应的css样式代码。

[CSS] 纯文本查看 复制代码
@media (orientation:landscape) {
  /*code*/
}

上面的表示当横屏时应用响应的css样式代码。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 skew()下一篇:CSS3 calc()

最新评论

返回顶部