精华内容
下载资源
问答
  • css中media用法

    2015-04-27 21:50:13
    css2允许我们使用media的属性,例如使用screen和print,我也写过一篇关于使用CSS media的print来定义打印网页的样式的文章,关于css2media文章,推荐下w3c的。今天来说说CSS3的Media Queries。CSS3不仅仅...

    在css2中允许我们使用media的属性,例如使用screen和print,我也写过一篇关于使用CSS media的print来定义打印网页的样式的文章,关于css2中的media文章,推荐下w3c的。今天来说说CSS3的Media Queries。CSS3中不仅仅可以使用screen和print,而且支持多媒体多分辨率的样式表。

    我们先来看下CSS3 Media Queries的演示实例:css3media.html,来自于(Web Designer Wall)

    Max Width
    故名思意,就是最大宽度的意思,例如下面的代码是在宽度小于600px的时候才执行的。

    @media screen and (max-width: 600px) {
    .class {
    background: #ccc;
    }
    }
    也可以在link标签里面使用media属性,即下面的写法:


    Min Width
    跟Max Width相反,是最小宽度,例如当宽度大于900px的时候才运行下面的代码

    @media screen and (min-width: 900px) {
    .class {
    background: #666;
    }
    }

    也可以在link标签里面使用media属性,即下面的写法:


    Max和Min组合使用
    例如下面的代码是当屏幕的宽度在600px~900px之间才有效的:

    @media screen and (min-width: 600px) and (max-width: 900px) {
    .class {
    background: #333;
    }
    }
    Device Width
    这里的意思指的是设备的最大宽度,就是屏幕的宽度,像素,例如下面的代码:

    @media screen and (max-device-width: 480px) {
    .class {
    background: #000;
    }
    }

    //详情:W3CSchool.cc
    知道这些有啥用?
    我们了解了CSS3的Media Queries的使用方法,就可以简单的使用CSS来控制不同的浏览器甚至不同的设备(例如iPhone,iPad等)使用不同的CSS文件,或者不同的css代码。

    在IE中使用CSS3的Media Queries
    在IE家族中CSS3的Media Queries只用在IE8+的浏览器才得到支持,而中国国内份额最大的IE6、IE7是不支持的,不过我们可以通过下面推荐的三篇教程方法来解决这个问题。

    CSS Tricks – using jQuery to detect browser size
    The Man in Blue – using Javascript
    jQuery的 Media Queries 插件

    展开全文
  • 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)" ...

    1、head标签中引入

    //语法: @media mediatype and | not | only (media feature) { css-code; } 
    //也可以针对不同的媒体使用不同的stylesheets: 
    <!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">-->
    <link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)"> 

    上面将浏览器宽度小于等于800px时,应用 styleA 。

    2、css中引入

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

    上面是在设备屏幕宽度小于等于960px时应用css样式。

    混用:

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

    表示浏览器宽度大于等于960px且小于等于1200px时使用样式。

    3、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:检测输出的设备是网格的还是位图设备。

    描述
    aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
    color 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
    color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
    device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
    device-height 定义输出设备的屏幕可见高度。
    device-width 定义输出设备的屏幕可见宽度。
    grid 用来查询输出设备是否使用栅格或点阵。
    height 定义输出设备中的页面可见区域高度。
    max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
    max-color 定义输出设备每一组彩色原件的最大个数。
    max-color-index 定义在输出设备的彩色查询表中的最大条目数。
    max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
    max-device-height 定义输出设备的屏幕可见的最大高度。
    max-device-width 定义输出设备的屏幕最大可见宽度。
    max-height 定义输出设备中的页面最大可见区域高度。
    max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
    max-resolution 定义设备的最大分辨率。
    max-width 定义输出设备中的页面最大可见区域宽度。
    min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
    min-color 定义输出设备每一组彩色原件的最小个数。
    min-color-index 定义在输出设备的彩色查询表中的最小条目数。
    min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
    min-device-width 定义输出设备的屏幕最小可见宽度。
    min-device-height 定义输出设备的屏幕的最小可见高度。
    min-height 定义输出设备中的页面最小可见区域高度。
    min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
    min-resolution 定义设备的最小分辨率。
    min-width 定义输出设备中的页面最小可见区域宽度。
    monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
    orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度(横竖屏)。
    resolution 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
    scan 定义电视类设备的扫描工序。
    width 定义输出设备中的页面可见区域宽度。
    (max-width:599px) 
    (min-width:600px) 
    (orientation:portrait)  竖屏
    (orientation:landscape)  横屏
    (-webkit-min-device-pixel-ratio: 2)  像素比

    4、媒体类型

    描述
    all 用于所有设备
    aural 已废弃。用于语音和声音合成器
    braille 已废弃。 应用于盲文触摸式反馈设备
    embossed 已废弃。 用于打印的盲人印刷设备
    handheld 已废弃。 用于掌上设备或更小的装置,如PDA和小型电话
    print 用于打印机和打印预览
    projection 已废弃。 用于投影设备
    screen 用于电脑屏幕,平板电脑,智能手机等。
    speech 应用于屏幕阅读器等发声设备
    tty 已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备
    tv 已废弃。 用于电视和网络电视

    5、关键字

    and

    not:该关键字是用来排除某种制定的媒体类型

    only:用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。

    6、参考文档:

    http://www.w3cplus.com/content/css3-media-queries

    http://css.doyoe.com/

     

     

     

    展开全文
  • css中 @media 用法 总结

    2020-04-16 09:57:34
    //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" ...

    1、head标签中引入

    //语法: @media mediatype and | not | only (media feature) { css-code; } 
    //也可以针对不同的媒体使用不同的stylesheets: 
    <!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">-->
    <link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)"> 
    上面将浏览器宽度小于等于800px时,应用 styleA 。

    2、css中引入

    @media screen and (max-device-width:960px){
        body{background:red;}
    }
    上面是在设备屏幕宽度小于等于960px时应用css样式。

    混用:

    @media screen and (min-width:960px) and (max-width:1200px){
        body{background:yellow;}
    }
    表示浏览器宽度大于等于960px且小于等于1200px时使用样式。

    3、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:检测输出的设备是网格的还是位图设备。

    值    描述
    aspect-ratio    定义输出设备中的页面可见区域宽度与高度的比率
    color    定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
    color-index    定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
    device-aspect-ratio    定义输出设备的屏幕可见宽度与高度的比率。
    device-height    定义输出设备的屏幕可见高度。
    device-width    定义输出设备的屏幕可见宽度。
    grid    用来查询输出设备是否使用栅格或点阵。
    height    定义输出设备中的页面可见区域高度。
    max-aspect-ratio    定义输出设备的屏幕可见宽度与高度的最大比率。
    max-color    定义输出设备每一组彩色原件的最大个数。
    max-color-index    定义在输出设备的彩色查询表中的最大条目数。
    max-device-aspect-ratio    定义输出设备的屏幕可见宽度与高度的最大比率。
    max-device-height    定义输出设备的屏幕可见的最大高度。
    max-device-width    定义输出设备的屏幕最大可见宽度。
    max-height    定义输出设备中的页面最大可见区域高度。
    max-monochrome    定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
    max-resolution    定义设备的最大分辨率。
    max-width    定义输出设备中的页面最大可见区域宽度。
    min-aspect-ratio    定义输出设备中的页面可见区域宽度与高度的最小比率。
    min-color    定义输出设备每一组彩色原件的最小个数。
    min-color-index    定义在输出设备的彩色查询表中的最小条目数。
    min-device-aspect-ratio    定义输出设备的屏幕可见宽度与高度的最小比率。
    min-device-width    定义输出设备的屏幕最小可见宽度。
    min-device-height    定义输出设备的屏幕的最小可见高度。
    min-height    定义输出设备中的页面最小可见区域高度。
    min-monochrome    定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
    min-resolution    定义设备的最小分辨率。
    min-width    定义输出设备中的页面最小可见区域宽度。
    monochrome    定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
    orientation    定义输出设备中的页面可见区域高度是否大于或等于宽度(横竖屏)。
    resolution    定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
    scan    定义电视类设备的扫描工序。
    width    定义输出设备中的页面可见区域宽度。
    (max-width:599px) 
    (min-width:600px) 
    (orientation:portrait)  竖屏
    (orientation:landscape)  横屏
    (-webkit-min-device-pixel-ratio: 2)  像素比
    4、媒体类型

    值    描述
    all    用于所有设备
    aural    已废弃。用于语音和声音合成器
    braille    已废弃。 应用于盲文触摸式反馈设备
    embossed    已废弃。 用于打印的盲人印刷设备
    handheld    已废弃。 用于掌上设备或更小的装置,如PDA和小型电话
    print    用于打印机和打印预览
    projection    已废弃。 用于投影设备
    screen    用于电脑屏幕,平板电脑,智能手机等。
    speech    应用于屏幕阅读器等发声设备
    tty    已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备
    tv    已废弃。 用于电视和网络电视
    5、关键字

    and

    not:该关键字是用来排除某种制定的媒体类型

    only:用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。

    6、参考文档:

    http://www.w3cplus.com/content/css3-media-queries

    http://css.doyoe.com/

     
    ————————————————
    版权声明:本文为CSDN博主「fengyezi159」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/u010510187/article/details/82790963

    展开全文
  • 目录media的定义和使用给引用样式整体设置media给部分样式设置mediamedia条件总结 media的定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,...

    media的定义和使用

    使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

    当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

    给引用样式整体设置media

    格式为:media="条件"url('style.css') 条件

    1. <link> 标签上
    <link rel="stylesheet" href="style.css" media="screen and (max-width: 800px)">
    
    1. <style>样式表引用
    <style  media="print">
    
    1. @import样式引用
      在style.css样式表中引用:
    @import url(style1.css) sreem;
    

    给部分样式设置media

    格式为:@media 条件

    @media sreen and (min-width: 750px), sreen and (max-width: 750px) and (min-width: 1000px) {
    	color: red
    }
    

    逻辑运算符(logical operators)

    1. and:条件同时满足时
    @media sreen and (min-width: 750px) {
    	color: red
    }
    
    1. ,(逗号):条件1或者条件2满足时
    @media sreen and (min-width: 750px), sreen and (max-width: 750px) and (min-width: 1000px) {
    	color: red
    }
    
    1. not: 条件未满足时
    @media not sreen and (min-width: 750px) {
    	color: red
    }
    
    1. only: 浏览器不支持媒体查询即忽略后面样式
    @media only sreen and (min-width: 750px) {
    	color: red
    }
    

    media条件总结

    可以编写不同的媒体类型(Media Type),不同的媒体特性(Media features)设置媒体查询条件(Media queries), 符合此媒体查询条件时,应用样式。
    有多个媒体查询条件时,用括号连接,全满足时应用样式。

    ⭐条件语法: only | not Media Type and (Media Feature) and (Media Feature)...,...

    条件语法中文版逻辑运算符(logical operators)only | not 媒体类型(Media Type) 逻辑运算符(logical operators)and (媒体特性(Media features) ) 逻辑运算符(logical operators)and (媒体特性(Media features) ) , …

    ⭐条件语法示例:

    @media only sreen and (min-width: 750px), sreen and (max-width: 750px) and (min-width: 1000px) {
    	color: red
    }
    @media not sreen and (min-width: 750px), sreen and (max-width: 750px) and (min-width: 1000px) {
    	color: red
    }
    <style media="print">
    

    常用的媒体特性

    (max-width:599px)
    (min-width:600px)
    (orientation:portrait) 竖屏
    (orientation:landscape) 横屏
    (-webkit-min-device-pixel-ratio: 2) 像素比

    媒体类型

    在这里插入图片描述
    目前剩余可用类型:screen print speech all

    使用时需要注意的问题

    ⭐条件有重合部分时,范围更大的条件要写在范围更小条件之前:

    1. min-width作为判断条件时要width从小到大排
    @media (min-width: 768px){
    	.container{
    		width:750px;
    	}
    }
    
    @media (min-width: 992px){
    	.container{
    		width:970px;
    	}
    }
    
    @media (min-width: 1200px){
    	.container{
    		width:1170px;
    	}
    }
    
    1. 当使用max-width作为判断条件时要width从大到小排
    2. 否则下方大范围条件将覆盖小范围条件,小范围条件未应用

    视频参考:
    【干货分享】清晰的CSS 3媒体查询响应式布局,bootstrap 框架原理实战

    展开全文
  • css中@media用法

    2020-06-09 09:52:25
    css中我们使用media标签来区分调用哪个css样式,比如使用media="print"来表示当执行打印文档时,使用print.css样式。这样使得文档更有得于打印,如将页面宽度增宽、或屏蔽掉一些不需要打印的内容。 1.media标签...
  • 主要介绍了基于CSS设置打印页面简单介绍及cssmedia使用 的相关资料,需要的朋友可以参考下
  • CSS3 @media 用法总结

    千次阅读 2018-10-16 14:44:09
    @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: &lt;link rel="stylesheet" media="mediatype and|not|only (media feature)...
  • Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果 @media 媒体类型and (媒体特性){你的样式} 最大宽度max-width “max-width”是媒体特性最常用的一个特性...
  • CSS中规则@media用法

    2017-11-16 14:30:00
    CSS中@规则是由@符号开始的,例如@import,@page等。 @media就是其中的一个规则。 @media可以让你根据不同的屏幕大小而使用不同的样式,这可以使得不需要js代码就能实现响应式布局。 不过@media只能用于较新的浏览器...
  •  而Media Queries 的套用方法千变万化,要套用在什么样的装置,都可以自己来定义。 到底什么是Media Queries ? 一般我们在开发HTML + CSS 网页,都会有一份CSS 来控制网页的样式表。 而随着各式各样不同...
  • CSSmedia介绍与用法

    2020-04-29 23:09:20
    media意为媒体,是css的内容。主要是区分在不同的媒体环境下(不同的屏幕尺寸下),显示的样式。主要用于开发响应式布局的页面。响应式布局就是一个网站能够随着终端不同而改变显示样式。不用为不同的终端各自开发不用...
  • 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不...我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。 &lt;meta name="viewport...
  • 背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来,看一看它的真面目。...
  • 或 (使用css-mqpacker)或(也许还有其他东西)的自定义sort方法(移动优先/桌面优先) 替代mqpacker 不推荐使用 。 替代插件之一可能是 在CSS-in-JS可用 :rocket: 该软件包现在是 正在安装 npm install --...
  • 最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多。但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器。 那么什么是me...
  • CSS3 Media Queries

    2018-03-05 17:52:21
    Media Queries直译过来就是“媒体查询”,在我们平时的Web页面head部分常看到这样的一段代码: &lt;link href="css/reset.css" rel="stylesheet" type="text/css" media="...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,067
精华内容 18,826
关键字:

css中media的用法