设计和开发响应性网站媒体查询

Question

我需要帮助，当设计和开发一个响应网站。

我知道这不是代码本身，我相信我会为此被标记下来，但这是一个开发人员的问题。

我只是在开发我的第一个反应主题，我想确保我得到了正确的之前，我进一步。

目前，我正在设计1000 be宽的屏幕，这样我认为在设计小屏幕时更容易计算。

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

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

台式电脑:1000 px膝上型电脑:800 px平板电脑(肖像)：768 px电话:568 px

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

用于电话

@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) {
}

Answer 1

就像现在很多人说的，决定断点的是你自己。规则--当内容中断时，添加一个断点是很容易的。

您可以使用来自铬金雀 在此解释或火狐中的自适应模式的新开发工具(给出设备宽度和高度列表)。或者，您可以查看这里以获得更多的设备大小。

还有一件事，布拉德·弗罗斯特有一个很好的工具来测试你的网站ish。他还列出了许多模式和工具( 这里 )。希望它能帮助你:)

Answer 2

好吧..。你已经有了很好的答案了。

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

1. ‘'Basic’：默认宽度~1024
2. “‘Wide”：大屏幕，比基本屏幕大
3. “桌子”(中型)
4. “移动”(小型)

与Bokdem的回答相关的是，你不需要强迫自己精确地设计每个可用的设备--你可能会完全疯掉。因此，为了测试响应性设计，如果您使用的是火狐，您可以使用其中一个附加组件“web开发人员”。或者您也可以尝试ScreenQueries进行在线测试。