html - CSS 中的媒体查询

标签 html css media-queries

我正在尝试为平板电脑应用 CSS。平板电脑具有更大的显示屏,但像素密度不如 iPhone 4、三星 Galaxy Nexus 等高。

<link href="css/mobile-tablet.css" media="all and (min-device-width: 600px)" rel="stylesheet" type="text/css" />

如果我这样做,智能手机也将获得该 CSS。是否可以通过其他方式做到这一点?我不知道您是否可以检查像素数和屏幕的物理宽度(以厘米为单位),或者是否有更好的方法。

最佳答案

您可以尝试这些媒体查询,它可能会对您有所帮助。

<link rel="stylesheet" type="text/css" href="ipad.css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" />

使用设备宽度范围,您可以轻松定位设备我知道有很多设备可以定位,但通常您可以通过这种方式定位设备。

关于html - CSS 中的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9512965/

相关文章:

css - 关于在用户屏幕分辨率大于 960px 时保持我的流体布局不变

javascript - 使用 ng-change Angular 隐藏元素

javascript - 通过 html jquery 验证的自定义消息未显示

php - 如何使弹出式目录类似于 CodeIgniter 用户指南中的目录?

javascript - 单例模式javascript

html - 实现这种效果的最简单方法?

html - 如何排列两个 HTML 列,其中一个具有固定部分,以便它们可以堆叠?

css - 有谁知道如何用 css 获得这种背景效果?

jquery - 为什么 jquery .next 和 .toggle 在这里不起作用

html - 使用缩放时宽度如何影响?