详细介绍css属性之媒体类型-css教程-PHP中文网

首页

web前端

css教程

详细介绍css属性之媒体类型

王林

Apr 11, 2020 am 09:06 AM

css

详细介绍css属性之媒体类型

前言：

样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如"font-size"属性只对可卷动的媒体类型有效（屏幕）。

声明一个媒体属性可以用@import或@media引入：

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}

登录后复制

也可以在文档标记中引入媒体：

<link rel="stylesheet" type="text/css" media="print" href="foo.css">

登录后复制

（推荐教程：CSS教程）

可以看出，@import和@media的区别在于，前者引入外部的样式单用于媒体类型，后者直接引入媒体属性。

@import的使用方法是@import加样式单文件的URL地址再加媒体类型，可以多个媒体共用一个样式单，媒体类型之间用"，"分割符分开。@media用法则是把媒体类型放在前面，其他规则和rule-set基本一样。

下面列出各种媒体类型：

SCREEN：指计算机屏幕。

PRINT：指用于打印机的不透明介质。

PROJECTION：指用于显示的项目。

BRAILLE：盲文系统，指有触觉效果的印刷品。

AURAL：指语音电子合成器。

TV：指电视类型的媒体。

HANDHELD：指手持式显示设备（小屏幕，单色）。

ALL：适合于所有媒体。

手机端（移动端）自适应样式 @media 的使用

通用手机端样式：

@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*横屏*/
}

登录后复制

指定手机端高度样式：

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx < 960的设备}

登录后复制

根据不同的设备设定的样式：

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

登录后复制

注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，因为css文件是从上至下读取的，后面的css优先级会更高

@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }

登录后复制

因为如果是1440,由于1440>768那么你的1200就会失效。

所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

登录后复制

相关视频教程推荐：css视频教程

以上是详细介绍css属性之媒体类型的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7374

Java教程

1628

CakePHP 教程

1355

Laravel 教程

1267

PHP教程

1215

显示更多

Related knowledge

在dcat admin中如何实现点击添加数据的自定义表格功能？ Apr 01, 2025 am 07:09 AM

在dcatadmin(laravel-admin)中如何实现自定义点击添加数据的表格功能在使用dcat...

虚拟货币交易平台APP最新排行榜（top10虚拟币交易平台盘点） Mar 04, 2025 pm 03:51 PM

本文盘点全球十大领先的加密货币交易所，包括OKX、币安、Gate.io、火币、Kraken、Coinbase、KuCoin、Crypto.com、Bitfinex和Bitstamp。这些交易所凭借其强大的技术实力、丰富的产品线、严格的合规运营和创新的生态建设，在全球加密货币市场占据领先地位。文章将分别介绍它们的特色功能、技术架构、安全措施、合规资质以及生态系统建设，为投资者选择合适的交易平台提供参考。

2025全球正规虚拟币交易软件前十官网地址分享 Feb 15, 2025 pm 04:42 PM

随着加密货币市场的发展，正规的虚拟币交易软件成为投资者关注的重点。在激烈的竞争中，一些交易平台脱颖而出，提供安全可靠的服务。根据行业调研和综合排名，本文将列出 2025 年全球十大最佳虚拟币交易软件，并提供其官网地址。这些平台经过严格审核，旨在为用户提供卓越的交易体验和投资保障。

Bitstamp交易所究竟怎么样？Bitstamp交易所安全吗？ Aug 16, 2024 pm 06:02 PM

Bitstamp交易所以其安全性和可靠性而闻名，拥有以下特点：冷存储和多重签名：大部分资金离线存储，需要多重授权批准交易。合规性和监管：受到卢森堡金融管理委员会监管，符合反洗钱和KYC法规。网络安全措施：包含DDoS保护、SSL加密和定期安全审计。保险和资金保护：由Lloyd'sofLondon承保盗窃或损失，并设有备用基金保障用户资金。客户支持和响应：24/7客户支持，对事

动态网页元素XPath和Class名变化频繁，如何稳定抓取目标a标签？ Apr 01, 2025 pm 04:12 PM

动态网页元素抓取难题：应对XPath和Class名变化很多爬虫开发者在抓取动态网页时会遇到一个棘手的问题：目标�...

豆包是什么软件做的 Nov 27, 2024 am 11:39 AM

“豆包”是一款强大的 AI 助手，其背后是复杂的软件架构和技术支持。该架构的核心是大型语言模型 (LLM) 和图像生成模型，此外还包括自然语言处理、多模态生成、用户界面、数据存储和云计算平台等模块。这些模块采用微服务架构，并使用 Python、Java、C 等编程语言开发。该架构仍在不断演进，未来可能引入更先进的 AI 技术，以提升“豆包”的性能和功能。