媒体查询在CSS中 [英] Media queries in CSS

问题描述

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

 < ; link href =css / mobile-tablet.cssmedia =all and（min-device-width：600px） =stylesheettype =text / css/> 
  

如果我这样做，智能手机也会获得该CSS。是否有可能以另一种方式做到这一点？我不知道你是否可以用厘米来检查像素的数量和屏幕的物理宽度，或者是否有更好的方法，但是。

解决方案您可以尝试这些媒体查询，它可以帮助您。

 < link rel =stylesheettype =text / csshref =ipad.cssmedia =仅屏幕和（最小设备宽度：481px）和（最大设备宽度：1024px）/> 
< link rel =stylesheettype =text / csshref =iphone.cssmedia =only screen and（max-device-width：480px）/> 
  

使用设备宽度范围，您可以轻松定位设备，我知道有很多设备可以目标，但总的来说，你是以这种方式瞄准设备的。

I am trying to apply a CSS for tablets. Tablets have larger displays but the pixel density is not as high as on for example the iPhone 4, Samsung Galaxy Nexus etc.

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

If I do that the smartphones will also get that CSS. Is it possible to do this in another way? I don't know if you can check both the number of pixels and the physical width of the screen in centimeters or if there are better ways but.

解决方案

You can try these media queries it might help you.

<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)" />

Use the range of device width and you can target the devices easily i know there are lot of devices to target but in general you target the devices this way.

这篇关于媒体查询在CSS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！