CSS媒体查询的使用

CSS媒体查询的使用media 屏幕类型 常见的媒体类型 媒体查询的条件 媒体查询的逻辑操作符 案例展示

媒体查询的作用是,可以获取设备真实的宽度,在进行响应式布局的时候,我们必须要设置媒体查询。

@media + 屏幕类型 { }

常见的媒体类型:

CSS媒体查询的使用

CSS媒体查询的使用

媒体查询的条件:

CSS媒体查询的使用

媒体查询的逻辑操作符:

CSS媒体查询的使用

 案例展示:

CSS媒体查询的使用

CSS媒体查询的使用

CSS媒体查询的使用 CSS媒体查询的使用

 CSS媒体查询的使用

CSS媒体查询的使用 CSS媒体查询的使用

CSS媒体查询的使用

媒体查询的引入:

CSS媒体查询的使用 

 

注意:

1. 在书写媒体条件的时候,需要将媒体条件写在小括号中,一个小括号中只能书写一个媒体条件,在媒体条件属性后的属性值,不能书写分号

2. 在书写媒体查询的时候,我们一般要将媒体查询写到样式的最下面,(以避免因为写在前面,导致样式不生效)

3.CSS媒体查询的使用

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/215681.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 下午1:41
下一篇 2026年3月18日 下午1:41


相关推荐

  • mac用什么软件录屏_macbookair录屏快捷键

    mac用什么软件录屏_macbookair录屏快捷键录屏软件哪个好?你是否遇到过需要记录手机或者电脑屏幕的时候,就像是打着游戏、看着剧,突然想要记录此时屏幕上的内容。其实很多的场景都可以使用录屏软件来记录屏幕上的内容,像是工作、学习、娱乐上的内容。那有什么好用的录屏软件和方法,一起来看看下面有关的方法介绍!分享录屏软件一、手机专业录制软件如果你在手机上查看视频的话,除了使用手机中的屏幕录制方法。还可以使用专业的录屏软件。如借助手机中的“嗨格式录屏大…

    2025年11月25日
    5
  • celery最佳实践

    celery最佳实践

    2022年1月6日
    44
  • J2EE架构分析

    J2EE架构分析J2EE 架构是当前主流的架构之一 目前大多数企业采用 J2EE 技术的结构设计与解决方案 J2EE 体系结构提供中间层集成框架用来满足无需太多费用而又需要高可用性 高可靠性以及可扩展性的应用的需求 通过提供统一的开发平台 J2EE 降低了开发多层应用的费用和复杂性 同时提供对现有应用程序集成强有力支持 完全支持 EnterpriseJa 有良好的向导支持打包和部署应用

    2026年3月19日
    2
  • CentOS 6.5 & CentOS 7 rpm安装ftp服务端与ftp客户端「建议收藏」

    CentOS 6.5 & CentOS 7 rpm安装ftp服务端与ftp客户端「建议收藏」一、rpm安装ftp服务端1、查看是否安装vsftprpm-qa|grepvsftpd如果出现vsftpd,说明已经安装vsftp2、下载vsftpd:我这里下载的是vsftpd-2.2.2-24.el6.x86_64.rpm3、安装vsftpdrpm-ivhvsftpd-2.2.2-24.el6.x86_64.rpm4、测试是否安装成功servicevsftp…

    2022年10月21日
    3
  • 使用AOP实现自定义注解以及获取用户请求IP

    使用AOP实现自定义注解以及获取用户请求IP使用 AOP 实现自定义注解功能 1 先导入 AOP 依赖 2 编写一个注解 3 使用 AOP 对注解进行增强完成验证邮箱的逻辑 4 在需要进行邮箱验证的方法上添加自定义注解 VerifyMailbo value true 表示需要进行邮箱验证 VerifyMailbo value false 表示不需要进行邮箱验证使用 AOP 对 controller 方法进行增强使用 IP 工具类获取用户请求 IP 我的学习论坛

    2026年3月17日
    2
  • LSD_SLAM「建议收藏」

    LSD_SLAM「建议收藏」LSDSLAM1.Overview三大模块2.Posetracking2.1直接法2.2LSD的直接法3.Depthmapping3.1Keyframeselection3.2DepthMapCreation(DepthMapPropagation)3.3DepthMapRefinement3.3.1参考图像帧选取3.3.2立体匹配策略3.3.3不确定性估…

    2022年6月6日
    25

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号