media_mediaplayer - CSDN
  • css中的@media用法总结

    万次阅读 2019-07-18 10:58:05
    //语法: @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/

     

     

     

    展开全文
  • HTML @media 响应式布局

    千次阅读 2018-08-28 00:25:28
    @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){}

    出自:http://www.511yj.com/media-media-screen.html

    展开全文
  • @media

    2020-05-06 01:59:48
    一、<meta> width = device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0) minimum-scale:允许用户缩放到的最小比例(默认设置为1.0) maximum-scale:允许用户缩放到的最大...

    一、<meta>

    在这里插入图片描述width = device-width:宽度等于当前设备的宽度
    initial-scale:初始的缩放比例(默认设置为1.0)
    minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
    maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
    user-scalable:用户是否可以手动缩放(默认设置为no)

    二、<head>

    列如页面宽度小于900的执行指定的样式文件:
    在这里插入图片描述

    三、@media

    width小于900px:
    在这里插入图片描述
    width大于900px:
    在这里插入图片描述
    width大于900px,小于1200px:
    在这里插入图片描述

    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:检测输出的设备是网格的还是位图设备。
    在这里插入图片描述

    展开全文
  • Media-媒介(媒体、介质)【译】

    千次阅读 2015-04-09 09:46:23
    Media-媒介(媒体、介质)    Android支持定制的媒介解码器,需要将定制的解码器接口暴露给框架。  Android针对集中常见的媒介格式,提供一套本地的解码引擎-Stagefright。Stagefright提供音频和视频播放功能,...

    Media-媒介(媒体、介质)


    转载请注明来源:http://blog.csdn.net/lifeshow   
    
    
           Android支持定制的媒介解码器,需要将定制的解码器接口暴露给框架。
           Android针对集中常见的媒介格式,提供一套本地的解码引擎-Stagefright。Stagefright提供音频和视频播放功能,包括OpenMax解码交互、会话管理、时间同步渲染、传输控制和DRM。此外,Stagefright可以集成针对特定硬件的解码器。事实上,Android针对定制的解码器,并没有提供HAL实现,但提供了加码和解码的标准和途径。客户需要自己实现硬件解码器,把他作为OpenMax IL的附件。

            

       综述

           下图显示了媒介类应用与Android本地多媒体框架交互过程。

            应用框架
            应用框架包含用户APP代码,通过调用android.media API来与多媒体硬件实现交互。
            Binder IPC
            Binder IPC实现跨进程通信机制,接口位于frameworks/av/media/libmedia目录,以“I”字母打头。
            本地多媒体框架
            Android提供本地的多媒体框架,通过Stagefright引擎,实现音频和视频的摄录和回放功能。Stagefright包含默认的常见类型的软解码器,你可以通过扩展OpenMax IL层接口来定制自己的硬件解码器。要了解更多信息,可以参看各类型媒体播放器源码,同时可参考Stagefright组件目录( frameworks/av/media)。
            OpenMAX Integration Layer (IL)
            OpenMax IL为Stagefright提供一套标准的用于识别和使用特定多媒体解码组件的方式。针对自定义解码器,你必须提供一个叫 libstagefrighthw.so的共享插件库。改链接库,将定制的解码器链接到Stagefright。定制的解码器必须符合OpenMax IL组件标准。
            解码器定制
            Stagefright内置一套标准的软解码器,也可以针对特定要求定制自己的硬件解码器。需要创建一个OMX组件,并将组件以Hook方式链接到解码器和Stagefright框架。例如,针对Galaxy Nexus机型,你可以参考hardware/ti/omap4xxx/domx/和hardware/ti/omap4xx/libstagefrighthw的组件及插件实现。
            要定制解码器分一下几步:
            1)依据OpenMax IL标准,创建解码组件,该组件接口定义位于frameworks/native/include/media/OpenMAX/OMX_Component.h头文件。
            2)创建一个OMX插件,用于链接到Stagefright服务。插件接口定义位于frameworks/native/include/media/hardware目录的OMXPluginBase.h和HardwareAPI.h头文件中。
            3)将插件编译成共享链接库,命名为libstagefrighthw.so。如:LOCAL_MODULE := libstagefrighthw
            4)将插件链接库加入设备makefile中。PRODUCT_PACKAGES += \
      libstagefrighthw \
      ...
            5)将解码器暴露给框架。Stagefright服务首先解析system/etc/media_codecs.xml和system/etc/media_profiles.xml 文件,来确定支持的解码格式,暴露的接口可以通过
    android.media.MediaCodecList和android.media.CamcorderProfile类调用。 需要在device/<company_name>/<device_name>/目录创建上面的两个xml,同时复制到system/etc目录。如:
    PRODUCT_COPY_FILES += \
      device/samsung/tuna/media_profiles.xml:system/etc/media_profiles.xml \
      device/samsung/tuna/media_codecs.xml:system/etc/media_codecs.xml \
    可以参看device/samsung/tuna/media_codecs.xml和device/samsung/tuna/media_profiles.xm具体实现。
    注:
    自Jelly Bean开始,Android不再支持<Quirk>元素标签。

           
    展开全文
  • @media 如何使用?

    万次阅读 2018-01-04 15:46:34
    前言 ... 动画 animation转化 transform过渡 translation ...尽快这已足够让我们兴奋,许多之前必须用 JS 或 JQ 写的效果用 CSS 就能实现,现在几行 CSS3 代码就够了。...但是最值得注目的应该是@medi
  • @media 的使用规范

    2019-08-02 09:15:16
    只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 这段代码的几个参数解释: w...
  • 作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 在web页面中,图片居左,内容居右排列...1、媒体对象的容器:用来容纳媒体对象的所有内容,容器上需使用类名.media 2、媒体对
  • 1.and 后面一定要有空格~~~ 切记 2.meta 里面需要加上一句话: &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"...
  • 引言: 我前些天,遇到了一个问题,我想实现在任何一个界面对我当前播放器播放音乐进行控制,比如当我播放视频,我想在此界面停止音乐播放。听了慕课上一个大佬讲的例子,我才明白,我们构建一个MediaPlayHelper类,...
  • 联想电脑开机出现Checking Media Presence ;Media Present ; Start PXE Ober IPv4
  • android.process.media has stopped unexpectedly, android.process.media意外停止的解决方法。 这几天手机经常出现: android.process.media意外停止,在网上查了一下有说用刷机解决的,借助于androidforums的一个...
  • 基于mediasoup的多方通话研究(一)

    万次阅读 热门讨论 2018-11-19 21:09:37
    基于mediasoup的多方通话研究mediasoup简介mediasoup的特性安装mediasoup-demo环境本地跑一跑吧关于server的配置文件下面我们来了解下mediasoup的原理吧如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片...
  • Linux media子系统

    千次阅读 2019-05-24 15:18:17
    为什么会有media这样的一个子系统? 在多媒体的框架中,总是复杂多样的,为了解决多媒体设备的复杂性和数据流动性,创建了media子系统。Media使用一个树状结构,将多媒体数据通路的各个设备连接在一起,方便各个...
  • 电脑开机出现checking media如何解决

    万次阅读 2018-03-15 18:13:20
    电脑几乎是我们日常必用到的东西,但是突然有一天,电脑不再正常开机了,开机的时候只留给你一串冰冷的字符“checking media”,这是何等的卧槽!遇到这种情况该怎么办呢?今天快启动小编就教教大家电脑开机出现...
  • 只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值     准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: &lt;m...
  • CSS 中的@media

    千次阅读 2019-05-24 16:59:05
    media”就是用来指定特定的媒体类型,在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型,如屏幕(screen)和打印(print)的样式表,当然还有其他的,比如说“TV”,“handheld”等,其中“all”表示的是...
  • 利用 @media screen 实现网页布局的自适应,@media screen and 开始研究响应式web设计,CSS3 Media Queries是入门。 Media Queries 其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。 ...
  • MediaFormat api详解

    千次阅读 2018-07-02 11:22:57
    MediaFormat扩展对象java.lang.Object继承 ↳android.media.MediaFormat班级概况封装描述媒体数据格式的信息,无论是音频还是视频。媒体数据的格式被指定为字符串/值对。所有格式通用的键,所有未标记为可选的键都...
  • 调用微信获取临时素材接口,...media_id=MEDIA_ID,出现这样的错误:{"errcode":40007,"errmsg":"invalid media_id hint: [01073723]"} 分析步骤 step1:通过查询微信公众平台技术文...
  • 利用@media screen实现网页布局的自适应

    万次阅读 多人点赞 2017-01-09 13:54:09
    优点:无需插件和手机主题,对移动设备友好,能够适应...只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值 注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧, @me
1 2 3 4 5 ... 20
收藏数 472,679
精华内容 189,071
关键字:

media