首页 > 其他分享 >css媒体查询边界值是否包含?

css媒体查询边界值是否包含?

时间:2022-11-12 20:23:18浏览次数:44  
标签:container min color max 边界值 查询 width background css

答案:对于 min-width, max-width  这种,是左右边界值都包含的。

如果下一个写的媒体查询的区间包含了上一个的区间,以后写的为准,覆盖前一个,所以顺序也会影响媒体查询。

例如

以下是先写了 720-730 宽度的判断,后写的 480-720 的判断,所以以后写的为准,背景色为红色

@media screen and (min-width: 720px) and (max-width: 730px) {
                .container {
                    background-color: yellow;
                }
            }
@media screen and (min-width: 480px) and (max-width: 720px) {
                .container {
                    background-color: red;
                }
}
.container {
        width: 100%;
        height: 100%;
        background-color: blue;
}

以下先写了 480-720 ,则最终呈现的颜色为黄色

@media screen and (min-width: 480px) and (max-width: 720px) {
                .container {
                    background-color: red;
                }
            }
@media screen and (min-width: 720px) and (max-width: 730px) {
                .container {
                    background-color: yellow;
            }
}
.container {
        width: 100%;
        height: 100%;
        background-color: blue;
}

 

标签:container,min,color,max,边界值,查询,width,background,css
From: https://www.cnblogs.com/beileixinqing/p/16884559.html

相关文章

  • 基于CSS mask和clip-path实现切角的技巧
    本文翻译自TrickstoCutCornersUsingCSSMaskandClip-PathProperties,略有删改原作者:TemaniAfif我们最近使用CSSmask属性创建花哨的边框,本文将使用CSSmask和c......
  • DataBase - 查询 SQL 进阶
    查询每个部门工资最高的员工信息。SELECT e.emp_name,d.dept_name,e.salaryFROM empeinnerjoindeptdONe.dept_id=d.dept_idWHERE (e.dept_id,e.salary)......
  • CSS布局
    1.继承性(谁选中的范围越广,谁的优先级越底) 2.权重的计算   4.盒子模型(使用软件PxCook)   5.盒子模型(盒子的组成,边框,内边距,外边距的设置方法)   ......
  • PostgreSQL函数:查询包含时间分区字段的表,并更新dt分区为最新分区
    一、需求1、背景提出新需求后,需要在www环境下进行验收。故需要将www环境脚本每天正常调度但由于客户库无法连接,ods数据无法每日取,且连不上客户库任务直接报错,不会跑ods......
  • CSS弹性盒
    一、怪异盒模型含义:更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改属性:box-sizing box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素......
  • 篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)
    入门实战-从系统菜单功能的增删改查开始(一:查询和增加)检验数据库配置正确与否,并且检验EF配置的连接是否可用,需要从数据库中拉取数据在视图页面显示,这样流程才通。我建个......
  • 原生 HTML + CSS + JavaScript 写时钟
    时钟效果目录结构HTML代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......
  • 涨姿势了,这 4 个场景可用 CSS 完全取代 JS ~
    本篇通译自:​​#It’s2022.SometimesYouDon’tNeedJavascriptatAll​​1.颜色选择器我们通常需要通过复杂的JavaScript来实现一个类似下图的颜色选择器组件。好......
  • ODOO前端引用css如何修改页面属性
    odoo前端存在一些样式不合理的地方,如何通过ccs修改页面属性:1 通过页面属性class;2 新建模块后,创建static/src/css/styles.css文件  3 style.css内容十分简单,设......
  • 一个简单的查询学生信息的接口测试
    Test作业提交学习笔记编写一个业务接口(登录,查找学生等)打包成jar包在本机上面执行相应的命令,通过浏览器访问接口获得数据。(可选)将该jar包放在服务器上面运行,通......