css媒体查询及css变量

媒体查询 是 CSS 样式表最重要的功能之一,所谓媒体查询指的就是根据不同的媒体类型(设备类型)和条件来区分各种设备(例如:电脑、手机、平板电脑、盲文设备等),并为它们分别定义不同的

CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件,让所有用户都能得到很好的用户体验。

  1. 可以通过一些属性来描述设备的具体特征,例如宽度、高度、分辨率等,如下表所示,常用的:

    max-width: 页面可见区域的最大宽度 min-width: 页面可见区域的最小宽度

  2. 定义媒体查询

    目前您可以通过以下两种方式来定义媒体查询:

    使用 @media 或 @import 规则在样式表中指定对应的设备类型;

    用 media 属性在 <style><link><source> 或其他 HTML 元素中指定特定的设备类型。

css 复制代码
:root {
  --dynamic-width: 800px; /* 定义默认宽度 */
}
/* 中等屏幕适配 (约125%缩放时的等效宽度) */
@media (max-width: 1536px) {
  :root {
    --dynamic-width: 750px;
  }
}
/* 14寸小屏幕适配 */
@media (max-width: 1366px) {
  :root {
    --dynamic-width: 560px;
  }
}
/* 小屏幕适配 (约150%缩放) */
@media (max-width: 1280px) {
  :root {
    --dynamic-width: 490px;
  }
}

/* 高分辨率屏幕适配Mac高分辨率 */
@media (min-resolution: 2dppx) {
  :root { --dynamic-width: 650px; }
}

/* 使用:*/
.describe {
  width: var(--dynamic-width);
}
/* 行内使用:*/
<div style="width: var(--dynamic-width);">内容</div>
相关推荐
孤水寒月14 分钟前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀23 分钟前
html初学者第一天
前端·html
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689974 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽5 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头5 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全6 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing6 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆6 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试