CSS —— 多媒体查询

前端杂货铺

已于 2022-03-26 18:30:54 修改

阅读量3.1k

点赞数 3

分类专栏： Web 文章标签： javascript 前端 css3

于 2022-03-26 18:30:18 首次发布

本文链接：https://blog.csdn.net/qq_45902692/article/details/123760352

版权

Web 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

一、媒体类型

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>