一、媒体类型
- 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>
不积跬步无以至千里 不积小流无以成江海
