CSS判断手机暗黑模式

这篇具有很好参考价值的文章主要介绍了CSS判断手机暗黑模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

手机有个功能到了晚上会自动变成深色也就是暗黑模式.这种情况下网页会自动变颜色.如果想自由控制暗黑模式下的html样式的话,可以用如下方式:

        @media (prefers-color-scheme:  dark) {
            /*html, body {*/
                /*filter: invert(1) hue-rotate(180deg);*/
            /*}*/
            .maill{
                margin-left: 0;
                margin-right: 0;
                margin-top: 0px;
                margin-bottom: 0px;
                width: 100%;
                max-width: 100%;
                background: rgb(255,255,255)!important;

                padding: 0px;
                padding-bottom: 20px;
            }
            /*img, video,audio{*/
            /*@include hover-change(#4B4B4B,white);*/
            /*}*/
        }

这就只会在暗黑模式的时候才生效!

CSS判断手机暗黑模式,我的碎屑世界,css,前端文章来源地址https://www.toymoban.com/news/detail-687131.html

到了这里,关于CSS判断手机暗黑模式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 手把手教你基于HTML、CSS搭建我的相册(上)

    其实有过一些粉丝咨询前端该从什么开始学,那当然是我们的前端基础三件套开始学起,HTML、CSS、javaScript,前端的大部分框架的底层还是围绕着前端三件套来搭建的,相信大家能够在很多平台中去找到一些前端三件套的体系教程,借着原力计划呢,凉哥也为大家带来前端三

    2024年02月02日
    浏览(43)
  • 手把手教你基于HTML、CSS搭建我的相册(下)

    经常有一些粉丝咨询前端该从什么开始学,那当然是我们的前端基础三件套开始学起,HTML、CSS、javaScript,前端的大部分框架的底层还是围绕着前端三件套来搭建的,相信大家能够在很多平台中去找到一些前端三件套的体系教程,借着原力计划凉哥也为大家带来前端三件套的

    2024年02月03日
    浏览(40)
  • css选择器分类及优先级判断

    目录 选择器分类 全局选择器 元素选择器 类选择器 ID选择器 合并选择器 内联选择器  选择器的优先级 css语法规则由两个主要部分构成:选择器,以及一条或多条样式声明。 全局选择器:* 元素选择器:标签名称 类选择器:class属性名(.) ID选择器:id属性名(#) 内联选择

    2023年04月09日
    浏览(43)
  • 判断css文字发生了截断,增加悬浮提示

    示例: 固定显示宽度,溢出显示...,利用了css的属性,想要实现成下面这样:  针对溢出的文字,hover显示全部。  提示很好加,使用tooltip组件就行了,难点是如何判断是否发生了文字溢出。 利用dom元素的 可视宽度 clientWidth  和 实际宽度 scrollWidth 不同就可以比较出是否发

    2024年02月04日
    浏览(37)
  • CSS 中的伪装大师:伪类和伪元素的奇妙世界

    🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入

    2024年01月22日
    浏览(43)
  • 期末前端web大作业——我的家乡陕西介绍网页制作源码HTML+CSS+JavaScript

    家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成

    2024年02月06日
    浏览(387)
  • web前端期末大作业:基于HTML+CSS+JavaScript制作我的音乐网站(带设计报告)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年02月09日
    浏览(54)
  • js判断是否手机模式

     

    2023年04月17日
    浏览(58)
  • 【web开发网页制作】Html+Css网页制作关于我的家乡(6页面)【附源码下载】

    【写在前面】之前学生时代自己也做了不少页面,现在毕业后也希望能慢慢的分享出来给大家,希望能给刚接触web开发的你带来一些启发。其实关于网页制作,没有大家想象中的那么难,接下来给大家详细介绍一下如何实现网页的制作,主要把思路整清楚了实现起来也很快。

    2024年02月08日
    浏览(73)
  • CSS 也能实现 if 判断?实现动态高度下的不同样式展现

    最近在群里,有个小伙伴问了这么一道很有趣的问题: CSS 能否实现,容器再某个高度下是某种表现,一旦超出某个高度,则额外展示另外一些内容 为了简化实际效果,我们看这么一张示意效果图: 可以看到,当容器高度没有超过某一个值时,没有箭头图标。反之,箭头图标

    2024年02月05日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包