CSS —— 多媒体查询

一、媒体类型

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

二、媒体查询的使用方法

媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。

语法：@media 媒体类型and （媒体特性）{你的样式}

最大宽度 max-width：媒体类型小于或等于指定的宽度时，样式生效（很常用）。

 // 当屏幕小于或等于 400px 时,页面中的 .box 都将被隐藏。@media screen and (max-width: 400px) {.box {display: none;}}

最小宽度 min-width：媒体类型大于或等于指定宽度时，样式生效。

 // 当屏幕大于或等于 1000px 时，容器 .box 的宽度为 400px。@media screen and (min-width: 1000px) {.box {width: 400px;}}

多个媒体特性使用：关键词 and 将多个媒体特性结合在一起。

 //当屏幕大于 700px 小于 1000px 时，.box 的宽度为 500px。@media screen and (min-width: 700px) and (max-width: 1000px) {.box {width: 500px;}}

not关键字：用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。ot 关键词表示对后面的表达式执行取反操作。

 //在除打印设备和设备宽度小于 1200px 下所有设备中，容器 .box 的宽度为 500px。@media not print and (max-width: 1200px) {.box {width: 500px;}}

三、使用弹性盒子创建响应式页面

大于800px:

px-800px:

小于600px:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex响应式页面</title><style>.flex-container{display: flex;flex-flow: row wrap;font-weight: bold;text-align: center;}.flex-container > *{padding: 10px;flex: 1 100%;}.main{text-align: left;background: cornflowerblue}.header{background: coral;}.footer{background: lightgreen;}.aside1{background:moccasin;}.aside2{background: violet;}@media all and (min-width:600px){.aside{flex: 1 auto;}}@media all and (min-width:800px){.main{flex: 3 0px;}.aside1{order: 1;}.main{order: 2;}.aside2{order: 3;}footer{order: 4;}}</style>
</head>
<body><div class="flex-container"><header class="header">头部</header><article class="main"><p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。</p></article><aside class="aside aside1">边栏1</aside><aside class="aside aside2">边栏2</aside><footer class="footer">底部</footer></div>
</body>
</html>

不积跬步无以至千里不积小流无以成江海

CSS —— 多媒体查询相关推荐

HTML引入媒体查询CSS,CSS3 多媒体查询
CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则. 例如:你可以针对不同的媒体类型(包括显示器.便携设备.电视机,等等)设置 ...
css多媒体竖屏,css3 媒体查询方向：横屏竖屏教程
大家好,今天给大家分享的是css3 媒体查询方向:横屏竖屏教程,希望大家喜欢. 说道媒体查询,很多人会感觉陌生,但是对于做响应式开发的同学来说,那是再熟悉不过了. 结合CSS媒体查询,可以创建适应不同 ...
CSS3——多媒体查询属性
多媒体查询语法 @media not|only mediatype and (expressions) { CSS-Code; } not: not是用来排除掉某些特定的设备的,比如 @media n ...
css媒体查询（手机、平板、PC）
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕手机 (<7 ...
响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
银行自助设备详细介绍（二）——多媒体查询机
上次简单对银行个人自助设备进行了分类说明.现在开始对每种设备作进一步分析说明. 涉及设备的硬件.软件结构以及相关的一系列知识. 多媒体查询机--顾名思义,就是一台多媒体电脑.主要用于完成非现金类银行个 ...
IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
CSS媒体查询区分iPhone 6. iPhone8.iPhone8 Plus和iPhoneX /*iPhone6和iPhone8*/ @media only screen and (device-w ...
css媒体查询的区间_CSS媒体查询
css媒体查询的区间 At-media queries are conditions in your stylesheet. The style rules they contain are appl ...

CSS —— 多媒体查询

一、媒体类型

二、媒体查询的使用方法

三、使用弹性盒子创建响应式页面

CSS —— 多媒体查询相关推荐

最新文章

热门文章