媒体查询设备宽度或分辨率

我的媒体查询出现问题。媒体查询设备宽度或分辨率

我将一个样式表的最大设备宽度设置为1024px，另一个样式表的最小设备宽度为1025px，然后使用百分比，以便内容适应浏览器的大小调整。

但是，我的大20inc屏幕使用与我的11.6英寸屏幕相同的样式表，我认为这是由于我的旧计算机与15英寸屏幕使用其他较小的样式表的分辨率？

因为我使用的是我的主要内容区域的百分比，所以这个区域在我的大屏幕上显得很好，显然我不希望内容散布在我的20英寸屏幕上，但在我的小11.6英寸屏幕上它看起来很小。

我在做什么错？针对设备是否有最佳做法，并使用百分比作为可行方案？我喜欢我的内容适应浏览器一点一点调整的方式。

我对媒体wueries的工作原理有所了解，但很想有一种方法可以用于大多数网站，比如使用设备宽度，宽度或分辨率等，因为我发现我需要继续添加样式表。

在此先感谢

来源

2014-04-06 DJC

我会用'最小width' /'MAX-width'过'分钟，设备width' /'MAX-设备width' 。如果阅读器有一个大分辨率屏幕，'max-device-width'将返回其总屏幕分辨率的宽度，而不是他实际浏览器窗口的宽度。 – agrm

或者你可以同时使用两者。 @media屏幕和（min-width：Xpx），屏幕和（min-device-width：Xpx）{} – davidcondrey

要考虑的另一件事是，如果用户放大或缩小（ctrl +或ctrl - ）他们的浏览器，那么最小宽度和最大宽度值会改变（就好像屏幕更小或更大） – cockypup

这是最有可能是您的11.6英寸屏幕具有高像素密度屏幕（HiDPI）。这将使它的分辨率几乎等于20英寸的屏幕。因此，它们将具有相同的样式（最大设备宽度/最小设备宽度），尝试使用DPI或像素比率来定位设备。 有关更多信息，请参阅此指南（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）。

此外，您可能需要添加视口来调整文字大小。您<head>标签良好的recommened语句是（http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972）：

<meta name="viewport" content="width=device-width, initial-scale=1">

来源

2014-07-10 13:27:01 Scott

媒体查询设备宽度或分辨率

回答

相关问题