Question

我一直在寻找“响应式设计”的一些标准。而且大部分时间我都会得到类似的东西 - ＆gt; Responsive Design

然而！它说大多数网页说我应该使用以下最小宽度和最大宽度的智能手机，我知道我的智能手机的分辨率 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 */
}

最好的方法是什么？我希望我的Android设备 1280 x 720 （横向）使用一台css和一台 1280 x 720 的台式电脑来使用另一台。

Answer 1

这有助于您为设备生成媒体查询http://atmedia.info/

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

Answer 2

最好测试您的设计并找出适当的断点，并根据您的@media规则，而不是追逐特定的屏幕尺寸。有太多的屏幕尺寸专门适应所有屏幕尺寸，无论如何你都不需要。

Answer 3

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

因此，当您开发自己的网站时，请将浏览器尽可能地缩小（或者尽可能缩小支持范围）并使其首先看起来很好。这被称为“移动优先”开发。

执行此操作后，请将浏览器加宽，直到某些内容看起来破碎，奇怪或刚刚关闭。这就是你应该放置第一个媒体查询断点的地方。

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

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

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

祝你好运！

响应式设计/媒体查询

3 个答案: