媒体查询在 VueJS 样式标签中不起作用

2024-05-04

我正在尝试在 VueJS 组件的样式标签中使用 @media 。 @media 中的样式始终有效,而不是使用宽度规则。

<template>
    <header class="header"></header>
</template>

<script>
    export default {

    }
</script>

<style scoped>
    .header {
        height: 2000px;
        background-color: black;
    }

    @media only screen and (min-width: 576px) {
        .header {
            height: 2000px;
            background-color: white;
        }
    }
</style>

但是它在原始 .html 文件中按预期工作。


问题解决了。它与 vue.js 或任何东西无关。这是因为 index.html 文件中缺少元标记。

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

媒体查询在 VueJS 样式标签中不起作用 的相关文章

  • 有没有办法改变输入类型=“日期”格式?

    默认情况下 输入type date 显示日期为YYYY MM DD 问题是 是否可以将其格式强制为 DD MM YYYY 无法更改格式 我们必须区分有线格式和浏览器的表示格式 接线格式 The HTML5日期输入规范 https www w
  • 在 javascript、jQuery 或 css 中,如何让 div 或 iframe 展开以填充其余空间

    我有三个 iframe 我将顶部 iframe 设置为 50px 高度 将底部 iframe 设置为 50px 但我希望中间 iframe 扩展以填充其余空间 有没有一种技术可以用来对任何窗口屏幕尺寸执行此操作 谢谢 example
  • 如何适应特定子元素的宽度?

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保
  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi
  • 当百分比填充定义元素高度时忽略 max-height

    The max height当内部填充大于最大高度值时 属性值似乎被忽略 例如 在元素上设置此类会导致最大高度被忽略 max height ignored height 0 or auto makes no difference max h
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • @font-face 和 font-variant 是个坏主意吗?

    如果我使用 font face字体和font variant small caps对于相同的选择器 字体将回退到 Safari 中的下一个系统默认字体 我该如何解决这个问题 我一开始在创建一个示例来复制您的问题时遇到了一些麻烦 这让我意识到
  • HTML 元素的默认背景颜色是什么?白色还是透明?

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht
  • jQuery 或 Javascript - 如何禁用窗口滚动而不溢出:隐藏;

    您好 是否可以在不使用的情况下禁用窗口滚动overflow hidden 当我悬停一个元素时 我试过 chat content on mouseenter function document scroll function e if e h
  • Vuejs 错误:客户端渲染的虚拟 DOM 树与服务器渲染的不匹配

    我在我的应用程序中使用 Nuxt js Vuejs 并且我在不同的地方不断遇到此错误 The client side rendered virtual DOM tree is not matching server rendered con
  • 有没有办法使用 Vue-Router 从动态 URL 中删除目录?

    我为一家保险经纪公司构建了一个 vue js Web 应用程序 其中每个代理人都有自己的网站 该网站是根据他们的个人资料生成的 这就是我的 vue router 索引文件中的链接的样子 path agents id name AgentSi
  • 删除圆形图像周围的边框

    我有一个圆形图像 png 文件 中间是透明的 我需要将图像内的背景设置为纯色 为此 我将背景设为纯色 然后将border radius 50 但这会产生一条丑陋的小白线 有没有办法摆脱这个问题 或者我必须在图像编辑器中手动为图像着色 div
  • 像在 tumblr 注册页面上那样鬼写

    有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段 其中有一些褪色的文本 然后当您单击它并键入时 它会附加一些文本 tumblr com 您
  • CSS 显示无不工作

    media screen and min width 900px and max width 1215px menu display none 这不起作用 div 仍然可见 但是 如果我将 div 更改为 div class menu 代替
  • 将按钮文本放在一行上

    我的按钮文本在 safari 中显示在一行上 即使在初次单击后 但是在 google chrome 上 当您第一次到达该按 钮时 我的按钮将显示在一行上 但是当您浏览更多帖子并再次遇到 加载更多 按钮时 文本搞砸了 这只发生在谷歌浏览器上
  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用
  • 如何使用 CSS 媒体查询检测设备方向?

    在 JavaScript 中 可以使用以下方式检测方向模式 if window innerHeight gt window innerWidth portrait true else portrait false 但是 有没有一种方法可以仅
  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会
  • 如何简化这个 LESS CSS Box-shadow mixin? (带有“方向”的多个阴影)

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir

