CSS3-多媒体查询

@media规则在css2中就有介绍，针对不同媒体颗星可以定制不同的样式规则。例如：你可针对不同的媒体类型(包括显示器、便携设备、电视机等等)设置不同的样式规则。但这些多媒体类型在很多设备上支持还不够友好

CSS3多媒体查询根据设置自适应显示。媒体查询可用于检测很多事情，例如：

viweport(视窗)的宽度与高度

设备的高度与宽度

朝向(智能手机横屏与竖屏)

分辨率

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

@media not|only mediatype and (expressions) { CSS 代码...; }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>媒体查询</title>
<style>
body {background-color: pink;color: #fff;
}
ul {list-style-type: none;
}ul li a {color: green;text-decoration: none;padding: 3px; display: block;
}
/*大屏幕*/
@media screen and (min-width: 1200px) {body {background-color: brown;}
}
/*平板电脑与小屏电脑之间的分辨率*/
@media screen and (min-width: 768px) and (max-width:979px) {body {background-color: blue;}
}
/*横向放置的手机和竖向放置的平板之间的分辨率*/
@media screen and (max-width:767px) {body {background-color: blueviolet;}
}/*竖向放置的手机以及分别率*/
@media screen and (max-width: 480px) {body {background-color: black;}
}
</style>
</head>
<body><h1 >重置浏览器窗口查看效果！</h1>
<p>超大屏幕 (min-width: 1200px)   红色</p>
<p>正常屏幕 (min-width:980px)and(max-width: 1200px)   粉色</p>
<p>平板电脑与小屏电脑之间的分辨率(min-width: 768px) and (max-width:979px)  蓝色</p>
<p>横向放置的手机和竖向放置的平板之间的分辨率(max-width:767px)   紫色;</p>
<p>竖向放置的手机以及更小分别率 黑色</p></body>
</html>

转载于:https://www.cnblogs.com/minchao/p/6088771.html

CSS3-多媒体查询相关推荐

HTML引入媒体查询CSS,CSS3 多媒体查询
CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则. 例如:你可以针对不同的媒体类型(包括显示器.便携设备.电视机,等等)设置 ...
CSS3——多媒体查询属性
多媒体查询语法 @media not|only mediatype and (expressions) { CSS-Code; } not: not是用来排除掉某些特定的设备的,比如 @media n ...
css多媒体竖屏,css3 媒体查询方向：横屏竖屏教程
大家好,今天给大家分享的是css3 媒体查询方向:横屏竖屏教程,希望大家喜欢. 说道媒体查询,很多人会感觉陌生,但是对于做响应式开发的同学来说,那是再熟悉不过了. 结合CSS媒体查询,可以创建适应不同 ...
css3媒体查询实现网站响应式布局
响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词. 因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给 ...
银行自助设备详细介绍（二）——多媒体查询机
上次简单对银行个人自助设备进行了分类说明.现在开始对每种设备作进一步分析说明. 涉及设备的硬件.软件结构以及相关的一系列知识. 多媒体查询机--顾名思义,就是一台多媒体电脑.主要用于完成非现金类银行个 ...
iPhone的CSS3媒体查询
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
html 苹果xr媒体查询,iPhone的CSS3媒体查询_html/css_WEB-ITnose
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
低版本浏览器支持css3 Media查询的方法, ie6-ie8 不支持css3 的时候用respond.js，html5shiv.js 【非常实用哦】。。。。。。。。。。。。...
Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width ...
多媒体查询@media
定义使用 @media 查询,你可以针对不同的媒体类型定义不同的样式.当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面. @media not|only mediatype a ...
CSS3 @media 查询（制作响应式布局）
这里简单说明一下@media 查询. 详细说明文档:http://www.runoob.com/cssref/css3-pr-mediaquery.html 使用 @media 查询,你可以针对不同的 ...

CSS3-多媒体查询

CSS3-多媒体查询相关推荐

最新文章

热门文章