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