CSS 媒体类型应用：相应式布局使用，特殊设备效果

一、媒体类型了解

解释：媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，这使得你用不同的设备看到的效果是不一样的。

网页端，手机端，pc端，app端，打印机，盲人机等等。并且一些css属性是在特定的媒介设备才会有的。

应用：

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

语法：@media 媒介{

选择符 {css样式设置}

}

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

二、媒体类型应用

在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，

将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体：

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

CSS 媒体类型，相应式布局使用相关推荐

媒体查询-响应式布局-BFC
媒体查询-响应式布局-BFC 1 回顾 1.1 多列布局设置给包裹元素的属性:column-countcolumn-widthcolumnscolumn-gapcolumn-rule-widthco ...
教你玩转CSS 媒体类型
目录 CSS 媒体类型媒体类型 @media 规则其他媒体类型 CSS 媒体类型媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 媒体 ...
前端学习第16天：媒体查询-响应式布局
第16天 1.媒体查询说明:媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒 ...
CSS学习及响应式布局
CSS简介什么是css? cascading style sheet(层叠样式表) 1.如何修饰网页信息的显示样式目前推荐遵循的是w3c发布的css3.0 用来表现XHTNL或者XML等样 ...
CSS媒体类型基本知识
1.媒体类型 @media @media 规则允许在相同样式表为不同媒体设置不同的样式.例如同一页面在浏览器屏幕上展示和打印在纸张上字体大小.背景色等属性会有区别,这是因为不同的媒体类型需要的样式 ...
css-适配布局类型-流式布局-响应式布局
制作手机界面时,一般按照2倍的大小去做. 如果设备的宽度大于显示的宽度,可以做一个适配流体布局来个例子,体验代码 PC端可适配移动端电脑,与移动端都可正常显示假设,给每一个a标签加上了边框 ...
css 里面写响应式布局,CSS3怎么做出响应式布局
今天给大家带来一个用CSS3做出来的响应式布局的案列,需要的朋友可以拿去借鉴使用,响应式是CSS3的一个特色,我们熟练掌握后手机端和PC端都可以熟练的使用. *{padding: 0;margin: ...
媒体查询响应式布局的几个尺寸_媒体查询实现响应式布局
本文主要介绍 @media 查询的使用.通过媒体查询,在不同的屏幕尺寸下,可以设置不同的样式.以此,可以完美解决不同屏幕适配的问题.话不多说,先来看看效果: CSS @media screen and ...
【Web技术】1002- 应式布局，你需要知道的一切
来源:campcc https://juejin.cn/post/6951575591099301895 2011年,Google 发布了 Android 4.0,在经历了 Cupcake,Donut ...
响应式布局，你需要知道的一切
来源:campcc https://juejin.cn/post/6951575591099301895 2011年,Google 发布了 Android 4.0,在经历了 Cupcake,Donut ...

CSS 媒体类型，相应式布局使用

CSS 媒体类型应用：相应式布局使用，特殊设备效果

一、媒体类型了解

CSS 媒体类型，相应式布局使用相关推荐

最新文章

热门文章

CSS 媒体类型 ，相应式布局使用

CSS 媒体类型 应用：相应式布局使用，特殊设备效果

一、媒体类型了解

CSS 媒体类型 ，相应式布局使用相关推荐

最新文章

热门文章

CSS 媒体类型，相应式布局使用

CSS 媒体类型应用：相应式布局使用，特殊设备效果

CSS 媒体类型，相应式布局使用相关推荐