源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 1407|回复: 0

[CSS/Html] CSS的@media与@media screen,媒体查询

[复制链接]

3096

主题

3497

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
270466
发表于 2023-7-28 22:26:43 | 显示全部楼层 |阅读模式

在网站自适应设计中,@media与@media screen是经常会用到的css代码,其功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。

@media与@media screen区别

@media与@media screen两者在电脑&手机设备上没有区别,但@media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,就用@media;否则,就用@media screen。

不过这只是笼统的做法,其实如果把screen换为print,写为@media print,那么该css就可用到打印设备上了,但要注意,@media print声明的css只能在打印设备上有效!

@media语法

以@media或@media screen and开头的语句就是媒体查询语句。@media后面是一个或者多个表达式,如果表达式为真,则应用样式。
  1. @media (max-width: 600px) {
  2.         .class1 {
  3.             ​background: #fff;
  4.           }
  5. }
  6. @media screen and (max-device-width: 600px) {
  7.         .class2 {
  8.                 ​background: #ccc;
  9.         }
  10. }
  11. @media only screen and (device-aspect-ratio:4/3){
  12.         .class3 {
  13.                 ​background: #eee;
  14.         }
  15. }
复制代码

max-width 是目标显示区域的宽度,例如,浏览器宽度。
max-device-width 是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。
device-aspect-ratio 可以适配特定屏幕长宽比的设备,例如,设备屏幕长宽比为4:3、16:9或16:10。

媒体查询media还可以作为属性在 link标签中使用:
  1. <link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)">
复制代码

意思是:当屏幕的宽度大于600px且小于800px时,应用style.css文件。

知识拓展
@media only screen and
only:限定某种设备。
screen:彩色电脑屏幕,是媒体类型里的一种。
and:关键字,连接多个表达式。
not:关键字,排除不支持的媒体类型。
其他媒体类型:all(所有设备)、braille(盲文)、embossed(盲文打印)、print(文档打印或打印预览模式)、projection(项目演示,比如幻灯)、speech(演讲)、tv(电视)。


您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-17 13:55 , Processed in 0.028648 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明