本文详细介绍了CSS3中的媒体类型，包括常见类型如Screen、All和Print，并探讨了媒体查询的使用方法，如max-width和min-width。通过@media规则实现不同设备和屏幕尺寸的样式应用，如针对iPhone、iPad以及不同分辨率的屏幕设置样式。同时，文章还提到了resize和outline属性，用于提升用户体验和元素轮廓的表现。
1、媒体类型
All：所有设备；Braille：盲人用点字法触觉回馈设备；Embossed：盲文打印机；Handheld：便携设备；Print：打印用纸或打印预览视图；
Projection：各种投影设备；Screen：电脑显示器；Speech：语音或音频合成器；Tv：电视机类型设备；Tty：使用固定密度字母栅格的媒介，比如电
传打字机和终端；
其中Screen、All和Print为最常见的三种媒体类型。
2、引用方法
常见的有：link标签、@import和CSS3新增的@media。
link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
@import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文
件；另一种方法是在<head></head>标签中的<style></style>中引入。
@import url(reset.css) screen;
@media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也
具有两方式。
@media screen {
选择器{/*你的样式代码写在这里…*/}
}
3、Media Queries使用方法
语法：@media 媒体类型and （媒体特性）{你的样式}
注：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。
媒体特性的书写方式和样
最低0.47元/天 解锁文章
扫一扫
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