随机推荐

  • 如何在ArangoDB中设置集群和分片?

    我想在arangoDB中使用分片 我已经制作了协调器 DBServers 如文档2 8 5中所述 但仍然有人可以详细解释它 以及我如何能够在分片之后和之前检查查询的性能 可以测试您的应用程序对于本地集群 所有实例都在一台机器上运行吗 htt
  • 来自 Toplink 表达式的 SQL 查询

    我有一个 oracle toplink expressions Expression 表达式对象 它是使用 oracle toplink expressions ExpressionBuilder 创建的 我想找到它的等效 SQL 查询 比
  • 智能表 - 预选特定行

    我正在使用智能表 我需要预先选择特定行 因此 在加载我的列表后 我循环进入它并设置isSelected当我到达我想要选择的项目时属性 Preselect a row for var i 0 len scope displayCollecti
  • 多线程文件写入

    我正在尝试使用多个线程写入大文件的不同部分 就像分段文件下载器所做的那样 我的问题是 执行此操作的安全方法是什么 我是否打开文件进行写入 创建线程 将 Stream 对象传递给每个线程 我不希望发生错误 因为多个线程可能同时访问同一个对象
  • 如何使用ajax从服务器接收返回的数据?

    基本上我有一个带有用户名文本框和提交按钮的表单 现在我想要的是 当用户在文本框中输入文本时 它应该获取文本框值并将用户名发送到服务器 以便服务器可以检查该用户名是否被任何其他用户占用 我可以将文本值发送到服务器 但我不知道如何接收回一些数据
  • 精简 Liferay:删除 Hibernate 和其他未使用的应用程序

    我有一些有关 Liferay 与 hibernate 交互的问题 由于某些原因 我们希望从应用程序中消除这一层 因此有以下问题 我知道Liferay是与Hibernate一起打包的 并且通过使用Hibernate API简化了对Lifera
  • ContentPane 和 JPanel 之间有什么关系?

    我发现了一个示例 其中将按钮添加到面板 实例JPanel 然后将面板添加到容器中 由getContentPane 然后容器通过构造被包含到JFrame 窗户 我尝试了两件事 我把容器扔掉了 更详细地说 我向面板添加了按钮 实例JPanel
  • ServletContext 和 Session 对象

    我们从请求对象 HttpServletRequest 获得的 ServletContext 和 Session 对象的行为是否相同 会话是特定于用户的 Servlet 上下文本质上是全局的 在该 Servlet 的上下文内 这意味着访问该
  • 在 Java 中从字符串中提取第一个单词的最佳方法是什么?

    尝试编写一个简短的方法 以便我可以解析字符串并提取第一个单词 我一直在寻找最好的方法来做到这一点 我想我会用str split 但是我想从字符串中获取第一个单词 并将其保存在一个变量中 然后将其余的标记放入另一个变量中 有没有一种简洁的方法
  • 是否可以使 font-weight:bold 等于 500 而不是 700?

    我刚刚使用 Google Fonts 并发现了 Fira Sans 字体 很好 但我不喜欢 Bold 700 风格 它太大胆了 不符合我的喜好 但是 如果我选择中 500 样式 浏览器不会将其用于任何设置为font weight bold
  • 在python中求Legendre多项式的根

    我正在编写一个程序 通过勒让德 高斯求积求解积分 n 阶求积算法需要在某一时刻找到 n 阶勒让德多项式 Pn x 的根 并将它们分配给数组 Absc 表示 横坐标 Pn 是一个 n 阶多项式 在区间 1 1 上有 n 个独立的实根 我希望能
  • 在 Woocommerce 中以编程方式创建新产品属性

    如何通过插件为 WooCommerce 创建属性 我只找到 wp set object terms object id terms taxonomy append From 这个堆栈问题 https stackoverflow com qu
  • 将动态库 (.dylib) 复制到框架 (.framework)

    我有两个 XCode 项目 一个框架和一个客户端应用程序 我的应用程序依赖于我的框架 一切都运行良好 每次应用程序都会重新编译框架 项目构建路径设置正确 完全没问题 现在框架开始使用第 3 方 dylib 文件 并且它与 dylib 链接
  • 允许任何内容的 XML 架构 (xsd:any)

    我需要一个允许任何事情的 XML 模式示例 这可能听起来很奇怪 但我需要它来调试我当前的模式 问题是 我有一个在函数 我无法控制的 DLL 的一部分 中使用的复杂对象以及模式 并且该函数返回 XML 目前 该函数会抛出异常 因为在验证模式时
  • 对 java 9 ServiceLoader::load 方法以及如何提供服务实现的方式感到困惑

    在这个java文档中 https docs oracle com javase 9 docs api java util ServiceLoader html https docs oracle com javase 9 docs api
  • Hadoop安装问题:

    我跟着this http www bogotobogo com Hadoop BigData hadoop Install on ubuntu single node cluster phpHadoop 安装教程 不幸的是 当我运行全部启动
  • Python:“取消导入”、“重新导入”、“重置导入”?

    我调试 在 PyCharm 中 一个脚本 我在断点处停止 然后转到调试控制台窗口 然后从那里调用导入行 如下所示 import my util1 from my utils 然后我调用 my util1 到目前为止 一切都还好 然后我更改
  • GitHub API - 语言列表

    GitHub API 中是否有一个端点可以为我提供 GitHub 上所有语言的列表 我正在寻找与 github com 网站上 趋势 部分中的语言下拉列表类似的结果 不是直接来自 GitHub API The OP敏捷王牌 https st
  • Java 中非 ASCII 字符的 URL 解码

    我正在尝试用 Java 解码包含 编码字符的 URL 我尝试使用 java net URI 类来完成这项工作 但它并不总是正常工作 String test https fr wikipedia org wiki Fondation Alli
  • 媒体查询在 VueJS 样式标签中不起作用

    我正在尝试在 VueJS 组件的样式标签中使用 media media 中的样式始终有效 而不是使用宽度规则