媒体查询_媒体查询media - CSDN
精华内容
参与话题
  • CSS3:媒体查询

    千次阅读 2016-05-03 18:55:33
    媒体查询增强了媒体类型方法,允许根据特定的设备特性应用样式,可以使网站呈现的样式适应不同的屏幕尺寸等。媒体查询包含一个媒体类型和0个或多个表述媒体特征的表达式。媒体查询可以用在style中或者样式表中,用在...

    媒体查询增强了媒体类型方法,允许根据特定的设备特性应用样式,可以使网站呈现的样式适应不同的屏幕尺寸等。媒体查询包含一个媒体类型和0个或多个表述媒体特征的表达式。媒体查询可以用在style中或者样式表中,用在style中的语法如下:

    <style>
    	@media logic type and (feature: value) {
    	  /* 目标CSS样式规则写在这里 */
    	}
    </style>
    例如:

    <style>
    	@media screen and (max-width: 600px) {
    	  .facet_sidebar {
    		display: none;
    	  }
    	}
    </style>
    也可以用在指向外部样式表的链接:

    <link rel="stylesheet" media="logic type and (feature: value)" href="your-stylesheet.css" />
    例如:

    <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
    当一个媒体查询为true,对应的样式表或样式规则将被应用。
    注意:使用了媒体查询的link标签对应的样式表,即使媒体查询返回false,任然会被下载,只是不会被应用。

    逻辑操作(logic)

    逻辑操作包括not、and和only,and操作符被用于融合多个媒体特征到一个媒体查询,not操作符用于否定整个媒体查询,only操作符用于确保旧的浏览器不读取余下的媒体查询。
    如果你使用了not或者only操作符,你必须指定一个特定的媒体类型。

    and

    and用于融合多个媒体特征,也可用于融合带有媒体类型的媒体特征。下面是一个使用了all媒体类型的媒体特征(all可以省略):
    @media (min-width: 700px) { ... }
    如果你仅希望应用这个样式到横向模式,你能用这样做:
    @media (min-width: 700px) and (orientation: landscape) { ... }
    现在上面的媒体查询将仅在宽度大于等于700px,且处理横向模式时才返回true。如果你希望这个样式仅应用到媒体类型screen,你能再添加一个and操作:
    @media screen and (min-width: 700px) and (orientation: landscape) { ...  }
    现在,上面的媒体查询仅应用到媒体类型为screen,宽度大于等于700px,且显示在横向模式上。

    逗号分隔列表

    当使用媒体查询的逗号分隔列表时,如果列表中的任何媒体查询为true,样式表都会被运用。在逗号分隔列表中的每个媒体查询都被作为独立查询对待,运用到一个媒体查询上的任何操作符都不影响其它的。
    例如,如果你想应用一套样式在宽度大于等于700px的设备上,或者采用横向模式的便捷式设备上,你可以这样:
    @media (min-width: 700px), handheld and (orientation: landscape) { ... }
    如果我使用的设备的屏幕宽度大于700px,媒体查询将返回true,样式将被运用。如果我使用的是横向的便捷式设备,第一个媒体查询返回false,但第二个媒体查询将返回true,样式任将被使用。

    not

    not操作符将媒体查询的结果取反,使用not操作符必须指定设备类型,并且not操作符仅能用于一个完整的媒体查询,例如:
    @media not all and (monochrome) { ... }
    这个媒体查询将被理解为:
    @media not (all and (monochrome)) { ... }
    而当使用逗号分隔列表时:
    @media not screen and (color), print and (color) { ... }
    将被理解为:
    @media (not (screen and (color))), print and (color) { ... }

    only

    only操作符用于防止老的不支持媒体查询的浏览器不读取余下的媒体查询,同时一并忽略链接的样式表:
    <link rel="stylesheet" media="only screen and (color)" href="example.css" />

    媒体类型(type)

    媒体类型指定媒体查询适用的设备。

    all

    所有设备适用。除非你用了not或者only操作,媒体类型默认为all。

    print

    适用于分页媒体(包括打印设备和其它将内容分离到多页的设备)和以打印预览模式在屏幕上查看的文档。

    screen

    主要指计算机屏幕。

    speech

    适用于语音同步器。
    注意:Firefox当前仅实现了print和screen媒体类型。

    媒体特征(feature)

    大部分的媒体特征都能添加"min-"和"max-"前缀,用于表示最小和最大。如果你使用一个媒体特征没有指定值,那么如果特征值为非0,表达式将返回true。

    color

    值:<color>
    媒体: visual
    接受min/max前缀: yes
    含义:表示输出设备每个颜色组件的比特数。如果设置不是一个彩色设备,值为0。
    例如:
    应用样式到所有彩色设备
    @media all and (color) { ... }
    应用样式到每个颜色组件至少4比特的设备
    @media all and (min-color: 4) { ... }

    color-index

    值:<integer>
    媒体: visual
    接受min/max前缀: yes
    含义:表示输出设备在颜色查找表中的条目数量。
    例如:
    应用样式到所有使用索引化颜色的设备
    @media all and (color-index) { ... }
    应用样式表到索引化颜色的设备,且至少256种颜色
    <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />

    aspect-ratio

    值:<ratio>
    媒体: visual,tactile
    接受min/max前缀: yes
    含义:形容输出设备的显示区域的长宽比。值由两个整数组成,使用"/"分隔,第一个值表示横向,第二个为纵向。
    例如:
    应用样式到长宽比至少为1的设备
    @media screen and (min-aspect-ratio: 1/1) { ... }

    device-aspect-ratio

    值:<ratio>
    媒体: visual,tactile
    接受min/max前缀: yes
    含义:形容输出设备的长宽比。值由两个整数组成,使用"/"分隔,第一个值表示横向,第二个为纵向。
    例如:
    应用样式到宽屏设备
    @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
    当设备长宽比为16:9或者16:10时应用该样式

    device-height

    值:<length>
    媒体: visual,tactile
    接受min/max前缀: yes
    含义:形容输出设备的高度(为整个屏幕或页的高度,而不仅仅是渲染区域)。
    例如:
    应用样式到设备高度小于800px的设备
    <link rel="stylesheet" media="screen and (max-device-height: 799px)" />

    device-width

    值:<length>
    媒体: visual,tactile
    接受min/max前缀: yes
    含义:形容输出设备的宽度(为整个屏幕或页的宽度,而不仅仅是渲染区域)。
    例如:
    应用样式到设备宽度小于800px的设备
    <link rel="stylesheet" media="screen and (max-device-width: 799px)" />

    display-mode

    值:显示模式,可选值为fullscreen、standalone、minimal-ui和browser
    媒体: visual,tactile
    接受min/max前缀: yes
    含义:基于现实模式的类型应用样式。
    例如:
    	@media all and (display-mode: fullscreen) {
    	  body {
    		margin: 0;
    		border: 5px solid black;
    	  }
    	}

    grid

    值:布尔类型
    媒体: visual,tactile
    接受min/max前缀: no
    含义:由输出设备为网格(grid)设备或者位图(bitmap)设备确定。如果设备为基于网格的设备,值为1,否则值为0。
    例如:
    @media handheld and (grid) and (max-width: 15em) { ... }

    height

    值:<length>
    媒体: visual,tactile
    接受min/max前缀: yes
    含义:描述输出设备渲染区域的高度。

    monochrome

    值:<integer>
    媒体: visual
    接受min/max前缀: yes
    含义:表示单色设备每像素的比特数。如果设备不是单色设备,值为0。
    例如:
    应用样式到所有单色设备:
    @media all and (monochrome) { ... }
    应用样式到每像素至少8比特的单色设备:
    @media all and (min-monochrome: 8) { ... }

    orientation

    值:landscape | portrait
    媒体: visual
    接受min/max前缀: no
    含义:表示视图是在landscape(宽大于高)或者portrait(高大于宽)模式。
    例如:
    应用样式到portrait模式:
    @media all and (orientation: portrait) { ... }

    resolution

    值:<resolution>
    媒体: bitmap
    接受min/max前缀: yes
    含义:表示输出设备的分辨率。分辨率可以表示为dpi(每英寸点数)或dpcm(每厘米点数)。
    例如:
    应用样式到至少300点每英寸像素的设备:
    @media print and (min-resolution: 300dpi) { ... }

    scan

    值:progressive | interlace
    媒体: tv
    接受min/max前缀: no
    含义:描述电视输出设备的扫描过程。
    例如:
    仅应用样式到渐进式扫描电视:
    @media tv and (scan: progressive) { ... }

    width

    值:<length>
    媒体: visual,tactile
    接受min/max前缀: yes
    含义:表示输出设备渲染区域的宽度。
    例如:
    如果你想应用样式到宽度大于20em的手持设备或者屏幕设备,你可以使用:
    @media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
    下面是使用样式到宽度大于8.5英寸的打印设备:
    <link rel="stylesheet" media="print and (min-width: 8.5in)"
        href="http://foo.com/mystyle.css" />
    下面是指定样式到屏幕宽度位于500px到800px之间的设备:
    @media screen and (min-width: 500px) and (max-width: 800px) { ... }


    展开全文
  • 媒体查询实现页面适配问题

    千次阅读 2019-05-23 11:36:18
    通常的网络页面都会应对浏览器实际页面大小去做一些页面布局的适配,今天小编通过一个demo来实现一个简单的...简单来讲媒体查询是基于视口宽度去做的一个判断,然后对应的去改变模块样式。 <!-- 这样的一行代...

    通常的网络页面都会应对浏览器实际页面大小去做一些页面布局的适配,今天小编通过一个demo来实现一个简单的导航栏以及内容的适配,就是通过查询页面实际宽度来做一个响应式的布局

    一、视口

    首先我们了解一下视口这个概念,视口在pc端就等于浏览器实际页面宽度,移动端视口默认是厂家所定义的一个固定值。简单来讲媒体查询是基于视口宽度去做的一个判断,然后对应的去改变模块样式。

      <!-- 这样的一行代码会使手机端视口根据其手机实际宽度来定义视口大小 -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    二、媒体查询demo

    • 语法
      这边案例就代表视口宽度在830px到1024时对应发生的变化
    @media (min-width: 830px) and (max-width: 1024px){
          /* 条件下样式的修改 */
    }
    
    • demo展示
      这边小编直接展示一下基本的适配demo,然后代码会放在最后面大家也可以看一下。
      demo说明: 一般的浏览器适当缩小,为了更好的体验会有一个布局的适配。

    全屏显示:
    全屏显示
    页面适当缩小:
    在这里插入图片描述
    最后手机端的一个适配(列表栏收缩隐藏按钮点击显示):
    在这里插入图片描述
    代码如下:

    <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">
        <link rel="stylesheet" href="header.css">
        <title>适配pc与手机</title>
    </head>
    <body>
        <!-- 头部导航栏 -->
        <div class="header">
            <div class="centre">
                <div class="logo">
                    <a href="" style="display:block; padding: 30px 60px ;overflow: hidden; background-color: gray"></a>
                </div>
                <div class="nav-list" id="navList">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </div>
                <div class="navigation" id="navbox">
                    <nav>
                        <ul>
                            <li class="active"><a href="">首页</a></li>
                            <li><a href="">首页</a></li>
                            <li><a href="">首页</a></li>
                            <li><a href="">首页</a></li>
                            <li><a href="">首页</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="content">
            <article class="text">文章内容</article>
            <article class="text">文章内容</article>
            <article class="text">文章内容</article>
            <article class="text">文章内容</article>
            <article class="text">文章内容</article>
            <article class="text">文章内容</article>
            <article class="text">文章内容</article>
            <article class="text">文章内容</article>
        </div>
        <script type="text/javascript" src="adaptive.js"></script>
    </body>
    
    let navList = document.getElementById('navList');
    let navbox = document.getElementById('navbox');
    let choose = true;
    navList.addEventListener('click',function(){
        if(choose){
            navbox.classList.add('navigationheight');
            choose = false;
        }
        else{
            navbox.classList.remove('navigationheight');
            choose = true;
        }
    },false);
    
    
    *{
        margin: 0;
        padding: 0;
    }
    a{
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-style: inherit;
        font-family: inherit;
        font-size: 100%;
        vertical-align: baseline;
        text-decoration: none;
        color: black;
    }
    article{
        display: block;
    }
    ol,ul{
        list-style: none;
    }
    /* 头部整体 */
    .header{
        height: 60px;
        width: 100%;
    }
    /* 页面实体区域 */
    .centre{
        overflow: hidden;
        width: 990px;
        margin: 0 auto;
    }
    /* 页面logo */
    .header .centre .logo{
        float: left;
    }
    .nav-list{
        margin-top: 26px;
        margin-right: 2px;  
        float: right;
        padding: 6px;
    }
    .line{
        margin: 2px 0;
        display: block;
        width: 12px;
        height: 2px;
        background-color: #6190e8;
    }
    /* nav栏 */
    nav{
        float: left;
        padding-left: 50px;
    }
    nav ul li{
        float: left;
        height: 100%;
        line-height: 60px;
        font-size: 16px;
        margin: 0 10px;
        position: relative;
    }
    /* 导航列表上的3条蓝色线条类 */
    .nav-list{
        display: none;
    }
    nav ul li.active::before{
        content: ' ';
        position: absolute;
        height: 3px;
        width: 100%;
        background-color: #6190e8; 
    }
    nav ul li a{
        display: block;
        height: 100%;
        padding: 0 15px;
    }
    /* 内容区域 */
    .content{
        width: 990px;
        margin: auto;
        display: flex; 
        flex-wrap: wrap; 
    }
    .text{
        width: 200px;
        height: 100px;
        background-color: skyblue;
        float: left;
        text-align: center;
        margin:0 15px 20px 0;
    }
    
    /* 像素小于1024px时改变 */
    @media (min-width: 830px) and (max-width: 1024px){
        /* 中心区域自适应满屏 */
        .centre{
            width: 880px;
            margin: 0 auto;
        }
        .content{
            width: 880px;
            margin: 0 auto;
        }
        .text{
            width: 250px;
            height: 200px;
        }
    }
    
    /* 手机端适配 */
    @media (max-width: 829px){
        .content{
            display: block;
            width: 100%;
        }
        .text{
            float: none;
            width: auto;
            height: auto;
            line-height: 200px;
            margin: 0 0 10px 0;
        }
        .centre{
            width: 100%;
        }
        /* 显示导航列表按钮 */
        .nav-list{
            display: block;
        }
        /* 隐藏手机端nav栏需点击打开 */
        .navigation{ 
            width: 100%;
            /* 高度设0溢出隐藏实现 */
            overflow: hidden;
            height: 0;
            position: absolute;
            margin-top: 60px;
            background-color: rgba(255, 255, 255, 0.5);
            transition: height .5s;
        }
        .navigationheight{
            height: 210px;
        }
        nav{
            padding: 0;
        }
        nav ul li{
            float: none;
            margin-bottom: 15px; 
            height: 30px;
            line-height: 30px;
        }
        nav ul li.active::before{
            content: ' ';
            height: 100%;
            width: 2px;
            background-color: #6190e8; 
        }
    }
    
    
    展开全文
  • 什么是媒体查询?

    千次阅读 2019-06-10 20:53:18
    媒体查询 媒体指的就是各种设备 (移动设备, PC设备) 查询指的是要检测属于哪种设备 媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览 复制代码学习媒体查询的核心是什么? 实现页面在不同...

    媒体查询

    媒体指的就是各种设备 (移动设备, PC设备)
    查询指的是要检测属于哪种设备
    
    媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览
    复制代码

    学习媒体查询的核心是什么?

    实现页面在不同设备下正常预览 [判断当前设备]

    媒体类型

    将不同的设备划分为不同的类型

    all (所有的设备)
    print (打印设备)
    screen (电脑屏幕,平板电脑,智能手机)
    复制代码

    媒体特性

    用来描述设备的特点,比如宽度,高度...
    复制代码
    • width 网页显示区域完全等于设置的宽度
    • height 网页显示区域完全等于设置的高度
    • max-width / max-height 网页显示区域小于等于设置的宽度
    • min-width / min-width 网页显示区域大于等于设置的宽度
    • orientation: portrait (竖屏模式) | landscape (横屏模式)

    语法关键字

    目的将媒体类型和媒体特性链接到一块,进行设备检测
    复制代码
    • and 可以将多个媒体特性链接到一块,相当于且
    • not 排除某个媒体特性 相当于非,可以省略
    • only 指定某个特定的媒体类型, 可以省略

    语法

    • 外联式语法
    <link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">
    复制代码
    - 内嵌式语法
          @media only screen  and (max-width: 420px) {
          	body {
          		background-color: red;
          	}
          }
          
          备注: 多个条件联写
          @media only screen and (width: 320px) and (height: 568px) {}
    复制代码
    展开全文
  • 一说到响应式设计,肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容 媒介类型  在CSS2中,...

      一说到响应式设计,肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容

    媒介类型

      在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在

      media属性用于为不同的媒介类型规定不同的样式

    screen         计算机屏幕(默认值)    
    tty            电传打字机以及使用等宽字符网格的类似媒介
    tv             电视类型设备(低分辨率、有限的屏幕翻滚能力)
    projection     放映机
    handheld       手持设备(小屏幕、有限的带宽)
    print          打印预览模式 / 打印页
    braille        盲人用点字法反馈设备
    aural          语音合成器
    all            适合所有设备

      真正广泛使用且所有浏览器都兼容的媒介类型是'screen'和'all'

    <style media="screen">
    .box{height: 100px;width: 100px; background-color: lightblue;}   
    </style>
    <div class="box"></div>

      媒体属性

      媒体属性是CSS3新增的内容,多数媒体属性带有“min-”和“max-”前缀,用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符

      [注意]媒体属性必须用括号()包起来,否则无效

      下表中列出了所有的媒体属性

         width | min-width | max-width
         height | min-height | max-height
         device-width | min-device-width | max-device-width
         device-height | min-device-height | max-device-height
         aspect-ratio | min-aspect-ratio | max-aspect-ratio
         device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
         color | min-color | max-color
         color-index | min-color-index | max-color-index
         monochrome | min-monochrome | max-monochrome
         resolution | min-resolution | max-resolution
         scan | grid

    【1】颜色(color)

      指定输出设备每个像素单元的比特值。如果设备不支持输出颜色,则该值为0

      向所有能显示颜色的设备应用样式表

    复制代码

    <style>
    @media (color){
        .box{height: 100px;width: 100px;background-color: lightblue;}   
    }   
    </style>
    <div class="box"></div>

    复制代码

    【2】颜色索引(color-index)

      颜色索引指定了输出设备中颜色查询表中的条目数量,如果没有使用颜色查询表,则值等于0

      向所有使用至少256个索引颜色的设备应用样式表(下列代码无显示,说明返回值为0)

    复制代码

    <style>
    @media (min-color-index: 256){
        .box{height: 100px; width: 100px;background-color: lightgreen;}   
    }   
    </style>   
    <div class="box"></div>

    复制代码

    【3】宽高比(aspect-ratio)

      宽高比描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例

      向可视区域是正方形或者是宽屏的设备应用样式表

    复制代码

    <style>
    @media (min-aspect-ratio: 1/1) {
        .box{height: 100px;width: 100px; background-color: lightgreen; }       
    }
    </style>
    <div class="box"></div>

    复制代码

    【4】设备宽高比(device-aspect-ratio)

      设备宽高比描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例

      向宽高比为16:9的特殊宽屏设备应用样式表

    复制代码

    <style>
    @media (device-aspect-ratio:16/9) {
        .box{ height: 100px;width: 100px; background-color: pink;}       
    }
    </style>
    <div class="box"></div>

    复制代码

    【5】设备高度(device-height)

      设备高度描述了输出设备的高度

      向显示在最小高度1000px的屏幕上的文档应用样式表

    复制代码

    <style>
    @media (min-device-height: 1000px) {
        .box{ height: 100px;width: 100px; background-color: pink;}       
    }
    </style>
    <div class="box"></div>

    复制代码

    【6】设备宽度(device-width)

      设备宽度描述了输出设备的宽度

      向显示在最小宽度1000px的屏幕上的文档应用样式表

    复制代码

    <style>
    @media (min-device-width: 1000px) {
        .box{ height: 100px; width: 100px;background-color: lightblue; }       
    }
    </style>
    <div class="box"></div>

    复制代码

    【7】网格(grid)

      网格判断输出设备是网格设备还是位图设备。如果设备是基于网格的(例如电传打字机终端或只能显示一种字形的电话),该值为1,否则为0  

      向非网格设备应用样式表

    复制代码

    <style>
    @media (grid:0) {
        .box{height: 100px;width: 100px; background-color: lightgreen;}       
    }
    </style>
    <div class="box"></div>

    复制代码

    【8】高度(height)

      高度描述了输出设备渲染区域(如可视区域的高度或打印机纸盒的高度)的高度

      向高度大于800px的可视区域的设备应用样式表

    复制代码

    <style>
    @media (min-height:800px) {
        .box{ height: 100px; width: 100px;background-color: lightgreen; }       
    }
    </style>
    <div class="box"></div>

    复制代码

    【9】宽度(width)

      宽度描述了输出设备渲染区域的宽度

      向宽度大于800px的可视区域的设备应用样式表

    复制代码

    <style>
    @media (min-width:800px) {
        .box{ height: 100px;width: 100px; background-color: lightgreen;}       
    }
    </style>
    <div class="box"></div>

    复制代码

    【10】黑白(monochrome)

      黑白指定了一个黑白(灰度)设备每个像素的比特数。如果不是黑白设备,值为0

      向非黑白设备应用样式表

    复制代码

    <style>
    @media (monochrome:0) {
        .box{height: 100px; width: 100px; background-color: lightgreen;}       
    }
    </style>
    <div class="box"></div>

    复制代码

    【11】方向(orientation)

      方向指定了设备处于横屏(宽度大于宽度)模式还是竖屏(高度大于宽度)模式

      值:landscape(横屏) | portrait(竖屏)

      向竖屏设备应用样式表

    复制代码

    <style>
    @media (orientation: portrait) {
        .box{height: 100px;width: 100px;background-color: lightgreen; }       
    }
    </style>
    <div class="box"></div>

    复制代码

    【12】分辨率(resolution)

      分辨率指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示

      [注意]关于屏幕三要素(屏幕尺寸、分辨率、像素密度)的相关内容移步至此

      向每英寸至少90点的设备应用样式

    复制代码

    <style>
    @media (min-resolution: 90dpi) {
        .box{height: 100px;width: 100px; background-color: lightgreen; }       
    }
    </style>
    <div class="box"></div>

    复制代码

    【13】扫描(scan)

      扫描描述了电视输出设备的扫描过程

      值: progressive | interlace

    语法

      媒体查询包含了一个CSS2已有的媒介类型(或称为媒体类型)和CSS3新增的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假

      当媒体查询为真时,相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假, <link> 标签上带有媒体查询的样式表仍将被下载(只不过不会被应用)

    <link rel="stylesheet" href="style.css" media="print">
    
    <div class="box"></div> 

      media并不是'print',所以媒体查询为假。但是,style.css文件依然被下载

    逻辑操作符

      操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

    and

      and操作符用来把多个媒体属性组合起来,合并到同一条媒体查询中。只有当每个属性都为真时,这条查询的结果才为真

      [注意]在不使用not或only操作符的情况下,媒体类型是可选的,默认为all

      满足横屏以及最小宽度为700px的条件应用样式表

    @media all and (min-width: 700px) and (orientation: landscape) { ... }

      由于不使用not或only操作符的情况下,媒体类型是可选的,默认为 all,所以可以简写为

    @media (min-width: 700px) and (orientation: landscape) { ... }

    or

      将多个媒体查询以逗号分隔放在一起;只要其中任何一个为真,整个媒体语句就返回真,相当于or操作符

      满足最小宽度为700像素或是横屏的手持设备应用样式表

    @media (min-width: 700px), handheld and (orientation: landscape) { ... }

    not

      not操作符用来对一条媒体查询的结果进行取反

      [注意]not关键字仅能应用于整个查询,而不能单独应用于一个独立的查询

    only

      only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

    media="only screen and (max-width:1000px)"{...}

      上面这行代码,在老式浏览器中被解析为media="only",因为没有一个叫only的设备,所以实际上老式浏览器不会应用样式

    media="screen and (max-width:1000px)"{...}

      上面这行代码,在老式浏览器中被解析为media="screen",它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式

      所以,在使用媒体查询时,only最好不要忽略

    方法

      window.matchMedia()方法用来检查CSS的mediaQuery语句

      [注意]IE9-浏览器不支持,可以使用第三方函数库matchMedia.js

    属性

      window.matchMedia()方法接受一个mediaQuery语句的字符串作为参数,返回一个MediaQueryList对象。该对象有media和matches两个属性

    media:返回所查询的mediaQuery语句字符串
    matches:返回一个布尔值,表示当前环境是否匹配查询语句

    var result = window.matchMedia('(min-width: 600px)');
    console.log(result.media); //'(min-width: 600px)'
    console.log(result.matches); // true

      可以根据matchMedia()方法的matches属性的不同结果,进行对应的设置

    复制代码

    var result = window.matchMedia('(min-width: 600px)');
    if (result.matches) {
      //
    }else{
     //
    }

    复制代码

      [注意]如果window.matchMedia无法解析mediaQuery参数,matches属性返回的总是false,而不是报错

    var result = window.matchMedia('123');
    console.log(result.matches);//false

    事件

      window.matchMedia方法返回的MediaQueryList对象有两个方法,用来监听事件:addListener方法和removeListener方法

    // 指定回调函数
    mql.addListener(mqCallback);
    // 撤销回调函数
    mql.removeListener(mqCallback);

      注意,只有mediaQuery查询结果发生变化时,才调用指定的回调函数

      所以,如果想要mediaQuery查询未变化时,就显示相应效果,需要提前调用一次函数

      下面这个例子是当页面宽度小于1000px时,页面背景颜色为品红色;否则为淡蓝色

    复制代码

    var mql = window.matchMedia("(min-width: 1000px)");
    mqCallback(mql);
    mql.addListener(mqCallback);
    function mqCallback(mql) {
      if (mql.matches) {
        document.body.background = 'pink';
      }else{
          document.body.background = 'lightblue';
      }
    }

    复制代码

    打印样式

      媒体查询的一个常用功能是打印样式的设置,主要是背景清除、字体颜色变黑等

    复制代码

    @media print{
        *,*:before,*:after{
            background:transparent!important;
            color:#000 !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }
        a,a:visited{
            text-decoration: underline;
        }
        a[href]:after{
            content:"(" attr(href) ")";
        }
        abbr[title]:after{
            content:"(" attr(title) ")";
        }
        a[href^="#"]:after,a[href^="javascript:;"]:after{
            content:"";
        }
        pre,blockquote{
            border: 1px solid #999;
            /*只有opera浏览器起作用,避免在元素内部插入分页符*/
            page-break-inside:avoid;
        }
        thead{
            display:table-header-group;
        }
        tr,img{
            page-break-inside:avoid;
        }
        img{
            max-width:100%!important;
        }
        p,h2,h3{
            /*元素内部发生分页时,最少保留3行*/
            orphans:3;
            /*元素内部发生分页时,元素顶部最少保留3行*/
            windows:3;
        }
        h2,h3{
            /*避免在元素后面插入一个分页符*/
            page-break-after:avoid;
        }
    }

    复制代码

    相对单位

      如果媒体查询@media使用的是相对单位,如rem,这里有一个坑需要着重强调一下

      一般而言,rem是相对于HTML的字体大小的。但是,由于媒体查询的级别非常高,它并不是HTML的子元素,不是相对于HTML,而是相对于浏览器的,而浏览器的默认字体大小是16px

      如果HTML设置字体大小为12px,设置如下媒体查询

    media="only screen and (max-width:1rem)"

      实际上,max-width等于16px,而不是12px

      而正是由于媒体查询是相对于浏览器的, 所以使用rem就没有必要,完全可以使用em来替代

    media="only screen and (max-width:1em)"

    媒体查询多用于响应式网页中。

    1.初始化设置:

    在HTML文件中,网页顶部<head></head>标签中插入一句话:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

     

    这句话在于对响应式网页做一个初始化设置,主要包括:

    name="viewport":标记显示设备为视口;

    width = device-width:宽度等于当前设备的宽度;

    initial-scale:初始的缩放比例(默认设置为1.0);
    minimum-scale:允许用户缩放到的最小比例(默认设置为1.0);
    maximum-scale:允许用户缩放到的最大比例(默认设置为1.0);   
    user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)。

     

    2.解决IE浏览器的兼容性问题:

    因为IE浏览器(IE8)不支持HTML5和CSS3中的media,所以要加载用于解决IE浏览器兼容性问题的JS文件:

     

    复制代码

    <!--[if lt IE 9]>
    
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    
    <![endif]-->

    复制代码

     

    两个<script></script>标签中的src属性所指向的文件链接地址为固定地址中的文件,直接异地引用就好,不用下载到本地引用。

    3.设置IE的渲染方式为最高:

    现在有很多人的IE浏览器都升级到IE9以上,这个时候会有很多诡异的事情发生,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8,为了防止这种情况,我们需要下面这段代码来让IE的文档模式永远都是最新:

     

    <meta http-equiv="X-UA-Compatible"content="IE=edge">

     

    当然还有一个更给力的写法:

     

    <meta http-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">

     

    这段代码后面加了一个chrome=1,这是由于Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果用户电脑安装这个chrome插件,就可让电脑内的IE浏览器规避版本因素,使用Webkit引擎及V8引擎进行排版及运算。当然如果用户没装这个插件,这段代码就会让IE浏览器以最高的文档模式展现效果。

    4.CSS3 media 媒体查询的写法:

    复制代码

     
    
    @media screen and (max-width: 960px){
    
    body{
    
    background:#000;
    
    }
    
    }

    复制代码

     

    这是一个media的标准写法,在CSS文件中,意为:当页面小于960px时执行以下CSS代码,具体内容暂不用管。

    对于上述代码中的screen,意为在告知设备在打印页面时使用衬线字体,在屏幕上显示时用无衬线字体。目前很多网站都会直接省略screen,从而不需要考虑用户打印网页的需求,所以又有这种写法:

    复制代码

     
    
    @media (max-width: 960px){
    
    body{
    
    background:#000;
    
    }
    
    }

    复制代码

     

    本着思维严谨的原则,个人不会采用这种写法。

    5.CSS3媒体查询主体代码组合:

     

    在响应式网页布局中需要持续运用媒体查询代码组合,主要作用在于判断所适配屏幕的宽度,并根据各种宽度条件套用不同的CSS样式。

    如当屏幕宽度等于960px时,将网页背景色变为红色:

     

    复制代码

    @media screen and (max-device-width:960px){
    
    body{
    
    background:red;
    
    }
    
    } 

    复制代码

    如当屏幕宽度最大为960px(小于960px)时,将网页背景色变为黑色:

    复制代码

    @media screen and (max-width: 960px){
    
         body{
    
            background:#000;
    
        }
    
    }    

    复制代码

    如当屏幕宽度最小为960px(大于960px)时,将网页背景色变为桔色:

    复制代码

    @media screen and (min-width:960px){
    
        body{
    
            background:orange;
    
        }
    
    }    

    复制代码

    更为常见的是混合使用,如当屏幕宽度介于960px和1200px之间时,将网页背景色变为黄色:

    复制代码

    @media screen and (min-width:960px) and(max-width:1200px){
      body{
    
        background:yellow;
    
      }
    }

    复制代码

    6.总体开发思路:

     

    使用CSS3中媒体查询的大致思路就是判断网页在不同设备中所处的宽度范围,这样的范围可能有三种(PC、平板、手机),也可能有四种(PC、平板、中大屏手机、小屏手机),当然也可能只需要两种(平板、手机,PC端单独开发一版时可不作为CSS3媒体查询的使用对象),并为各种宽度范围情况下的所需页面元素套用不同的CSS样式,从而适配各种设备。

    7.响应式网页开发中的宽度问题:

    在实际开发中,通常需要设置响应式网页宽度的最大值,一旦忽略最大宽度,臃肿或零散的网页布局都会造成视觉洪灾,也就是我们常说的看起来很low。
    另外谈谈目前显示设备中的网页宽度问题(由于篇幅问题,就不从工业革命开始扯了),目前最为常见的宽度基本上都是:大于或等于960px的PC端(1920px、1600px、1440px、1280px、1140px、960px)、960px至640px之间的平板端(768px、640px)以及640px以下的手机端(480px、320px),以上宽度存在已久,且显示设备中的网页宽度会长期处于这样的状态下,在响应式网页宽度设计上,基本从这几个尺寸考虑就已经足够。
    8.media媒体查询所有参数汇总:

    媒体查询器中还包含并不常用的相关功能,悉如示下:

     

    • width:浏览器可视宽度,

    • height:浏览器可视高度,

    • device-width:设备屏幕的宽度,

    • device-height:设备屏幕的高度,

    • orientation:检测设备目前处于横向还是纵向状态,

    • aspect-ratio:检测浏览器可视宽度和高度的比例(例如:aspect-ratio:16/9),

    • device-aspect-ratio:检测设备的宽度和高度的比例,

    • color:检测颜色的位数(例如:min-color:32就会检测设备是否拥有32位颜色),

    • color-index:检查设备颜色索引表中的颜色(他的值不能是负数),

    • monochrome:检测单色楨缓冲区域中的每个像素的位数(这个太高级,估计咱很少会用的到),

    • resolution:检测屏幕或打印机的分辨率(例如:min-resolution:300dpi或min-resolution:118dpcm),

    • grid:检测输出的设备是网格的还是位图设备。

    9.扩展——在CSS2中同样有媒体查询:

     

     

    media媒体查询并不是CSS3诞生之后的专用功能,早在CSS2开始就已经支持media,比如:

    在HTML文件中的<head></head>标签中写入这句:

     

    <link rel="stylesheet"type="text/css" media="screen"href="style.css">

    以上是CSS2实现的衬线用法,href属性中写入在某单一显示设备中链接的CSS文件,但仅供入门,

    如要判断移动设备是否为纵向放置的显示屏,可以这样写:

     

    <link rel="stylesheet" type="text/css"media="screen and (orientation:portrait)"href="style.css">

    如要让小于960px的页面执行指定的CSS样式文件,可以这样写:

     

    <link rel="stylesheet"type="text/css" media="screen and (max-width:960px)"href="style.css">

    当然,CSS2中的媒体查询方法放到现在并不推荐使用,最大的弊端在于这样会增加页面http的请求次数,增加页面负担,使用CSS3中的媒体查询才是目前的最佳方法。

    展开全文
  • 媒体查询

    2018-09-15 16:52:03
    一、媒体查询 默认值写在最前面,或者给媒体查询样式添加important. 如果要使用max-width,条件值比较大的写在前面。 如果要使用min-width,条件值比较小的写在前面。 @media all and (max-width:600px(条件值))...
  • 响应式网站设计(6)-媒体查询

    千次阅读 2018-08-22 19:02:49
    媒体查询 调试工具 在PC端样式设置完毕之后,我们需要适配移动端。首先,我们选择的设备类型不是某一种设备,而是responsive。另外,我们可以打开标签和媒体查询,如下图: 代码位置 媒体查询的代码为止,并...
  • 媒体查询介绍

    2020-10-03 00:15:38
    媒体查询 @media 参数: 针对屏幕的宽度:min-width max-width heigth 针对设备的宽度:min-device-width max-device-width device-heigth 针对设备的手持方向:orientation:landscape orientation:portrait … 一...
  • 媒体查询使用详解

    2019-12-21 19:48:14
    媒体查询的历史: 很多朋友认为媒体查询是CSS3新增,事实并非如此。媒体查询在CSS3之前早已存在,只是比较粗放一些,仅用来区分媒体的类型。 看如下简单代码实例: <link href="css/reset.css" rel="stylesheet...
  • media媒体查询,移动端适配尺寸大全

    万次阅读 2017-08-22 16:33:27
    media媒体查询,移动端适配尺寸大全 @media screen and(min-width: 320px)and(max-width: 359px){ html{ font-size: 12.8px; } }
  • 众所周知,网页前端开发时兼容IE一直是很头疼的问题。今天接到一个需要响应式布局的问题,主要还要兼容IE8,9。在网上搜索了以下解决方案,现记录如下。...以解决IE8及以下不支持媒体查询。它通过js来hack IE浏览器。
  • CSS3中的媒体查询(media query)是响应式设计的关键技术。媒体查询技术本质就是检测设备不同的尺寸来应用不同的样式,所以我们需要对尺寸检测有一个统一的参考标准。从最佳用户体验来看,材料化设计用户界面应该...
  • 1.and 后面一定要有空格~~~ 切记 2.meta 里面需要加上一句话: &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"...
  • 使用媒体查询 @media only screen and (min-width: 768px) 加载css样式的最小屏幕宽度 @media only screen and (max-width: 768px)加载css样式的最大屏幕宽度 /** 平板 **/ @media only screen and (min-width: 768...
  • 媒体查询就是可以根据设备显示器的特性(视口宽度、屏幕比例、设备方向-横向或者竖向等)为其设定CSS样式 为什么响应式设计需要媒体查询?因为没有CSS3的媒体查询模块,就不能针对设备特性(尤其是视口宽度)设置...
  • 常见的媒体查询自适应分辨率区间

    千次阅读 2018-04-02 11:41:19
    @charset "utf-8"; /* CSS Document */ /*手机总体*/ @media screen and (max-device-width: 1025px) { body{background:blue;} ...@media screen and (min-device-width: 1026px) { body{background:r...
  • CSS3之媒体查询(响应式布局)

    千次阅读 2018-09-02 12:58:25
    为啥有媒体查询: 移动设备的快速普及完全颠覆了Web设计领域。 用户不再仅在传统桌面系统上查看Web内容,他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。 Web设计人员的挑战是确保他们的网站不仅...
  • 媒体查询常见媒体尺寸和设置

    千次阅读 2018-10-31 13:57:35
    @media screen and (min-width:1200px){ ... }/* 大型设备(大台式电脑,1200px 起) */ @media screen and (min-width:992px){ ...... @media screen and (min-width:768px) { ... } /* 小型设备(平板电脑,7...
  • @media 媒体查询失效的原因总结

    千次阅读 2018-03-21 09:36:45
    1. 选择器的权限是否正确:div p{ font-size: 14px; }@media screen and (min-width:500px) and (max-width:1024px){ p{ font-size: 12px; } }例如:设置屏幕宽度在500px到1024px之间,p标签的文字大小为12px;...
  • 响应式网站-- css媒体查询 字体大小

    千次阅读 2016-10-13 17:07:42
    @media (min-width: 768px) { .category a{ font-size: 3.6rem; } } @media (min-width: 640px) and (max-width: 767px) { .category a{ font-size: 2.5rem; } }
  • 通过媒体查询可以为不同大小和尺寸的媒体定义不同的css,适合相应的设备显示;即响应式布局 @media screen and (min-width: 400px) and (max-width: 700px) { … } @media handheld and (min-width: 20em), ...
1 2 3 4 5 ... 20
收藏数 119,384
精华内容 47,753
关键字:

媒体查询