我正在尝试为平板电脑应用 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/