响应式布局2之Media Query（媒介查询）

最新推荐文章于 2024-05-22 12:05:09 发布

黄小财

最新推荐文章于 2024-05-22 12:05:09 发布

阅读量1.3k

点赞数 3

分类专栏： css3 html5

html5 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

一.media query 介绍

1.使用 @media 查询可以针对不同的媒体类型定义不同的样式。

2.@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

二.兼容性

三.media query 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype(媒体类型)说明

媒体类型	兼容性	描述
aural		已废弃，用于语音和音乐合成器
braille		已废弃，用于触觉反馈设备
handheld		已废弃，用于小型或手持设备
print	所有浏览器	用于打印机和打印预览
projection		已废弃，用于投影图像，如幻灯片
screen	所有浏览器	用于电脑屏幕，平板电脑，智能手机等
tty		已废弃，用于使用固定间距字符格的设备。如电传打字机和终端
tv		已废弃，用于电视类设备
embossed		已废弃，用于凸点字符（盲文）印刷设备
speech		用于语音类型
all	所有浏览器	用于所有媒体设备类型

media feature（媒体特性）说明

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

四.media query 用法及场景

媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中

1、在head中引入

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-2.1.4.min.js  "></script>
<link media="screen and (max-width:600px)" rel="stylesheet" href="example.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,target-densitydpi=device-dpi" />
<title>test</title>
</head>
<body>
<div class='test'></div>
<div class='test1'></div>
<div class='test2'></div>
 </body>
</html>

上面表示屏幕宽度小于等于600px时，使用example.css渲染web页面

2、在@import中引入

<style type="text/css" media="screen and (min-width:600px) and (max-width:900px)"> 
    @import url("css/style.css");
  </style>

上面表示屏幕大小在600-900之间时，使用style.css来渲染页面

3直接在css中使用

@media screen and (max-width: 800px) {
    .test {
        width:100%;
    }

    .test2 {
        width:100%;
    }

    .test3 {
        width:100%;
         height：100%;
    }
}

设备屏幕输出宽度

最大设备宽度max-device-width

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，注意：这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
  <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。

优点：

针对不同的终端(pc,手机，平板,androidTV以及主流浏览器)，界面友好，以达到多平台使用共一个页面的响应。

缺点：

需要适配多种设备，css代码繁多。

黄小财

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局2之Media Query（媒介查询）

一.media query 介绍1.使用 @media 查询可以针对不同的媒体类型定义不同的样式。2.@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。二.兼容性三.media query 语法@media mediatype
复制链接

扫一扫