CSS 媒体查询 @media【详解】
CSS 媒体查询的用途
通过CSS媒体查询,可以根据媒体特征使用对应的最佳样式,来实现不同设备的响应式自适配。
/* 设定在宽度为320px~480px,分辨率是150dpi的设备上行高为 1.4 */
@media only screen and (min-width: 320px) and (max-width: 480px)and (resolution: 150dpi) {body { line-height: 1.4; }
}
CSS 媒体查询的语法
@media 媒体类型 媒体特征表达式{}
媒体类型
- all 【默认值】 匹配所有设备,无论是打印设备还是其他普通的现实设备。
- screen 除打印设备和屏幕阅读设备以外的所有设备
- speech 能够“读出”页面的屏幕阅读设备,通常供残疾人士使用
- print 在打印和打印预览的时候生效
使用逗号同时指定多个媒体类型
@media screen, print { ... }
实用范例:打印时,隐藏页面的头部和尾部
@media print {header, footer {display: none;}
}
媒体特征
常用媒体特征有:
设备像素比 resolution
/* 设备像素比等于2 */
@media (resolution: 2dppx) { ... }/* 设备像素比不小于2 */
@media (min-resolution: 2dppx) { ... }/* 设备像素比不大于2 */
@media (max-resolution: 2dppx) { ... }
判断设备是横屏还是竖屏 orientation
/* 横屏 */
@media (orientation: landscape) {}
/* 竖屏 */
@media (orientation: portrait) {}
设备高度的查询与匹配 height、min-height、max-height
/* iPhone X高度 */
@media (height: 812px) {}
/* 如果高度小于600px */
@media (max-height: 600px) {}
设备宽度的查询与匹配 width、min-width、max-width
@media (max-height: 480px) {}
判断深色模式 prefers-color-scheme
no-preference
表示系统没有告知用户使用的颜色方案。light
表示系统倾向于使用浅色模式。dark
表示系统倾向于使用深色模式。
/* 深色模式 */
@media (prefers-color-scheme: dark) {body { background: #333; color: white; }
}
/* 浅色模式 */
@media (prefers-color-scheme: light) {body { background: white; color: #333; }
}
js判断深浅模式
// 是否支持深色模式,返回true或false
window.matchMedia("(prefers-color-scheme: dark)").matches;
经典范例——对现有网页快速进行深色模式改造的技巧
@media (prefers-color-scheme: dark) {body { filter: invert(1) hue-rotate(180deg);background-color: #000;}img {filter: invert(1) hue-rotate(180deg);}
}
对浅色模式、文字颜色和背景色等直接使用滤镜进行反相,自然就变成深色模式了,无须逐个对颜色进行重置,一行简单的filter:invert(1)就可以搞定。不过对于图片元素,如果进行反相操作,效果会很奇怪。此时,可以再次反相,将图片还原成真实颜色。
效果和完整代码见 https://demo.cssworld.cn/new/7/1-1.php
filter:invert(1)这种“偷懒”的技巧只适合用于不太重要的页面。
filter滤镜在Safari浏览器中会带来潜在的渲染问题。
判断是否关闭不必要的动画 prefers-reduced-motion
no-preference
表示用户没有通知系统任何首选项。reduced
表示用户已通知系统,他们更喜欢删除或者替换基于运动的动画,因为该类型动画会引发前庭功能紊乱患者的不适(类似晕车),或者一部分人就是单纯动画疲劳,也可能想要更省电。
@media (prefers-reduced-motion) {* {animation: none;transition: none;}
}
判断是否能悬停 any-hover、hover
测试是否有任意可用的输入装置可以悬停(就是hover行为)在元素上。例如,鼠标这个输入装置就可以控制鼠标指针的位置,以及悬停在元素上。
none
表示没有输入装置可以实现悬停效果,或者没有可以实现指向的输入装置。hover
表示一个或多个输入装置可以触发元素的悬停交互效果。
figcaption {display: none;
}
figure:hover figcaption {display: block;
}
@media (any-hover: none) {figcaption {display: block;}
}
效果和完整代码见 https://demo.cssworld.cn/new/7/1-2.php
hover 的语法和作用与any-hover是一样的,两者的主要区别在于,any-hover检测任意输入装置,而hover只检测主要的输入装置。
none
表示主输入装置根本无法悬停或无法方便地悬停(例如,使用长点击来模拟悬停,而长点击这种交互并不方便),或者没有主输入装置。hover
表示主输入装置可以触发元素的悬停交互。
figcaption {display: none;
}
figure:hover figcaption {display: block;
}
@media (hover: none) {figcaption {display: block;}
}
判断是否可点击 any-pointer、pointer
none
表示没有可用的点击设备。coarse
表示至少有一个设备的点击不是很精确。例如,使用手指操作手机就属于点击不精确。fine
表示有点击很精准的设备。例如,用鼠标操作的计算机浏览器。
pointer 的语法和作用与 any-pointer 是一样的,两者的主要区别在于 any-pointer 检测任意输入装置,而 pointer 只检测主要的输入装置。
none
表示主输入装置点击不可用。coarse
表示主输入装置点击不精确。fine
表示主输入装置点击很精准。
@media (pointer: coarse) {input[type="checkbox"] {width: 30px;height: 30px;}
}
效果和代码见 https://demo.cssworld.cn/new/7/1-3.php
在可以使用鼠标的浏览器中复选框是原始的大小;而在没有连接鼠标的平板电脑上访问,复选框就会被放大,手指就很容易选中复选框。
媒体特征表达式
媒体特征配合上或 or
、且 and
、非 not
即媒体特征表达式。
/* 如果设备更新频率慢,或者不支持鼠标行为 */
@media (update: slow) or (hover: none) {}
匹配规则
从后向前匹配,一旦匹配成功则终止
/* 规则1 */
@media (min-width: 320px) { html { background: red; }
} /* 规则2 */
@media (min-width: 800px) { html { background: green; }
} /* 规则3 */
@media (min-width: 1024px) { html { background: blue; }
}
1000px的设备背景色为 green
/* 规则1 */
@media (min-width: 1024px) { html { background: blue; }
} /* 规则2 */
@media (min-width: 800px) { html { background: green; }
} /* 规则3 */
@media (min-width: 320px) { html { background: red; }
}
1000px的设备背景色为 red
匹配策略 —— 移动优先【推荐】
使用min-width匹配页面宽度,首先考虑的是移动设备使用场景,(默认)查询的是最窄的情况,再依次考虑设备屏幕逐渐变宽。
/* 当设备宽度还不足320px的移动设备情况 */
html { } /* 宽度为320px至1024时 */
@media (min-width: 320px;) { } /* 宽度大于1024px至无穷时 */
@media (min-width: 1024px) { }
匹配策略 —— 桌面优先
采用max-width判断页面宽度的匹配情况。首先考虑在一般桌面显示器上的效果,再依次递减宽度,考虑更窄设备上的场景。
移动优先具有优势,但大部分项目因为历史或者成本原因无法重构页面。所以只能采用桌面优先,在桌面样式基础上进行降级处理。
CSS 媒体查询 @media【详解】相关推荐
- CSS媒体查询“@media”在调试中切换移动设备时不起作用。
今天在学习CSS响应式网页设计中的媒体查询,遇到个有趣的问题,主要就是在调试过程中切换移动设备和电脑,同样的代码将有不同的结果.在切换移动设备调试时@media对于"max-width=97 ...
- CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式
前言 在最近学习中突然看到了在媒体查询中prefers-color-scheme:dark监听的使用,然后就模仿里边写了个简单例子,代码如下: body {background-color: #f5f ...
- css media区间宽带显示,css媒体查询 @media适配不一样大小窗口
版权声明:本文为博主原创文章,未经博主容许不得转载. https://blog.csdn.net/Lockey23/article/details/75452536css CSS3 @media是什么 ...
- css3媒体查询导航设计,如何用纯css 媒体查询media queries实现响应式汉堡导航菜单...
Hamburger_icon PC端和手机移动端均适配,依据设备的宽度大小决定是否值下拉菜单样式 一. head里添加meta移动端的样式 width viewport的宽度 height viewp ...
- CSS 媒体查询@media 适配 iPhone 6/7/8、iPhone 6/7/8 Plus、 iPhone X和ipad横竖屏
<style lang="less" rel="stylesheet/less" type="text/less" scoped> ...
- CSS媒体查询 @media
PC端和移动端自适应,自动换行 1 @media screen and (max-width: 850px) { /*以下代码在屏幕小于850的情况下执行*/ 2 .dsad{ /*父类*/ 3 di ...
- 媒体查询(@media语法、案例)详解
媒体查询 @media 语法 1. 直接写在 CSS 样式中 2. 针对不同的媒体设备,从外部链入不同的 stylesheets(外部样式表) 使用 @media 实现网页变色龙 @media 语法 ...
- media覆盖了css,为什么我的CSS媒体查询被忽略或覆盖?
这让我发疯!我看了一些关于Stackoverflow的问题,发现ID元素的优先级高于类元素(这很高兴知道,但是我感觉这不是我的问题).这是我苦苦挣扎的NAVIGATION菜单.(我使用最大宽度顺便说一 ...
- 使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
- css媒体查询(手机、平板、PC)
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<7 ...
最新文章
- BERT可视化工具bertviz体验
- LINQ系列:LINQ to SQL Exists/In/Any/All/Contains
- [BZOJ1419] Red is good(期望DP)
- 谈 数学之美 和 看见
- 一、bootstrap4基础(布局系统、栅格系统、显示与隐藏、对齐与排列、内容排版、代码与图文、表格样式、颜色和边框、工具类)
- 【渗透测试】XSS注入原理
- 《银花季刊》版式海报欣赏,看大咖的神操作
- 028 kafka面试小节
- 惠普打印机驱动程序安装失败解决
- VM虚拟机BT5下对usb无线网卡的配置
- Android或者是IOS/普通屏全面屏及qq浏览器和qq内置浏览器判断
- 试用具体例子说明为什么在运输连接建立时要使用三次握手。说明如不这样做可能会出现什么情况。
- 丸子小程序打通视频号,变现更便捷~
- php redis访问量,redis实现点击量浏览量
- 当Sklearn遇上Plotly,机器学习变得如此简单、易于理解
- MySQL如何同时删除主外键关联的两张表中的数据
- 云原生社区 meetup 第四期广州站报名中
- Octopus11.4并行版安装
- Z世代偏爱怀旧IP,B站UP主不可忽视的流量蓝海
- 贵州将大力推进城市更新“四改”工作