CSS媒体查询@media and screen指令在部分(360、奇安信等)浏览器不生效的解决方案

2023-11-17

一、介绍出现问题的写法

@media screen and (width < 1024px) {
    .__flex_other {
      display: none;
    }
  }

可以看到,乍一看没什么问题,而且在chrome、edge等浏览器也生效,但是在360浏览器等其它浏览器进行测试时,发现这段代码的指令没有被执行。

二、解决问题的写法

@media screen and (max-width: 1024px) { // 仅此行进行了改动
    .__flex_other {
      display: none;
    }
  }

就是如此简单,在chrome或其它主流浏览器中,已经适应了会出现问题的写法,但是还有很多浏览器没有适配' (width < 1024px) '这种写法,所以要换成更具有适配性的方法。这也是浏览器适配中出现的一个小bug

帮到你可以点个赞哈哈

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

CSS媒体查询@media and screen指令在部分(360、奇安信等)浏览器不生效的解决方案 的相关文章

  • iPad Safari 100% 高度问题

    我的页面上有一个模态 div 它使背景变灰 如果我将overlay div的高度设置为100 它在IE 桌面 上工作正常 但在iPad Safari上 完整的高度不会变灰 究竟是什么问题 这与固定位置 视口有关吗 请帮忙 下面是相同的 CS
  • 我的整个 Rails 应用程序仅从一个文件获取 css 为什么

    我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css 我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从p
  • 粘表行

    我正在尝试实现一个像 iOS 那样的日历列表视图 基本上 我现在正在做的就是循环遍历我的事件数组 如果是新日期 则打印日期标题 否则打印日历事件 我想让日期标题行保持粘性 直到它们 滚动走 我怎样才能做到这一点 我看到很多关于粘性标题的示例
  • TYPO3 显示子页面的内容,包括 css 类

    使用以下打字稿 我从一页上的子页面获取所有内容 lib allPid COA lib allPid 10 HMENU 10 special directory special value 2 1 TMENU 1 expAll 1 NO do
  • 垂直对齐两个弹性项目[重复]

    这个问题在这里已经有答案了 我有一个弹性容器 container和两个弹性项目 item one and item two 我想将第一个项目垂直居中并将第二个项目粘在底部 我不知道如何在这种情况下垂直对齐第一项 HTML div class
  • 在 R Shiny 中,如何使用可排序 js 将其在列表中出现的顺序次数附加到每个列表元素?

    下面的可重现代码适用于将元素从一个面板拖动到另一个面板 并在 拖动到 面板中自动使用 HTML CSS 对拖入的每个元素进行排名顺序编号 但是 我现在尝试附加到每个 拖动到 列表元素的末尾 使用某种形式的paste0 我假设 该元素在 拖至
  • 加载背景图像的图像不显示

    我真的很困惑 我正在尝试创建一个带有图标和一些按钮的登陆页面 但我无法设法使我正在使用的背景图像显示出来 即使它是根据 Chrome 的开发工具包加载的 我只有这些行 索引 html div class row div class tryh
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 如何在不设置动画的情况下突然更改 CSS 动画中的属性

    这是我试图弄清楚的 但没有使用 51 关键帧作为实现更改的黑客方法transform origin 这里有一个小提琴演示 http jsfiddle net p7pswnpq keyframes spin 0 transform origi
  • 媒体查询:如何定位桌面、平板电脑和移动设备?

    我一直在对媒体查询进行一些研究 但我仍然不太明白如何定位特定大小的设备 我希望能够针对台式机 平板电脑和移动设备 我知道会存在一些差异 但如果有一个可用于针对这些设备的通用系统 那就太好了 我发现的一些例子 Mobile only scre
  • 响应式2列2行布局

    我一直在试图弄清楚如何创建这个布局 我有一个 2 列布局 左列有 1 行 右侧有 2 行 我试图让它流畅地调整 我遇到的问题是 我希望右侧顶部图像的顶部与左侧图像的顶部对齐 而底部图像的底部与左侧图像的底部保持对齐 我应该使用桌子吗 这是我
  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div
  • CSS 中的边框图像开头

    MDN 是这样定义的边框图像开始 https developer mozilla org en docs Web CSS border image outset border image outset 属性描述了边框的数量 图像区域超出边框
  • 横向旋转到纵向时的字体大小怪异 - CSS 媒体查询 - iPhone5 Safari

    我已经用谷歌搜索了这个 但无法弄清楚 谢谢你的帮助 Studiolynch com 响应式和流体布局 在 iphone 5 Safari 中完美运行 除了从横向模式旋转到纵向模式会使字体大小小于应有的大小 但是 如果您最初以纵向模式加载页面
  • jquery 文本旋转

    我在 div 中有一个简单的文本 如下所示 div div This is an example text div div 我希望 div 内的文本旋转 20 30 度 我已经找到了this https stackoverflow com
  • Chrome 中的错误或 CSS 错误? (隐藏可见性的锚点)

    在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq
  • 从 PHP 生成渐变颜色

    我想知道如何构建一个给出颜色代码和 显示该颜色的渐变 例如 function generate color int colorindex Generate 10 pale colors of this color 请帮我 迈克尔引用的代码相
  • 将引导程序中的表单居中不起作用[重复]

    这个问题在这里已经有答案了 我试图将我的表单置于 div 中 但我使用的方法不起作用 我尝试使用引导文档中所述的 justify content center 属性 但它没有将其居中 当我尝试将其居中但应用时display flex and
  • 带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误

    Safari 和 Chrome 以及 Opera 和 Firefox 都可以处理 hover伪类和相邻兄弟选择器 a hover div 这有效 但是 当添加另一个相邻兄弟时 div hover a div Webkit 崩溃了 但是 如果
  • IE9-11 检测变换样式:preserve-3d

    我为一个项目制作了一个 3d 类型的菜单 自然 IE 会引起问题 因为 IE10 即使 3d 变换工作 也不支持变换样式 preserve 3d 我尝试了解决方法 通过对 3d 菜单容器的每个子元素应用变换 但至少可以说 动画看起来很糟糕

