响应式设计/媒体查询答案

【问题标题】：Responsive Design / Media Queries响应式设计/媒体查询
【发布时间】：2016-01-08 03:43:19
【问题描述】：

我一直在寻找“响应式设计”的一些标准，大多数时候我最终都得到了与此类似的东西 --> Responsive Design。

但是！它说大多数页面都说我应该为智能手机使用以下最小宽度和最大宽度，并且我知道 MY 智能手机的分辨率为 720 x 1280 并且不适合下面的媒体查询！

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
    /* Styles */
}

最好的方法是什么？我希望我的 1280 x 720（横向）的 android 设备使用一个 CSS，而一台 1280 x 720 的台式电脑使用另一个。

【问题讨论】：

具有相同分辨率的不同设备应该表现相同。您是否在 html/head 中使用过？
这也可能有用stackoverflow.com/questions/6747242/…
你不太可能得到一台屏幕为 720 x 1280 像素、屏幕为 1280 x 720 像素的台式电脑，是的，但宽度将是 1280 像素。
@randomizer 我的中有是的.
@Dijon 是的，我的意思是 1280 x 720 的 PC 屏幕，这与我的安卓横向尺寸相同。但我会以一种或另一种方式解决它>。

标签： android css responsive-design smartphone

【解决方案1】：

最好测试您的设计并找出适合它的断点，并以此为基础您的@media 规则，而不是追逐特定的屏幕尺寸。有太多的屏幕尺寸无法专门满足所有需求，而且您也不需要这样做。

【讨论】：

【解决方案2】：

我们应该围绕我们的内容进行媒体查询，而不是围绕特定设备（大部分情况下）*。

因此，当您开发您的网站时，将您的浏览器压缩到尽可能多的位置（或尽可能窄到您希望支持的位置），并首先让它看起来不错。这称为“移动优先”开发。

完成此操作后，请加宽浏览器，直到某些内容看起来损坏、奇怪或不正常。那是你应该放置你的第一个媒体查询断点的地方。

让它看起来不错，然后一遍又一遍地这样做，直到它看起来不错，无论你想支持多宽。

*然后，您可能希望在一些您知道人们用来查看您的网站的特定设备上查看您的网站，并确定您是否需要做任何额外的媒体查询工作（例如，如果段落换行奇怪）。

就您的特定媒体查询语法而言，the mozilla developer documentation 始终是一个很好的起点。

祝你好运！

【讨论】：

【解决方案3】：

这将帮助您为您的设备生成媒体查询http://atmedia.info/

还有标准设备的媒体查询：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

【讨论】：