css媒体查询边界值是否包含?
CSS 查询 是否 包含 媒体 边界值
2023-06-13 09:13:08 时间
答案:对于 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;
}
相关文章
- css样式表
- 纯CSS画三角形
- css @media 查询和屏幕适配
- Tailwind.css not included in NextJS Production
- 【说站】css中a标签伪类如何使用
- 【说站】css中有哪些类型的样式表
- css颜色渐变样式怎么用_文本效果内置样式渐变填充
- 静态彩虹页面(html、css)
- 页面布局(下):引入 Tailwind CSS 框架构建博客应用 UI 界面
- CSS新规范:样式查询
- HTML&CSS精选笔记_表格与表单详解编程语言
- 纯CSS + 媒体查询实现网页导航特效详解编程语言
- JQ + CSS实现浪漫表白必备详解编程语言
- css中filter用法详解编程语言
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- CSS与MySQL合力提升网页性能(css与mysql结合)
- div+css布局入门
- 用CSS实现表单form布局
- 实用的利用CSS+<em>标签来完成一个三角形的制作
- 把JS与CSS写在同一个文件里的书写方法
- DIV和CSS排版中制作细线条的方法小结
- css浏览器不兼容原因分析及解决办法
- csdn博客的css样式v3
- juqery学习之六CSS--css、位置、宽高
- php实现压缩多个CSS与JS文件的方法