使用 CSS 媒体查询检测屏幕宽度

2023-12-04

我猜是因为你可以使用媒体查询来做到这一点:

@media (min-width:500px) { … }

在某些时候,CSS 样式表必须知道屏幕的宽度,无需使用 Javascript。

是这样吗?


您可以使用device-width这将测试屏幕的宽度(以 px 为单位)。然而,并不完全推荐这样做。使用max-width and min-width(对于视口)。


如果您尝试获取屏幕宽度并使用它(类似于content: (device-width);在某种程度上,这是不可能的。坚持使用 JavaScript。

手册参考

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 CSS 媒体查询检测屏幕宽度 的相关文章

  • 在 uiwebview 中使用 javascript 将样式应用于文本范围

    我在 iPhone 上的 UIWebView 中将一些简单样式的文本显示为 html 它基本上是一系列段落 偶尔有强烈或强调的短语 在运行时 我需要将样式应用于文本范围 有一些类似的场景 其中之一是突出显示搜索结果 如果用户搜索了 某事 我
  • 如何正确编写 CSS 属性选择器来提取所有 id 属性?

    情况 我目前正在尝试在 VBA 中使用语法重现属性选择器 attr 来自给出的 CSS 选择器练习here https www w3schools com cssref trysel asp 选择器旨在根据给定属性的值选择元素 预期结果 在
  • HTML 文本下方的白点

    我在网站上的输出在文本下方有点 为什么会出现以及如何删除它 HTML p align center font size 4 5 color 979C91 a href customer html span class fa fa penci
  • 在画布中心写入 (0,0)-HTML5

    I m currently developing a drawing app which allows the user to click and drag to determine the size of the shape and al
  • jQuery Mobile 和文本区域行

    所以 我想展示一个textarea仅 1 行 但 jQuery Mobile 并不这么认为 无论我在rows属性 它始终是 2 行高度 请问有什么解决办法吗 jQuery Mobile CSS 设置了特定的高度textarea要素 text
  • html/js 中从右到左和/或从上到下的文本?

    如何在浏览器中为用户输入创建从右到左和从上到下的文本字段 有没有本地方法可以做到这一点 或者也许有解决方法 从上到下可能像日语或象形文字 对于 RTL 文本字段 您可以使用 HTMLdir属性 如 ime Vidas 已经提到的 或 wit
  • 如何使 Bootstrap 响应式布局在 IE8 上工作

    我已经搜索了一段时间 发现有些人可以正常工作 但没有人提供任何代码示例 我尝试了他们的建议 但对我来说没有用 根据建议 我尝试添加 respond js or css3 mediaqueries js 但他们都没有帮助 这是一个jsfidd
  • CSS 链接图像带有下划线(“a”显示设置为阻止)

    我有一个菜单 我希望每个单独的项目中文本周围的所有空间都能将用户带到指定的页面 我在网上查了一下 发现最好的解决方案是将 a 显示设置为阻止 如下 a display block height 100 text decoration und
  • html2canvas z-index 不起作用

    我正在使用 html2canvas 库将 div 转换为 png 我有一个关于z index 正如你在图片上看到的 我有盒子 在一个盒子里我有一个用于背景着色的 div z index 0 它随着高度值和数字的 div z index 1
  • 如何使用角度在垫选择嵌套值中包含过滤器

    我正在使用带有嵌套下拉菜单的有角材料 下拉值以父级和子级为基础嵌套 我面临两个问题 自动建议不起作用 如果我输入父名称或其关联的子名称 则必须以展开模式过滤并显示特定的父视图 如果我展开第一个父视图并尝试展开第二个父视图 则第一个父视图应在
  • 使用 div 代替 table 进行布局

    我想知道什么方法最好将表格布局替换为 div 我自己也尝试过一些 但它让我的 4x4 div 非常混乱 我猜当有经验做这样的事情时 这并不是很难完成 但我对 div 都是新手 并试图学习这一点 看看这个并分享您对表格是否应该保持原样或者是否
  • 范围滑块 javascript 以小时和分钟为单位

    我试图分别以小时和分钟为单位显示滑块的值 我对 JS 还很陌生 并且仍在尝试了解它是如何工作的 到目前为止 我所拥有的是一个工作滑块 其最大值为 1440 24 小时内的分钟 在 JS 中 我尝试将其划分为小时和分钟 并使用 innerHt
  • 这是浏览器错误吗?具有背景颜色的变量的继承

    我发现在css中的变量函数内声明时无法让背景颜色继承另一个元素的背景颜色 这是我遇到的一个例子 这是一个错误吗 div span border 1px solid black padding 10px margin 10px Backgro
  • Jekyll 液体变量作为内联 CSS 值

    将液体变量作为内联样式传递通常会令人皱眉吗 这是我的标记的示例 div class span 8 12 h6 page role h6 h1 style color 000000 page title h1 div
  • 为什么 Bootstrap 按钮下拉菜单在 iOS 上不起作用?

    看起来甚至连引导演示在这里 http twitter github com bootstrap components html buttonDropdowns不适用于 iOS 您似乎无法在 iPhone 或 iPad 上从中选择项目 有解决
  • 我如何在ajax应用程序中找到未使用的css?

    我一直在搜索 但找不到任何 ff 插件或 javascript 来查找 ajax 应用程序中未使用的 css 除尘选择器 http www sitepoint com dustmeselectors 可以进行网站抓取 但我正在寻找检查加载内
  • style = "position:absolute" 和 style = "position:relative" 之间的区别

    谁能告诉我两者之间的区别style position absolute and style position relative 如果我将其添加到 它们有何不同div span input元素 我在用absolute现在 但我想探索relat
  • Firefox 浮动错误?如何让我的 float:right 在同一条线上?

    我有以下小提琴 http jsfiddle net q05n5v4c 2 http jsfiddle net q05n5v4c 2 在 Chrome 中 它渲染得很好 V 形标志位于右侧 然而 在 Firefox 中 Chevron 字形下
  • td 内的文本可以随 td 一起调整大小吗? (是其高度的百分比?)

    我有一个 100 占屏幕的表格 里面有 3x3 9 个单元格 每个单元格占 33 到目前为止 一切都很好 这是一个干净 可扩展的井字棋游戏 问题在于 TD 内的文本不会随比例缩放 有没有办法说 我希望文本大小为 TD 高度的 30 或者其他
  • 表格单元格中 ::after 上的位置在 Firefox 中不起作用?

    以下代码应创建一个跨越其父元素宽度 100 的伪元素 然而 这在 Firefox 中不起作用 但在 Chrome 中却有效 火狐浏览器似乎忽略了 parent s position relative 这是一个错误吗 HTML div cla

随机推荐

  • Java 8 流是原子的吗?

    我读了一些帖子 但我仍然很困惑 我知道并行流将以利用 CPU 的并行方式执行 我相信子作业将作为原子单元执行 对吗 但是常规的 Java 8 流呢 如果我执行下一行代码 users stream map user gt user getUs
  • 在表单提交的网址中间添加问号

    当我单击表单中的提交按钮时 它会添加一个 就在 之前 因此 app pageName 更改为 app pageName 这是正常行为吗 代码只是基本的东西 angular module myApp controller MyCtrl fun
  • 如何在进入 Java 应用程序时更改光标

    我遇到了一些我无法解决的问题 我正在编写一个带有接受拖放操作的 JList 的 Swing Java 应用程序 我想在将文件或文件夹从系统拖到 Java 应用程序上时更改光标 我自己找到了 不过还是感谢克林顿的回答 这是我用过的 首先创建
  • Socket tcp C# 如何清除输入缓冲区?

    我正在为 Windows Phone 编写一个应用程序 我需要与服务器通信并传输数据 SERVER是用C 编写的 我无法修改它 客户是我必须写的 服务器被设计为客户端连接到它并传输数据 连接对于所有传输都保持打开状态 通过用 C 编写代码
  • Infinispan相当于ehcache的copyOnRead和copyOnWrite

    我计划在现有的网络应用程序中实施缓存解决方案 没什么复杂的 基本上是一个支持溢出到磁盘和自动驱逐的并发映射 将来可能需要对缓存进行集群 但不是现在 我喜欢 ehcache 的 copyOnRead 和 copyOnWrite 功能 因为这意
  • 将 Crypto++ 对象保存到 std::vector

    我想将 Crypto 密钥保存到std vector
  • 如何使scrollviewer滚动像素而不是组件(wpf)

    我试图让我的滚动查看器完美地滚动 也就是说 我有一个滚动查看器 它包含一个 stackpanel 堆栈面板包含一个用户制作的用户控件 并且它们可以在运行时动态增加或减少 问题是 假设我的堆栈面板中只有 2 个用户控件 滚动查看器只有 2 级
  • 拖动对象时启用其他事件

    我正在开发一个控制台 我想将按钮拖动到网格中 要拖动按钮 我使用以下过程 Public drag As Boolean False Public ptX As Integer 0 Public ptY As Integer 0 Public
  • MongoDB:基于另一个集合从一个集合中进行条件选择

    我对 MongoDB 相当陌生 需要帮助根据另一个集合的数据对一个集合进行选择或某种左连接 我有两个集合 动物和膳食 我想获取在某个日期 假设是 20171001 之后上次注册膳食的动物 以确定该动物是否仍然活跃 collection an
  • 在 SQL Server 上的特定位置添加列?

    我想知道是否有办法在创建 SQL Server 表后将列添加到特定位置 Thanks 您可以在 Management Studio 中执行此操作 您可以通过在保存更改之前生成 SQL 脚本来检查完成此操作的方式 基本上是通过以下方式实现的
  • React JS - 如何在状态更新之前阻止渲染 [Hooks]

    我有一个从 API 获取数据以向用户显示一些详细信息的组件 const ItemDetail match gt const item setItem useState null useEffect gt const abort new Ab
  • 请求获取日历事件响应 404,前提是分配了权限并使用 Microsoft Graph API 获取了 accessToken

    我想构建一个具有获取其他人的日历事件功能的网络应用程序 我已经注册了该应用程序https apps dev microsoft com 并要求Calendars Read允许 我确信管理员已同意分配这些权限 我让他通过管理员同意页面来完成
  • Kotlin 中的静态方法和变量?

    我希望能够将类实例保存到私有 公共静态变量中 但我不知道如何在 Kotlin 中执行此操作 public class Foo private static Foo instance public Foo if instance null i
  • 在 C++ 中嵌入 python/numpy

    我正在尝试在我的 C 应用程序中使用 python 3 带有 numpy 这需要将 C 数组发送到 python 执行计算 然后在 C 中检索结果 为此 我基于此处讨论的代码 https codereview stackexchange c
  • istream类的运算符>>的“返回值”如何工作?

    我试图理解这句话 int main fstream inf ex txt ios in char c while inf gt gt c cout lt lt c lt lt return 0 什么是 inf gt gt c 在上面的 wh
  • npm install -g生成器角度给出错误(需要同行)

    学习Node并尝试安装generator angular running npm install g generator angular 警告 EPEER 无效 电子邮件受保护 需要一个同伴 Generator karma gt 0 9 0
  • 从表单中按顺序显示 CFloop 项目

    我在 form html 页面上有以下表单 它提交到 cfpage cfm 名字 姓氏 地址和年龄都会显示 但顺序不一致 有时它会显示姓氏 名字 地址和年龄 在另一种情况下 它可能显示地址 名字 年龄 然后是姓氏 如何显示 CFLoop 项
  • 如何从函数返回数组并循环遍历它?

    include
  • 不使用任何字符串函数在php中反转字符串

    在昨天的采访中 我被问到如何在不使用 strrev 或 strlen 等任何字符串函数的情况下反转字符串 我在网站上找到了这个示例 但它给出了错误 是否可以在不使用 strlen 的情况下执行此操作 未初始化的字符串偏移量 1 in D x
  • 使用 CSS 媒体查询检测屏幕宽度

    我猜是因为你可以使用媒体查询来做到这一点 media min width 500px 在某些时候 CSS 样式表必须知道屏幕的宽度 无需使用 Javascript 是这样吗 您可以使用device width这将测试屏幕的宽度 以 px 为