精华内容
下载资源
问答
  • 媒体查询

    2020-03-10 23:19:13
    媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性...

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

    	  	 语法:
    	   		@media all and (min-width:320px) and (max-width:1080px){ 
    				body { background-color:blue;}
    	    	}
    	    	
    
    
    		媒体类型:常用的有   all  screen;
    		检测媒体特性的表达式:(min-width:320px) and (max-width:1080px)
    		
    		and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
    
    
    		检测的媒体特性:width 、height、color、font-size、float 、display...
    		
    	常见适配范围:
    		设备范围
    		默认样式    注意:默认样式要写在最前面
    		/* 打印样式 */
    			@media print {}
    		/* 手机等小屏幕手持设备 */
    			@media screen and (min-width: 320px) and (max-width: 480px) {}
    		/* 平板之类的宽度 1024 以下设备 */
    			@media only screen and (min-width: 321px) and (max-width: 1024px) {}
    		/* PC客户端或大屏幕设备: 1028px 至更大 */
    			@media only screen and (min-width: 1029px) {}
    		/* 竖屏 */
    			@media screen and (orientation:portrait) {对应样式}
    		/* 横屏 */
    			@media screen and (orientation:landscape){对应样式}
    			
    
    		原理:检测媒体查询的条件:来决定显示什么样式的;
    			  当当前的设备或者浏览器宽度满足你的表达式的条件时,他也会以你当前的css来显示样式
    			  
    		响应式:响应式布局
    			两个方案:
    					先设计pc端,再设计移动端
    					
    					先设计移动端,再设计pc端
    		
    		
    		
    		媒体查询 :是一个技术 、是一个方法;可以实现响应式布局的方法;
    
    展开全文
  • CSS3 多媒体查询

    2020-12-13 20:34:12
    CSS3 多媒体查询 CSS2 多媒体类型 ...媒体查询可用于检测很多事情,例如: viewport(视窗) 的宽度与高度 设备的宽度与高度 朝向 (智能手机横屏,竖屏) 。 分辨率 目前很多针对苹果手机,Android 手机,平板等设备
  • HTML5媒体查询

    2015-09-08 22:11:26
    HTML5媒体查询
  • CSS媒体查询

    2019-05-03 11:16:17
    一.CSS媒体查询概念: 1.css媒体查询允许我们基于浏览器网站的设备的特性来应用不用的样式申明,比如通过视口的宽度 2.操作方式: 对设备提出询问(称作表达式)开始,如果表达式结果为真,媒体查询中的CSS被应用, ...

    一.CSS媒体查询概念:

    1.css媒体查询允许我们基于浏览器网站的设备的特性来应用不用的样式申明,比如通过视口的宽度

    2.操作方式:

    对设备提出询问(称作表达式)开始,如果表达式结果为真,媒体查询中的CSS被应用,

    如果表达式结果为假,媒体查询内的CSS将被忽略

    3.常用名词:

    (1)@media:

    以@media开头来表示这是一条媒体查询语句,紧跟在@media后面的是一个或多个表达式,可以判别为真或假

    (2)screen:

    在创建媒体查询时,必须以媒体类型(此处为screen)作为第一个表达式

    相对应的有:print(打印机)、braille(盲文)、或者all(全部)等其他类型

    (3)and:

    and是一个关键字,表达式有多个表达式,screen是第一个表达式,and后为另一个表达式。

    需前后表达式都为真时,整条查询结果才为真;

    与and对应的关键字有:or、not

    (4)(min-width:150px):

    所有表达式都应包含在括号内,除非它只是一个单词的媒体类型表达式(如screen、print等)

    min-表示大于等于,max-表示小于等于

    (5){ }:

    在花括号里面的内容表示整条媒体查询结果为真的CSS样式

    二.操作代码实例:

    1.需要实现效果:尺寸变色

    根据屏幕尺寸改变背景颜色:

    宽度<500 红色;

    宽度在500-8000 绿色;

    宽度在800-1000 蓝色;

    宽度>1000 紫色

    2.代码示例:

    	 <style>
      		  @media screen and (max-width: 500px) {
           		 body{
              		  background-color: red;
            		}
       		 }
       		 @media screen and (min-width: 500px) and (max-width: 800px) {
          		  body{
             		   background-color: green;
            		}
       		 }
       		 @media screen and (min-width: 800px) and (max-width: 1000px) {
          		  body{
               		 background-color: blue;
           		 }
       		 }
       		 @media screen and (min-width: 500px) {
          		  body{
              		  background-color: purple;
           		}
       		 }
    		</style>
    
    展开全文
  • 媒体查询实践-源码

    2021-02-28 03:28:34
    媒体查询实践
  • js使用媒体查询

    千次阅读 2020-03-20 16:07:23
    前言:有时候,我们需要根据媒体查询,判断用户窗口的改变,从而控制一些代码的变化。样式的改变,通过CSS3的媒体查询;行为和功能的改变使用JS的媒体查询。 一、定义和用法 matchMedia()返回一个新的...

     前言:有时候,我们需要根据媒体查询,判断用户窗口的改变,从而控制一些代码的变化。样式的改变,通过CSS3的媒体查询;行为和功能的改变使用JS的媒体查询

    一、定义和用法

           matchMedia()返回一个新的MediaQueryList对象,表示指定的媒体查询字符串解析后的结果。

           matchMedia()方法的值可以是任何一个CSS@media规则的特性,如min-height,min-width,orientation等。

          MediaQueryList对象有以下两个属性:

    •  media:查询语句的内容。
    • matches:用于检测查询的结果,如果文档匹配media query列表,值为true,否则为false.

        MediaQueryList对象还可以监听事件。通过监听,在查询结果发生变化时,就调用指定的回调函数。

        还有两个方法:

    •  addListener():添加一个新的监听函数,查询结果改变时,调用指定回调;
    • removeListenter():删除之前添加的监听器,若不存在则不执行任何操作。

    二、js部分的运用

    //根据媒体查询,判断窗口大小start
    function myFunction(x) {
       if (x.matches) { // 媒体查询
            $('#pdf-popTF').css({ 'transform': 'translate(-20%,0px) scale(' + initial + ')' });
       } else {
            $('#pdf-popTF').css({ 'transform': 'translate(0%,0px) scale(' + null + ')' });
       }
     }
     var x = window.matchMedia("(max-width: 700px)")
     myFunction(x) // 执行时调用的监听函数
     x.addListener(myFunction) // 状态改变时添加监听器
     //根据媒体查询,判断窗口大小end

      注意:①如果只使用matches属性,此方式只能在页面首次或者重新加载时才生效,若要像CSS媒体查询一样随着页面大小改变做出反应,就要使用addListener()方法监听;

                 ②本文案例中,就是使用了ddListener()方法监听,为每个MediaQueryList对象添加监听器,每个对象查询结果只有true和false,当某个对象的查询结果改变时,都会调用指定回调函数mediaMatches,这样就可以在每次页面大小改变时执行某些行为。

    参考资料:JS媒体查询  https://www.cnblogs.com/Grani/p/10441810.html

                      Window matchMedia() 方法/菜鸟教程  https://www.runoob.com/jsref/met-win-matchmedia.html

    展开全文
  • 媒体查询使用 这是一个简单的网页,我在其中使用CSS进行媒体查询
  • 媒体查询同步 在 JavaScript 中重用 CSS 媒体查询。 动机 :所有媒体查询都存储在一个地方。 特别是在使用 LESS CSS 或 SASS 等工具时,设计断点可能在全局变量文件中定义。 使用此 JS 插件,无需在 JS 文件中重复 ...
  • 如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,并且媒体查询中的所有表达式为真。 CSS Code复制内容到剪贴板 <!– link元素中的CSS媒体查询 –> <link rel="stylesheet" media="(max...
  •  一说到响应式设计,肯定离不开媒体查询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关键字仅能应用于整个查询,而不能单独应用于一个独立的查询

    @media not all and (monochrome) { ... }
    //等价于
    @media not (all and (monochrome)) { ... }

    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中的媒体查询才是目前的最佳方法。

    转载于:https://www.cnblogs.com/lguow/p/9316598.html

    展开全文
  • CSS3媒体查询

    千次阅读 2019-10-24 18:40:08
    千万不要忘记设置meta标签,如果忘了写,浏览器是不识别媒体查询代码的; 媒体查询采用流式布局,站手机端的100%; pc端网页能不给元素设定固定宽高就不要设,这样易于维护;
  • Flutter 设备查询、媒体查询、横竖屏.pdf
  • 媒体查询资料整理

    2015-11-27 13:57:30
    媒体查询相关知识点,样式的引用以及媒体特性类型
  • 一个非常强大但易于使用的Sass媒体查询混合器,可让您创建几乎可以想象的任何媒体查询媒体查询mixin是一个功能强大的工具,可让您轻松创建比普通CSS尝试的复杂得多的媒体查询。 通过采用简单的媒体查询变量,还...
  • ie兼容媒体查询

    2018-06-04 10:03:33
    ie兼容媒体查询ie8------------------------------------------
  • MediaQueries:练习媒体查询
  • 注意:这些站点有多个媒体查询,用于以不同的视图宽度更改布局。 请确保尽可能多地钉牢。 期望: 从顶部开始(导航栏),然后向下进行。 该项目的目的是帮助您提高HTML / CSS技能,其中包括媒体查询。 不要在最后...
  • 媒体查询 @Media

    千次阅读 2016-09-19 14:04:07
    媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体...
  • 资源预览只有一个展示性页面,旨在展示css媒体查询的用法。屏幕展示内容会根据屏幕宽度自动匹配适应。 直接打开html文件夹中的html文件即可预览效果。
  • 苏宁首页适配1媒体查询布局
  • 主要介绍了CSS Media媒体查询,通过不同的媒介类型和浏览器兼容,媒体查询中宽高比,语法,逻辑操作等详细介绍了开发中需要使用媒体查询来平衡布局的代码操作,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 141,024
精华内容 56,409
关键字:

媒体查询