随机推荐

  • 异常类的定义、种类、抛出、声明和捕获

    目录 异常类定义 异常处理的必要性 异常处理 Java常见异常种类 1 Error 2 Exception 1 运行异常类Runtime Exception 2 非运行异常类Non RuntimeException 常见异常类 抛出异常th
  • 大话oracle rac 集群,大话Oracle RAC:集群、高可用性、备份与恢复

    第1部分 集群理论篇 第1章 RAC初体验 2 1 1 本书使用环境 3 1 1 1 硬件环境 3 1 1 2 软件环境 4 1 1 3 本书使用的环境 6 1 2 如何在PC机上搭建RAC环境 8 1 2 1 需要下载的软件 8 1 2
  • 拒绝服务攻击 - 学习笔记

    拒绝服务攻击 学习笔记 前言 概述 拒接服务攻击是目前来说 较为难以防御的攻击方式之一 其防御的难点在于难以分辨 正常用户与恶意用户 同时 随着攻击模式的进步 花样也越来越多 但是 服务器方也升级了安全策略 传统上 单机的 Dos 攻击已经
  • java设计6大原则总结

    1 开闭原则 Open Close Principle 定义 一个软件实体如类 模块和函数应该对扩展开放 对修改关闭 开放 封闭原则的意思就是说 你设计的时候 时刻要考虑 尽量让这个类是足够好 写好了就不要去修改了 如果新需求来 我们增加一
  • 【亲测有效新手教程】Vscode连接远程服务器编辑并运行深度学习代码

    文章目录 前言 使用步骤 1 安装OpenSSH 2 安装Remote SSH 参考链接 前言 在服务器上通过桌面已经配置好了深度学习的环境 并且存放了相关代码以及数据集 之前使用向日葵连接服务器进行代码编写 使用下来发现有延迟 不够丝滑
  • Kotlin如何提供与Java的100%互操作性?

    Kotlin与Java可以100 互操作 当您在每篇博客文章 社区话题或YouTube上首次搜索有关Kotlin的信息时 如果该话题是关于Kotlin的 那么这个词肯定在每个人的名单上都表明Kotlin可与Java 100 互操作 让我们看
  • 几个值得研究的工具

    一 DLIB库 C 实现的机器学习算法库 有离线的人脸识别SDK 比openCV里的人脸识别库效果好 除了这个库 要找到合适的离线版本的人脸识别库很难 国内的阿里 腾讯 百度 都没有离线SDK 都是在线的 二 KEEL 工具 是一款开源的数
  • php使用smtp发送邮件(ssl链接方式)

    在这里我要介绍的是如何使用smtp进行发送邮件 分别介绍了普通链接和ssl链接两种方式 一 准备材料 smtp类下载地址 https download csdn net download panjiapengfly 10688054 二 代
  • 甲骨文发布适用于 MongoDB 的 Oracle Database API;Chrome 和 Edge 互相“拉踩”;树莓派驱动程序现可在 Android 上运行

    整理 宋彤彤 责编 屠敏 开源吞噬世界的趋势下 借助开源软件 基于开源协议 任何人都可以得到项目的源代码 加以学习 修改 甚至是重新分发 关注 开源日报 一文速览国内外今日的开源大事件吧 一分钟速览新闻点 倪光南 可适当聚焦 RISC V
  • C++随机数之default_random_engine

    头文件 include
  • kafka中partition数量与消费者对应关系

    kafka是由Apache软件基金会开发的一个开源流处理平台 kafka是一种高吞吐量的分布式发布订阅消息系统 它可以处理消费者在网站中的所有动作流数据 kafka中partition类似数据库中的分表数据 可以起到水平扩展数据的目的 比如
  • Extjs IE内存问题

    1 使用了ExtJS 3 1并且更改了模块加载方式之后 我的OPOA内存回收有所改进 记录一下概要 1 不用autoload url url scripts true 的方式 而使用eval response responseText 方式
  • 家乐氏董事会批准将于10月2日分拆为两家公司

    美通社消息 家乐氏公司宣布 其董事会正式批准之前宣布的分拆为两家独立上市公司 Kellanova 和 WK Kellogg Co 的计划 2023 年 10 月 2 日完成分拆后 家乐氏公司将更名为 Kellanova Kellanova
  • java笔记:接口的特征和使用

    接口 1 接口的定义 修饰符 interface 接口名 extends 父接口1 父接口2 零个到多个常亮定义 零个到多个抽象方法定义 零个到多个内部类 接口 枚举定义 零个到多个默认方法或类方法定义 修饰符可以为public或者省略 d
  • Java必备技能之环境搭建篇(基础环境)详细版

    本文都是 基于Window环境搭建 Java开发必备环境搭建 开发环境简图 基础版没有加入docker 本文重点在于基础环境 后期将在linux上 搭建基于容器化docker的开发部署环境 搭建思路 先单独搭建 最后集成搭建并配置 1 在w
  • 产品思维训练

    本周话题 现在P2P 平台新客户的拓展需要经过注册 绑卡 含实名认证 充值 交易几个步骤 从数据发现注册到绑卡这一步流失率很高 请分析一下原因 Bob 王 好多人记不住卡号 所以注册时不绑卡 一步步来可能流失率低些 另 注册一般就损失个人信
  • 安装live-server后启动时报错:bash: live-server: command not found

    live server详解 介绍以及安装 一 关于live server的介绍 live server插件实现了 修改文件浏览器自动刷新 浏览器自动打开项目 本地开发搭建临时的服务 二 关于live server的安装 1 安装node j
  • Qt第三十三章:阴影QGraphicsDropShadowEffect

    简单阴影 为QLabel QPushButton加阴影 class TestShadow QWidget def init self parent None super TestShadow self init parent self re
  • 关于在资源中的QML文件中访问本地Image文件(Qt的Bug)

    这里要讨论的内容是 将一个 QML 文件放置到 qrc 资源中后 需要访问本地目录的文件 比如图片的时候 遇到的一个在 Windows 和 Linux MeeGo 平台下表现不一致的 Bug 以及处理方法 事件起因 一个在资源文件中的 QM
  • CSS媒体查询@media and screen指令在部分(360、奇安信等)浏览器不生效的解决方案

    一 介绍出现问题的写法 media screen and width lt 1024px flex other display none 可以看到 乍一看没什么问题 而且在chrome edge等浏览器也生效 但是在360浏览器等其它浏览器