Question

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

我知道它不是这样的代码，我确定我会因此而被标记，但这是开发人员的问题。

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

目前我设计的宽度为1000px，这样我认为在设计时可以更容易地计算出较小的屏幕。

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

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

桌面：1000px 笔记本电脑：800px 平板电脑（人像）：768像素电话：568px

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

手机

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

for tablet

@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

我个人只是在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

Answer 2

就像现在很多人说的那样，你有决定断点的内容。当您的内容中断时添加断点很容易。

您可以使用chrome canary explained here中的新开发工具（提供设备宽度和高度列表）或firefox中的自适应模式。或者，您可以查看here以获取更多设备尺寸。

还有一件事，布拉德弗罗斯特有一个很好的工具来测试你的网站ish。他列出了许多模式和工具的大清单here。希望它会帮助你:)）

Answer 3

嗯......你在这里已经有了一些很棒的答案。

试着从我的经历中分享一些想法。我通常首先从内容开始，然后从目标受众开始。如果网站主要是从桌面/笔记本电脑访问，那么我至少从1024px宽的屏幕开始。从这里我可以考虑4种类型的屏幕尺寸：

＆＃39;具有基本＆＃39; ：默认宽度~1024px
＆＃39;宽＆＃39; ：大屏幕，大于基本
＆＃39;平板＆＃39; （中型）
＆＃39;移动＆＃39; （小尺寸）

与Bokdem的答案相关，你不必强迫自己精确设计那里的所有设备 - 你可能会完全疯了。因此，为了测试响应式设计，您可以像使用其中一个加载项一样简单，如果您使用的是Firefox，则可以使用web developer＆＃39;或者您也可以尝试ScreenQueries进行在线测试。

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

3 个答案: