css - 关于屏幕尺寸而不是分辨率的媒体查询

标签 css mobile responsive-design media-queries resolution

是否有在 CSS 媒体查询中使用物理屏幕宽度的解决方法?今天,有些手机的分辨率超过了桌面显示器的分辨率。但是,手机仍应显示移动布局,桌面应显示标准布局。

所以我不能像下面的示例那样依赖基于像素的查询。相反,我需要物理测量或像素密度测量。

@media screen and (min-width: 700px) {

}

由于我还没有通过我的研究发现这样的测量值,所以它们可能不存在。无论如何,这个问题通常是如何解决的?

最佳答案

嗯,对于初学者来说,CSS 像素是 an angular measurement并且在设备之间进行了适当的标准化。不完全是,但足以让这在大多数情况下不是问题。

我个人在 em 中测量媒体查询,以便它们与我的字体大小相关。我的意思是,人们访问网站通常是为了阅读网站上的文本,所以只要每行的字数合理,我就满意了。

您真的不应该使用物理(设备)宽度进行测量,因为用户界面元素可能会占用空间(或者根本无法全屏运行浏览器)。

关于css - 关于屏幕尺寸而不是分辨率的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19475907/

相关文章:

javascript - 在手机/平板电脑屏幕上呈现光标的最佳策略?

javascript - 图像无法响应 AnythingSlider

jQuery 触摸可拖动响应滚动条/幻灯片/轮播?

jquery - 如何在 Slick 轮播元素之间添加空格

css - 在 rmd/rmarkdown 中格式化 h1、h2

css - Myspace 音乐排版问题

javascript - 选择后查看完整文件名

ios - iOS 客户端是否应该在服务器(微服务)失败时重试?

html - 在移动设备上查看时,3 个并排的 div 不会垂直堆叠

html - 响应式选项卡式布局可能吗?