本文摘自PHP中文网,作者V,侵删。
前言:
样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体,如"font-size"属性只对可卷动的媒体类型有效(屏幕)。
声明一个媒体属性可以用@import或@media引入:
1 2 3 4 |
|
也可以在文档标记中引入媒体:
1 |
|
(推荐教程:CSS教程)
可以看出,@import和@media的区别在于,前者引入外部的样式单用于媒体类型,后者直接引入媒体属性。
@import的使用方法是@import加样式单文件的URL地址再加媒体类型,可以多个媒体共用一个样式单,媒体类型之间用","分割符分开。@media用法则是把媒体类型放在前面,其他规则和rule-set基本一样。
下面列出各种媒体类型:
SCREEN:指计算机屏幕。
PRINT:指用于打印机的不透明介质。
PROJECTION:指用于显示的项目。
BRAILLE:盲文系统,指有触觉效果的印刷品。
AURAL:指语音电子合成器。
TV:指电视类型的媒体。
HANDHELD:指手持式显示设备(小屏幕,单色)。
ALL:适合于所有媒体。
手机端(移动端)自适应样式 @media 的使用
通用手机端样式:
1 2 3 4 5 6 |
|
指定手机端高度样式:
1 2 |
|
根据不同的设备设定的样式:
1 2 3 |
|
注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,因为css文件是从上至下读取的,后面的css优先级会更高
1 2 3 |
|
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
1 2 3 |
|
相关视频教程推荐:css视频教程
以上就是详细介绍css属性之媒体类型的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者