>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 26011 个阅读者 刷新本主题
 * 贴子主题:  CSS 媒体类型 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-12 15:10:50     消息  查看  搜索  好友  邮件  复制  引用

  

CSS  媒体类型

      媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。                    

媒体类型

     一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如, font-size 属性可用于屏幕和印刷媒体,但有不同的值。屏幕和纸上的文件不同,通常需要一个更大的字体, sans-serif 字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读。            

  @media 规则

      @media 规则允许在相同样式表为不同媒体设置不同的样式。

      在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印,将是 10 个像素的 Times 字体。请注意,font-weight 在屏幕上和纸上设置为粗体:                    

范例

@media   screen
{
     p .test   { font-family: verdana , sans-serif  ; font-size: 14 px  ; }
}
@media   print
{
     p .test   { font-family: times , serif  ; font-size: 10 px  ; }
}
@media   screen , print
{
     p .test   { font-weight: bold  ; }
}

               你可以自己尝试看看 ! 如果您使用的是 Mozilla / Firefox 或 IE5+ 打印此页,你会看到,媒体类型将使用另一种比其他文本字体大小小点的字体显示。            

其他媒体类型

     注意:媒体类型名称不区分大小写。

                      
媒体类型 描述
all 用于所有的媒体设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示,比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒体,比如电传打字机和终端。
tv 用于电视机类型的设备。






程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-27 10:44:17 重新编辑]
  Java面向对象编程-->数组
  JavaWeb开发-->Servlet技术详解(Ⅰ)
  JSP与Hibernate开发-->Java应用分层架构及软件模型
  Java网络编程-->ServerSocket用法详解
  精通Spring-->
  Vue3开发-->虚拟DOM和render()函数
  Webpack 插件开发指南
  vue3.0-基本特性和用法
  JavaScript输出格式化日期和时间
  JavaScript ES2015模块化操作
  JavaScript的async函数
  Vue经典面试题: Vue.use和Vue.prototype.$xx有血缘关系吗? -
  JS对树形数据的遍历和过滤,
  HTML表单元素的用法
  jQuery 删除元素
  JavaScript Array 对象
  响应式 Web 设计:显示图片
  CSS3 2D 转换
  CSS 伪类
  HTML 基础知识
  JavaScript 语法大全
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。