@media媒体查询

媒体查询（media Query）是CSS3新语法

使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度出行渲染页面
目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询

语法规范

@media mediatype and | not | only ( media feature ) {

CSS-Code;

}

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not noly
media feature 媒体特性必须有小括号包含
1. mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

all 用于所有设备

print 用于打印机或打印预览

screen 用于电脑屏幕、平板电脑、智能手机等

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

and 可以将多个媒体特性连接到一起，相当于 “且” 的意思

not 排插某个媒体类型，相当于 “非” 的意思，可以省略

only 指定某个特定的媒体类型，可以省略

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，注意他们要加小括号包含

width 定义输出设备中页面可见区域的宽度

min-width 定义输出设备中页面最小可见区域宽度

max-width 定义输出设备中页面最大可见区域宽度

引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets (样式表)

原理：就是直接在 link 中判断设备的尺寸，然后引用不同的 css 文件

<link rel=”stylesheet” media=”mediatype and | not | only (media feature)” href=”mystylesheets.css”>

@media媒体查询相关推荐

CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）
随着宽屏的不断普及,CSS3出现了@media媒体查询技术一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
css3 media媒体查询器用法总结
原文地址:http://www.cnblogs.com/zhaodifont/p/3858657.html 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6 ...
前端CSS @media 媒体查询PC端
前端CSS @media 媒体查询PC端注意and后面跟一个空格 @media screen and (min-width: 1024px){body{font-size: 12px} } /*&g ...
@media媒体查询响应式页面的简单实现
引言忘记了媒体查询是怎么用的了, 看了一下文档, 随手写的最基本的实现思路, 超级简陋, 不要嫌弃. 图片替换一下就能看到效果.嗯- 还是把文件也存上来吧. 记一下, 下次再忘了直接看一眼就可以了. ...
教你@media媒体查询来适配ipad iphone5678plus 各种屏幕
<style lang="less" rel="stylesheet/less" type="text/less" scoped> ...
CSS Media媒体查询
媒介类型在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在 media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕(默 ...
深入理解CSS Media媒体查询
前面的话一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
CSS3 @Media 媒体查询
CSS3 媒体类型值描述 all 用于所有媒体类型设备. print 用于打印机. screen 用于计算机屏幕.平板电脑.智能手机等等. speech 用于大声"读出"页面的 ...
@media媒体查询——详解
媒体查询的核心思路,就是根据不同的设备宽度设置断点,然后书写css样式覆盖之前的样式. 1.媒体类型 media属性用于为不同的媒介类型规定不同的样式: screen 计算机屏幕(默认值) tty 电 ...

@media媒体查询

@media媒体查询

@media媒体查询相关推荐

最新文章

热门文章