精华内容
下载资源
问答
  • @media与@media screen区别

    千次阅读 2018-10-24 15:14:48
    @media与@media screen区别 @media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,那么就用@media ,否则,就用@media screen。 不过这只是笼统的做法,其实如果把...

    @media与@media screen区别

    @media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,那么就用@media ,否则,就用@media screen。

    不过这只是笼统的做法,其实如果把“screen”换为“print”,写为@media print,那么该css就可用到打印设备上了,但要注意,@media print声明的css只能在打印设备上有效。

    Media Queries工作方式:

    在media属性里:

    1. ● screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
    1. ● and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
    1. ● (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media features部分

    1、种是直接在link中判断设备的尺寸,然后引用不同的css文件:

    1. <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

    意思是当屏幕的宽度大于等于400px的时候,应用styleA.css

    1. <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

    意思是当屏幕的宽度大于600小于800时,应用styleB.css

    2、另一种方式,即是直接写在 style 标签里:

    1. @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
    2.   .class {
    3.     background: #ccc;
    4.   }
    5. }

    写法是前面加@media,其它跟link里的media属性相同。

    Media使用说明举例

    1、前端响应式布局最出名的框架莫过于 Bootstrap

    下面我们看看min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢,那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768,这里有等于,所以我们判断更小的设备用@media (max-width: 767px)这边表示<=767就不会有冲突了。

    1. /* 小屏幕(平板,大于等于 768px) */
    2. @media (min-width: @screen-sm-min) { ... }
    3.  
    4. /* 中等屏幕(桌面显示器,大于等于 992px) */
    5. @media (min-width: @screen-md-min) { ... }
    6.  
    7. /* 大屏幕(大桌面显示器,大于等于 1200px) */
    8. @media (min-width: @screen-lg-min) { ... }


    2、自适应代码

    1. @media (min-width: 768px){ //>=768的设备 }
    2. @media (min-width: 992px){ //>=992的设备 }
    3. @media (min-width: 1200){ //>=1200的设备 }

    注意下顺序,如果你把@media (min-width: 768px)写在了下面那么就是错误的!!!

    1. @media (min-width: 1200){ //>=1200的设备 }
    2. @media (min-width: 992px){ //>=992的设备 }
    3. @media (min-width: 768px){ //>=768的设备 }

    因为如果是1440,由于1440>768那么你的1200就会失效。
    所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

    1. @media (max-width: 1199){ //<=1199的设备 }
    2. @media (max-width: 991px){ //<=991的设备 }
    3. @media (max-width: 767px){ //<=768的设备 }

    3、高级的混合应用

    1.  @media screen and (min-width:1200px){} 
    2.  @media screen and (min-width: 960px) and (max-width: 1199px) {  }
    3.  @media screen and (min-width: 768px) and (max-width: 959px) {  }
    4.  @media only screen and (min-width: 480px) and (max-width: 767px){  } 
    5.  @media only screen and (max-width: 479px) {  }
    1. /* Large desktop */
    2. @media (min-width: 1200px) { ... } 
    3. /* Portrait tablet to landscape and desktop */
    4. @media (min-width: 768px) and (max-width: 979px) { ... } 
    5. /* Landscape phone to portrait tablet */
    6. @media (max-width: 767px) { ... } 
    7. /* Landscape phones and down */
    8. @media (max-width: 480px) { ... }

    基于视窗宽度的媒体查询断点设置

    前提设置body的字体为100%。其具有一个简单的计算公式:100% = 16px = 1em = 14pt

    1. /*Viewport = 1920px*/
    2. @media screen and (max-width: 120em){}
    3. /*Viewport = 1680px*/
    4. @media screen and (max-width: 105em){}
    5. /*Viewport = 1400px*/
    6. @media screen and (max-width: 87.5em){}
    7. /*Viewport = 1200px*/
    8. @media screen and (max-width: 75em){}
    9. /*Viewport = 1024px*/
    10. @media screen and (max-width: 64em){}
    11. /*Viewport = 960px*/
    12. @media screen and (max-width: 60em){}
    13. /*Viewport = 800px*/
    14. @media screen and (max-width : 50em){}
    15. /*Viewport = 768px*/
    16. @media screen and (max-width : 48em){}
    17. /*Viewport = 600px*/
    18. @media screen and (max-width: 37.5em){}
    19. /*Viewport = 480px*/
    20. @media screen and (max-width: 30em){}
    21. /*Viewport = 320px*/
    22. @media screen and (max-width: 20em){}
    23. /*Viewport = 240px*/
    24. @media screen and (max-width: 15em){}
    25. /*
    26. High Resolution/Retina Display Media Queries
    27. */
    28. /*Pixel Density 3*/
    29. @media(-webkit-min-device-pixel-ratio: 3),(min-resolution: 192dpi){}
    30. /*Pixel Density 2*/
    31. @media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){}
    32. /*Pixel Density 1.5*/
    33. @media(-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 124.8dpi){}
    34. /*Pixel Density 1.25*/
    35. @media(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi){}
    36. /*
    37. Printed Style Media Queries
    38. */
    39. /*Print Resolution 300 dpi*/
    40. @media print and (min-resolution: 300dpi){}
    41. /*Print Resolution 144 dpi*/
    42. @media print and (min-resolution:144dpi){}
    43. /*Print Resolution 96 dpi*/
    44. @media print and (min-resolution:96dpi){}
    45. /*Print Resolution 72 dpi*/
    46. @media print and (resolution:72dpi){}
    展开全文
  • 在网站自适应设计中,@media与@media screen是必须用到的css代码,可能大家对此并不陌生。但是大家又知不知道@media与@media screen的区别在哪呢?在自适应设计中你是用@media还是用@media screen?你知不知道两者...

    在网站自适应设计中,@media与@media screen是必须用到的css代码,可能大家对此并不陌生。但是大家又知不知道@media与@media screen的区别在哪呢?在自适应设计中你是用@media还是用@media screen?你知不知道两者产生的结果有什么不同呢?这些问题我想很多人都不清楚吧。本文便通过实例给你说说@media与@media screen的区别,主要是告诉你它们产生的效果区别在哪。

    @media与@media screen手机网页区别

    好吧,理论方面暂时放在一边,先看看两者产生的手机网页视图有什么不同。
    @media与@media screen手机网页
    上图看出,没有任何区别。没错,确实没有任何区别,因为@media与@media screen的css在手机设备里都是有效的。

    @media与@media screen打印网页区别

    两者在手机设备上没有区别,在打印设备上是怎样的呢?看看如下截图。

    @media打印网页:
    在这里插入图片描述

    @media screen打印网页
    在这里插入图片描述

    很明显,两者的打印效果是不同的。

    至此,我们应该明白了@media与@media screen的区别了吧,没错,@media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,这就是它们的区别了。

    知道了它们的区别,我们就应该懂得如何使用它们了。如果css需要用在打印设备里,那么就用@media ,否则,就用@media screen。

    不过这只是笼统的做法,其实如果把“screen”换为“print”,写为@media print,那么该css就可用到打印设备上了,但要注意,@media print声明的css只能在打印设备上有效哦。

    通过此实例的见解,我们可以举一反三,对@media的用法就能更易接受了。下面的知识扩展可以让你更深入地了解@media的各种用法。

    知识扩展

    @media only screen and
    

    only(限定某种设备)
    screen 是媒体类型里的一种
    and 被称为关键字,其他关键字还包括 not(排除某种设备)

    / 常用类型 /
    类型 解释
    all 所有设备
    braille 盲文
    embossed 盲文打印
    handheld 手持设备
    print 文档打印或打印预览模式
    projection 项目演示,比如幻灯
    screen 彩色电脑屏幕
    speech 演讲
    tty 固定字母间距的网格的媒体,比如电传打字机
    tv 电视

    screen一般用的比较多,下面是我自己的尝试,列出常用的设备的尺寸,然后给页面分了几个尺寸的版本。

    / 常用设备 /设备 屏幕尺寸
    显示器 1280 x 800
    ipad 1024 x 768
    Android 800 x 480
    iPhone 640 x 960

    两种方式

    a:

    <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
    

    意思是当屏幕的宽度大于600小于800时,应用styleB.css

    b:

    @media screen and (max-width: 600px) { /当屏幕尺寸小于600px时,应用下面的CSS样式/
    	.class {
    	​		 background: #ccc;
    			}
    }
    

    device-aspect-ratio

    device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:

    @media only screen and (device-aspect-ratio:4/3)
    

    作者:ZombieBrandg
    链接:https://www.jianshu.com/p/982c9f2d186f
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • CSS中 @media screen 和@media only screen 和@media 的不同@media screen and (max-width:632px)This one is saying for a device with a screen and a window with max-width of 632px apply the style....

    CSS中 @media screen 和@media only screen 和@media 的不同

    @media screen and (max-width:632px)

    This one is saying for a device with a screen and a window with max-width of 632px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other available media types the most common other one being print.

    @media (max-width:632px)

    This one is saying for a window with a max-width of 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.

    @media only screen and (max-width:632px)

    The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

    展开全文
  • 在网站自适应设计中,@media与@media screen是必须用到的css代码,可能大家对此并不陌生。但是大家又知不知道@media与@media screen的区别在哪呢?在自适应设计中你是用@media还是用@media screen?你知不知道...

    在网站自适应设计中,@media与@media  screen是必须用到的css代码,可能大家对此并不陌生。但是大家又知不知道@media与@media  screen的区别在哪呢?在自适应设计中你是用@media还是用@media  screen?你知不知道两者产生的结果有什么不同呢?这些问题我想很多人都不清楚吧。本文便通过实例给你说说@media与@media  screen的区别,主要是告诉你它们产生的效果区别在哪。

    @media与@media  screen手机网页区别

    好吧,理论方面暂时放在一边,先看看两者产生的手机网页视图有什么不同。

    @media与@media  screen手机网页

    @media与@media  screen手机网页

    上图看出,没有任何区别。没错,确实没有任何区别,因为@media与@media  screen的css在手机设备里都是有效的。

    @media与@media  screen打印网页区别

    两者在手机设备上没有区别,在打印设备上是怎样的呢?看看如下截图。

    @media打印网页

    @media打印网页

    @media  screen打印网页

    @media  screen打印网页

    很明显,两者的打印效果是不同的。

    至此,我们应该明白了@media与@media  screen的区别了吧,没错,@media  screen的css在打印设备里是无效的,而@media在打印设备里是有效的,这就是它们的区别了。

    知道了它们的区别,我们就应该懂得如何使用它们了。如果css需要用在打印设备里,那么就用@media ,否则,就用@media  screen。

    不过这只是笼统的做法,其实如果把“screen”换为“print”,写为@media  print,那么该css就可用到打印设备上了,但要注意,@media  print声明的css只能在打印设备上有效哦。

    通过此实例的见解,我们可以举一反三,对@media的用法就能更易接受了。下面的知识扩展可以让你更深入地了解@media的各种用法。

    知识扩展

    @media only screen and

    only(限定某种设备)
    screen 是媒体类型里的一种
    and 被称为关键字,其他关键字还包括 not(排除某种设备)

    /* 常用类型 */
    类型 解释
    all 所有设备
    braille 盲文
    embossed 盲文打印
    handheld 手持设备
    print 文档打印或打印预览模式
    projection 项目演示,比如幻灯
    screen 彩色电脑屏幕
    speech 演讲
    tty 固定字母间距的网格的媒体,比如电传打字机
    tv 电视

    screen一般用的比较多,下面是我自己的尝试,列出常用的设备的尺寸,然后给页面分了几个尺寸的版本。

    /* 常用设备 */
    设备 屏幕尺寸
    显示器 1280 x 800
    ipad 1024 x 768
    Android 800 x 480
    iPhone 640 x 960

    两种方式

    a:

    • <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

    意思是当屏幕的宽度大于600小于800时,应用styleB.css

    b:

    • @media screen and (max-width: 600px) {  /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
    •   .class {
    •     background: #ccc;
    •   }
    • }

    device-aspect-ratio

    device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:

     
    • @media only screen and (device-aspect-ratio:4/3)
    • 原文链接:http://www.webkaka.com/tutorial/zhanzhang/2015/090643/
    展开全文
  • 利用 @media screen 实现网页布局的自适应,@media screen and 开始研究响应式web设计,CSS3 Media Queries是入门。 Media Queries 其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。 ...
  • 应该说两者在Responsive Layout上面展现效果是一样的 但是只有 @media这个指令在用户打印的时候有效,具体怎样需要测试 其实侧面说明了 @media更有效吧,如果有不对的可以指出来 ...
  • 增加一点,想要在ie8以下使用@media标签,需要引用respond.min.js 文章目录[隐藏] 了解Media Queries @media与@media screen区别 Media Queries工作方式: Media使用说明举例 基于视窗宽度的媒体查询断点设置.....
  • 利用@media与@media screen进行响应式布局 文章目录[隐藏] 了解Media Queries @media与@media screen区别 Media Queries工作方式: Media使用说明举例 基于视窗宽度的媒体查询断点设置 在互联网的...
  • @media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : landscape) { /*横屏*/ } 指定手机端高度样式: @media screen and (max-width: 750px) @media screen and (min-width: 720...
  • 用@media做自适应的css

    万次阅读 2021-01-11 07:58:08
    @media自适应css @media可以更具查询条件(查询条件的true或者false)切换不同的css样式 @media type and (属性) / @media not type and (属性) type screen(屏幕) print(打印机) tty(打字机) 等等 属性...
  • sass @media

    千次阅读 2016-02-28 15:11:59
    @media Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面。来看一个简单示例: ...
  • scss-@media

    2019-10-06 08:45:39
    首先回顾下css3中的@media 定义和使用: 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需...
  • css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS。  @media sMedia { sRules } 1.1、示例 // 设置显示器用字体尺寸 @media screen { BODY {font-size:12pt; } } // ...
  • 最近做了一个响应式网站,主要用到了CSS3里的@media screen,今天无意用IE8打开发现网站竟然不正常,才知道原来IE8不兼容响应式@media screen呢。下面跟大家分享下青岛星网的解决方法。 我看了下IE6-IE8下加载网站...
  • HTML @media 响应式布局

    千次阅读 2018-08-28 00:25:28
    @media与@media screen区别 @media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,那么就用@media ,否则,就用@media screen。 不过这只是笼统的做法,其实如果把...
  • css中的@media用法总结

    万次阅读 2018-09-20 19:11:46
    //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" ...
  • 多媒体查询@media

    千次阅读 2019-08-27 01:34:35
    使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 @media not|only mediatype and (expressions) { /* CSS代码写在这里 */ ...
  • 主要介绍了详解CSS3中@media的实际使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下
  • 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会...
  • CSS3@media媒体查询

    2019-03-04 16:26:42
    CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对...
  • bootstrap @media尺寸

    千次阅读 2018-11-20 16:34:13
    @media screen and (min-width:1200px){ } 二、1100分辨率(大于960px,小于1199px) @media screen and (min-width: 960px) and (max-width: 1199px) { } 三、880分辨率(大于768px,小于959px) @media screen ...
  • js 更改@media

    千次阅读 2019-06-05 10:48:17
    js更改@media var style = document.createElement('style'); style.innerHTML = "@media print {.panel {border: thin solid black;}}"; window.document.head.appendChild(style);
  • 关于@media优先级问题

    千次阅读 2017-08-02 14:56:50
    经常需要使用@media查询屏幕大小来选择不同的css 有时候发现命名使用了@media重写css样式但是依然@media里面的样式失效。 原因在于css选择器优先级问题,后面的css样式优先级大于前面的。 解决办法: 原本的css...
  • @media css样式

    2015-09-06 16:32:19
    来源:百度经验 感谢作者 @midia一般在做响应式布局很有效果 @media (min-width: 768px){ //>=768的设备 } ...@media (min-width: 992px){ //>=992的设备 } ...注意下顺序,如果你把@media (min-width: 76
  • @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet...
  • @media的用法

    万次阅读 2017-03-27 11:05:13
    今天总结了一些@media的用法
  • 使用css3的@media属性可以实现页面响应式布局,下面有个不错的示例,大家可以参考下
  • @media遇到的坑

    千次阅读 2019-07-24 12:59:45
    @media媒体查询必须放在“要重的写样式”之后才能生效 如果是引入.css,也要在“要重的写样式”文件之后

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 586,367
精华内容 234,546
关键字:

@media