【CSS】媒体(媒介 / media)查询

媒体查询(Media Queries)是 CSS3 中引入的一种技术,用于根据设备的特性和属性,为不同的媒体类型提供不同的样式规则。媒体查询使得我们可以根据设备的屏幕尺寸、分辨率、屏幕方向、设备类型等条件来适应不同的设备和媒体类型。

媒体查询的语法如下:

java 复制代码
@media media-type and (media-feature) {
  // 样式规则
}

media-type 表示媒体类型,比如 screen(屏幕)、print(打印)等,而 media-feature 是媒体特性,比如 width(宽度)、height(高度)、orientation(方向)等。

未指明类型为默认值 all。

基本使用

  1. 根据屏幕宽度进行样式调整:
css 复制代码
@media screen and (max-width: 600px) {
  // 当屏幕宽度小于等于 600px 时应用的样式
}
  1. 根据屏幕方向调整样式:
css 复制代码
@media screen and (orientation: landscape) {
  // 当屏幕为横向应用的样式
}
  1. 根据设备类型调整样式:
css 复制代码
@media handheld {
  // 当设备为手持设备时应用的样式
}

媒体查询还支持逻辑操作符,如 notandor,可以将多个媒体特性进行组合,以更精确地匹配目标设备。

例如:

css 复制代码
@media screen and (min-width: 768px) and (max-width: 1024px) {
  // 当屏幕宽度在 768px 到 1024px 之间时应用的样式
}

引用方法

  1. link: 使用 <link> 标签将外部样式表文件链接到 HTML 文件中:

    html 复制代码
    <link rel="stylesheet" href="styles.css" media="screen">
  2. xml:

    html 复制代码
     <? xml-stylesheet rel="stylesheet" media="screen" href="style.css"?>
  3. @import

    html 复制代码
    @import url('./index.css') screen
  4. @media

    css 复制代码
    @media screen {
        /* 具体样式 */
    }
相关推荐
Bellafu6663 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird6 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者7 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强7 小时前
Chrome和IE获取本机ip地址
前端
天***88967 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*7 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls8 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友8 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵8 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机9 小时前
Promise 常见面试题(持续更新中)
前端·javascript