1,我针对屏幕分辨率大于1920px的屏幕写了一个media查询
@media only screen and (min-width: 1920px) {
// 样式代码省略
}
结果发现在不同屏幕,屏幕分辨率相同下,CSS查询的结果不同:
一台笔记本:1920x1080,media查询结果为真
一台大屏幕的显示器:1920x1080,media没有查询到。
有哪位知道,造成这种情况的原因是什么?是我使用的这个媒体查询功能min-width有问题吗?
1,我针对屏幕分辨率大于1920px的屏幕写了一个media查询
@media only screen and (min-width: 1920px) {
// 样式代码省略
}
结果发现在不同屏幕,屏幕分辨率相同下,CSS查询的结果不同:
一台笔记本:1920x1080,media查询结果为真
一台大屏幕的显示器:1920x1080,media没有查询到。
有哪位知道,造成这种情况的原因是什么?是我使用的这个媒体查询功能min-width有问题吗?
我觉得这个是我自己坑了下自己,我把media查询的界限写的太死了。改成下面这样就成功了:
@media only screen and (min-width: 1902px) { // 这里其实写1903也可以,但我不放心
// 样式代码省略
}
media查询width时,查询的是可视窗口的宽度,而这个可视窗口在不同系统下同一浏览器貌似是不同的,测试了下,mac下的chrome,window.innerWidth和document.body.clientWidth是相等的,在win7下的某个版本下的chrome(没查具体是哪个版本),window.innerWidth - document.body.clientWidth = 17,在win10下也是17,但是不知道为什么win7下media查询成功了,而win10下没成功。
3 回答1.4k 阅读✓ 已解决
2 回答2.4k 阅读✓ 已解决
2 回答1.7k 阅读✓ 已解决
3 回答1.3k 阅读✓ 已解决
2 回答1.1k 阅读✓ 已解决
2 回答739 阅读✓ 已解决
1 回答1.1k 阅读✓ 已解决
推测
楼主笔记本用了win10
楼主为了解决字体发虚的问题,调整过 设置自定义缩放级别