精华内容
下载资源
问答
  • @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){}
    展开全文
  • windows Media Player控件类

    千次下载 热门讨论 2009-11-29 15:32:21
    windows Media Player控件类,主要为在VS中找不到ActiveX控件里的windows Media Player控件类所提供,里面有24类,版本较新.方法介绍:http://blog.csdn.net/akof1314/archive/2009/11/29/4900244.aspx
  • mediasoup

    千次阅读 2018-12-20 15:55:24
    mediasoup Cutting Edge WebRTC Video Conferencing 1.Powerful SFU Due to its versatility and flexibility, the SFU model (Selective Forwarding Unit) for multiparty conferencing and similar scenarios i...

    mediasoup

    尖端的WebRTC视频会议

    Cutting Edge WebRTC Video Conferencing

    1.Powerful SFU

    Due to its versatility and flexibility, the SFU model (Selective Forwarding Unit) for multiparty conferencing and similar scenarios is taking over the more rigid and resource hungry MCU model.

    2.Node.js module

    Instead of creating yet another opinionated server, mediasoup is a Node.js module which can be integrated into a larger application or made standalone with just a few lines of JavaScript.

    3.Client SDK

    mediasoup comes with a extremely powerful JavaScript SDK (the mediasoup-client library) that makes it easy to build video conference applications that run in any browser by using an unified API.

    command line

    npm install mediasoup
    npm install mediasoup-client

    website

    https://mediasoup.org/

    展开全文
  • MediaType介绍

    千次阅读 2020-12-04 15:41:00
    MediaType媒体类型:决定浏览器将以什么形式、什么编码对资源进行解析 Content-Type:也属于MediaType媒体类型,主要用于在请求头中指定资源的MediaType 一、MediaType类型 类型 描述 text/html HTML格式 ...

    MediaType媒体类型:决定浏览器将以什么形式、什么编码对资源进行解析

    Content-Type:也属于MediaType媒体类型,主要用于在请求头中指定资源的MediaType

    一、MediaType类型

    类型 描述
    text/html HTML格式
    text/plain 纯文本格式,空格转换为 “+” 加号,但不对特殊字符编码
    text/xml XML格式
    text/x-markdown Markdown格式
    image/gif gif图片格式
    image/jpeg jpg图片格式
    image/png png图片格式
    application/xhtml+xml XHTML格式
    application/xml XML数据格式
    application/json 用来告诉服务端,消息主体是序列化后的JSON字符串
    application/pdf pdf格式
    application/msword Word文档格式
    application/octet-stream 二进制流数据(如常见的文件下载)
    application/x-www-form-urlencoded 参数为键值对形式,在发送前编码所有字符(默认)。浏览器的原生 <form encType=”” 表单提交类型,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据
    multipart/form-data 不对字符编码,发送大量二进制数据或包含non-ASCII字符的文本,application/x-www-form-urlencoded是效率低下的(需要用更多字符表示一个non-ASCII字符)。需要设定“ <form enctype=‘multipart/form-data’

    二、MediaType对象解析

    MediaType对象包含了三种信息:type 、subtype、charset,一般将这些信息传入parse()方法中,这样就可以解析出MediaType对象

    例子1:

    text/x-markdown; charset=utf-8
    
    • type值是text,表示是文本这一大类;
    • / 后面的x-markdown是subtype,表示是文本这一大类下的markdown这一小类;
    • charset=utf-8 则表示采用UTF-8编码
    展开全文
  • 利用 @media screen 实现网页布局的自适应,@media screen and 开始研究响应式web设计,CSS3 Media Queries是入门。 Media Queries 其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。 ...

    利用 @media screen 实现网页布局的自适应,@media screen and

    开始研究响应式web设计CSS3 Media Queries是入门。

    Media Queries

    其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。

    • 换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。
      那么,Media Queries是如何工作的?

    两种方式:

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

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

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

    在media属性里:

    • screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
    • and 被称为关键字,其他关键字还包括 not(排除某种设备)only(限定某种设备)
    • (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。
     <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

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

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

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

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

    其实基本上就是样式覆盖~判断设备然后引用不同的样式文件覆盖
    要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。

    补充:media query中的not only all等关键字

    • not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)
    • only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。
    • all: 所有设备,这个应该经常看到

    还有其它一些:

    media_type 设备类型说明
    all 所有设备
    aural 听觉设备
    braille 点字触觉设备
    handled 便携设备,如手机、平板电脑
    print 打印预览图等
    projection 投影设备
    screen 显示器、笔记本、移动端等设备
    tty 如打字机或终端等设备
    tv 电视机等设备类型
    embossed 盲文打印机

    以下是demo

    一个三栏布局的,在不同的尺寸下,变为两栏,再变为一栏
    这里写图片描述
    这里写图片描述

    这里写图片描述这里写图片描述
    代码如下:

       <!DOCTYPE HTML>
       <html>
       <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <title>css3-media-queries-demo</title>
       <style>
       body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
           padding: 0;
           margin: 0;
       }
       .content{
           zoom:1;
       }
       .content:after{
           content: ".";
           display: block;
           height: 0;
           clear: both;
           visibility: hidden;
       }
       .leftBox, .rightBox{
           float: left;
           width: 20%;
           height: 500px;
           margin: 5px;
           background: #ffccf7;
           display: inline;
           -webkit-transition: width 1s ease;
           -moz-transition: width 1s ease;
           -o-transition: width 1s ease;
           -ms-transition: width 2s ease;
           transition: width 1s ease;
       }
       .middleBox{
           float: left;
           width: 50%;
           height: 800px;
           margin: 5px;
           background: #b1fffc;
           display: inline;
           -webkit-transition: width 1s ease;
           -moz-transition: width 1s ease;
           -o-transition: width 1s ease;
           -ms-transition: width 1s ease;
           transition: width 1s ease;
       }
       .rightBox{
           background: #fffab1;
       }
       @media only screen and (min-width: 1024px){
           .content{
                   width: 1000px;
                   margin: auto
               }
       }
       @media only screen and (min-width: 400px) and (max-width: 1024px){
           .rightBox{
               width: 0;
           }
           .leftBox{ width: 30%}
           .middleBox{ width: 65%}
       }
       @media only screen and (max-width: 400px){
           .leftBox, .rightBox, .middleBox{
               width: 98%;
               height: 200px;
           }
       }
       </style>
       </head>
    
       <body>
       <div class="content">
         <div class="leftBox"></div>
         <div class="middleBox"></div>
         <div class="rightBox"></div>
       </div>
       </body>
       </html>

    文章转载自:http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

    展开全文
  • MediaSource 缓存

    2019-11-25 16:58:32
    wfs.js MediaSource 缓存 window.mediasource
  • Mediasoup-demo搭建在centos、ubuntu两个平台 Mediasoup-sample-server搭建 Mediasoup-ios客户端连接mediasoup服务器进行音视频通话 Mediasoup-Andriod客户端连接mediasoup服务器进行音视频通话
  • 应该说两者在Responsive Layout上面展现效果是一样的 但是只有 @media这个指令在用户打印的时候有效,具体怎样需要测试 其实侧面说明了 @media更有效吧,如果有不对的可以指出来 ...
  • 321_MediaType Media Type 是什么

    万次阅读 2016-10-14 21:42:37
    MediaType是什么 MediaType在网络协议的消息头里面叫做Content-Type 使用两部分的标识符来确定一个类型 所以我们用的时候其实就是为了表明我们传的东西是什么类型 比如 application/json:JSON格式的数据,在RFC ...
  • 设备:pixel2xl Android Q beat4 在给应用做适配测试的时候,发现Media...java.lang.SecurityException: Media projections require a foreground service of type ServiceInfo.FOREGROUND_SERVICE_TYPE_MEDIA_PR...
  • 由于“Windows10安装程序”由微软官方推出,因此拥有可靠性和广泛使用性。对此我们需要从微软官方网站下载名为“MediaCreationTool”的“Windows 10安装程序”来升级Win10正式版系统。 ...
  • media type与media query

    千次阅读 2012-02-13 14:48:21
    http://www.qianduan.net/media-type-and-media-query.html ... ...media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式
  • Media Session是管理数据流的对象。   接口:IMFMediaSession。   创建对象:MFCreateMediaSession、MFCreatePMPMediaSession(创建支持受保护内容的MedisSession,PMP全称是Protected Media Path)。...
  • 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....
  • 增加一点,想要在ie8以下使用@media标签,需要引用respond.min.js 文章目录[隐藏] 了解Media Queries @media与@media screen区别 Media Queries工作方式: Media使用说明举例 基于视窗宽度的媒体查询断点设置.....
  • MediaSession框架

    千次阅读 2018-03-06 00:21:44
    MediaSession框架一、MediaSession框架二、BlueTooth蓝牙播放信息显示三、MediaButton响应优先级四、锁屏显示五、播放优化MediaSession1. added in API level 21 (Android 5.0)2. 允许与媒体控制器、音量键、媒体...
  • 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)" ...
  • 重装系统 开机出现 checking media

    万次阅读 2019-08-20 10:13:51
    Checking Media Presence ;Media Present ; Start PXE Ober IPv4 在这个界面的时候按ESC和ENTER键,多按几次看能不能跳过去。 这是因为电脑启动后,操作系统的第一启动项为网络,不再是硬盘。解决的方法就是在...
  • MediaFormat浅析

    千次阅读 2017-06-24 17:27:09
    ↳ android.media.MediaFormat 类说明 Encapsulates the information describing the format of media data, be it audio or video. 它是音视频数据格式的简单描述 The format of the media data is
  • media指令分析

    千次阅读 2017-03-13 21:32:31
    1, 概述 ...主要有三种命令,media dispatch KEY / media list-sessions / mediamonitor.本文主要以media dispatch KEY来论述。   2, media详细流程  Media的main方法如下, public static void
  • 用@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(打字机) 等等 属性...
  • 关于MediaType的详细介绍 MediaType指的是要传递的数据的MIME类型,MediaType对象包含了三种信息:type 、subtype以及charset,一般将这些信息传入parse()方法中,这样就可以解析出MediaType对象,比如 "text/x-...
  • 不知不觉,也下载了不少的片儿了。。。身边硬盘也多了起来。... raspbian或者OpenMediaVault二选一,分别对应samba和OMV两种搭建方法。puttyy用于远程连接raspberry pi,否则每次都要准备一个usb键盘和us
  • 利用@media与@media screen进行响应式布局 文章目录[隐藏] 了解Media Queries @media与@media screen区别 Media Queries工作方式: Media使用说明举例 基于视窗宽度的媒体查询断点设置 在互联网的...
  • MediaSession分析

    千次阅读 2016-12-14 19:37:35
    很苦恼没有详细的资料介绍MediaSession,也没有多少现成的例子demo可以参考。那就自己研究一下源码。 先看一下先相关的类,MediaSession、MediaController,SessionToken,MediaSessionService。 MediaSession构造...
  • mediasoup提供了PlainTransport可以接收裸RTP数据,所以可以通过ffmpeg.sh脚本推本地文件到mediasoup。 二、ffmpeg.sh推流介绍 脚本路径:mediasoup-demo/broadcasters/ffmpeg.sh 注意:需要通过chrome网页请求...
  • 在网站自适应设计中,@media与@media screen是必须用到的css代码,可能大家对此并不陌生。但是大家又知不知道@media与@media screen的区别在哪呢?在自适应设计中你是用@media还是用@media screen?你知不知道两者...
  • Linux media子系统

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 126,587
精华内容 50,634
关键字:

media