媒体查询@media

2018-08-14 本文已影响0人 molly的红草帽

1、什么是媒体查询？

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

2、媒体查询与弹性盒布局的适用情况

媒体查询：当页面的结构发生变化的话最好使用媒体查询。
弹性盒：如果只是宽高的变化，尽量使用弹性盒

3、语法

//注意要在header里面写上
<meta name="viewport" content="width=device-width, initial-scale=1.0">

法一：

@media mediatype and|not|only (media feature) {CSS-Code;}

法二：

<link rel="stylesheet" media="mediatype and | not | 
 only (media feature)" href="路径/XX.css"
//例子
<link rel="stylesheet" media="screen and (min-width=1100px)" href="路径/XX.css"

4、mediatype

image.png

5、三栏布局--》两栏布局--》一栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        html,body{height:100%; flex-wrap:wrap;} /*flex-wrap:wrap;因为后面有设width：100%*/
        body{display:flex;}
        .box1{background: #f00;}
        .box2{background: #0f0;}
        .box3{background: #00f;}
        @media screen and (min-width:1100px){ /*三栏布局*/
            .box1{width: 100px;} /*没有写高度，由内容撑起来*/
            .box2{flex:1; }
            .box3{width: 100px;}
        }
        @media screen and (min-width:800px) and (max-width:1100px){ /*二栏布局*/
            .box1{width: 100px;}
            .box2{flex:1; }
            .box3{width: 100%;}
        }
        @media screen and (max-width:800px) { /*一栏布局*/
            .box1,.box2,.box3{width: 100%;}
        }
    </style>
</head>
<body>
    <div class="box1">首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。</div>
    <div class="box2">首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。</div>
    <div class="box3">首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。</div>
</body>
</html>