设计和开发响应式网站媒体查询答案

【问题标题】：Designing and developing a responsive website media queries设计和开发响应式网站媒体查询
【发布时间】：2014-10-20 17:28:38
【问题描述】：

我在设计和开发响应式网站时需要帮助。

我知道这不是这样的代码，我相信我会因此而被标记，但这是一个开发人员的问题。

我只是在开发我的第一个响应式主题，我想确保在继续之前我做对了。

目前我将其设计为 1000px 宽，这样我认为在设计时更容易计算较小的屏幕。

我的第一个问题是，我应该为什么尺寸设计？如果我有 1000 像素的主桌面屏幕，笔记本电脑、平板电脑和手机应该是什么？

这是我目前正在设计的布局，这是否正确？

桌面：1000 像素笔记本电脑：800px 平板电脑（纵向）：768 像素手机：568px

然后你来媒体查询，目前我正在使用以下内容：

手机

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { 
}

平板电脑

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}

适用于笔记本电脑

@media screen and (max-width: 1024px) {
}

台式机

@media screen and (min-width: 1025px) {
}

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

我个人只是在 Photoshop 中使用网格构建设计。我将 360px、480px 和 1024px 留在脑海中。

在构建时，每当我的设计由于从移动优先开始的窗口大小而“破坏”时，我都会更改我的代码。
毕竟，这只是我个人的看法和构建方式。

下面是一些可能有用的查询：

/* 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 */
}

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

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

来源： CSS-tricks

【讨论】：

感谢您的意见，您怎么知道网站无法在某些设备上运行并可能需要调整？
在 Chrome 的开发者工具中，您可以找到为 30 多种设备模拟您的网站的选项。你可以用它来测试你的开发。
不过，为每个设备构建网页设计并不是最好的选择。您将永远无法正确地为所有这些人提供服务。正如我之前提到的，尝试构建直到出现问题并针对特定尺寸进行编辑。不要以像素为单位精确设计。

【解决方案2】：

就像现在许多人所说的那样，决定断点的是你的满足感。内容中断时添加断点的规则很简单。

您可以使用来自chrome canary explained here 的新开发者工具（他们为您提供设备宽度和高度列表）或Firefox 中的自适应模式。或者您可以查看here 了解更多设备尺寸。

还有一点，Brad Frost 有一个很好的工具来测试您的网站ish。他列出了许多模式和工具here。希望对你有帮助:)

【讨论】：

感谢他们提供真正有用的链接，我一定会使用它们，但我对设计阶段还是有点困惑？我是否只是为桌面设计，然后使用浏览器工具来确定它在手机/平板电脑上的外观？
首先为移动设备设计类似：.main-div { rules }，然后为更大的屏幕添加断点，这样您就不需要重写规则，因为每个屏幕 goona 都有您的移动设备规则。当您看到断点中断时，您添加断点（当然，您可以从 Bokdem css-tricks 示例开始，但仔细的文章自 2010 年以来未更新）。

【解决方案3】：

嗯...你已经在这里得到了一些很好的答案。

试着从我的经历中分享一些想法。我通常首先从内容和目标受众开始。如果该网站主要从台式机/笔记本电脑访问，那么我至少从 1024 像素宽的屏幕开始。由此我可以考虑 4 种屏幕尺寸：

'基本'：默认宽度 ~ 1024px
'Wide' : 大屏，比基本款大
“平板电脑”（中型）
“移动”（小型）

与 Bokdem 的回答有关，您不必强迫自己为所有可用的设备进行精确设计 - 这样做您可能会完全发疯。因此，为了测试响应式设计，如果您使用的是 Firefox，您可以像使用附加组件之一“web developer”一样简单。或者您也可以尝试ScreenQueries进行在线测试。

【讨论】：