响应式 CSS 设计 - 大屏幕或小屏幕开始

Question

我计划用Phonegap设计一个Web应用程序。由于我需要处理不同的屏幕尺寸，我将不得不使用响应式设计和 CSS3 媒体查询。

我有一部 1080x720 分辨率的安卓手机，我想从这个（大）分辨率开始，并说 css 是基本的.css。对于较小的屏幕，我将添加类似 small.css 的东西来覆盖 base.css（需要的地方）。

假设 css 会很复杂，它是否会为小屏幕手机（其功能往往比大屏幕手机弱）带来更多的工作量？从小.css作为基础.css开始，在大型手机上用大.css覆盖它更好吗？或者在 Web 应用程序场景中无关紧要（因为 css 文件大小不是一个大问题）？

任何设计注意事项和提示？

Answer 1

我只能同意@Lisbeth。从更大的设计开始，并将其全部保存在一个CSS文件中。如果你在设计更宽和更小的屏幕之间跳跃，你很容易感到困惑，最终结果会受到影响。为大屏幕做一个完整的设计，然后继续向下调整下一个尺寸。这是我在大多数项目中使用的模型。只需将其添加到CSS文件的底部即可。一篇描述细节的好文章

// Code for "regular" computer screens
/*------------------------------------*
    $SMALL COMPUTER SCREENS
*------------------------------------*/
 @media all and (max-width: 1034px) {
}
/*------------------------------------*
    $IPAD AND TABLET
*------------------------------------*/
@media only screen and (max-width: 767px) {
}
/*------------------------------------*
    $IPHONE 4S LANDSCAPE
*------------------------------------*/
@media only screen and (max-width : 480px) {
}
/*------------------------------------*
    $IHPONE 4S
*------------------------------------*/
@media only screen and (max-width : 320px) {
}

Answer 2

我通常从1000px的宽度开始，先完成设计。然后，我对 800px、600px 和 <400px 使用媒体查询。

在设计页面时，决定要收缩哪些元素以及要浮动删除哪些元素。然后在媒体查询中应用适当的更改。不要使用两个 css，而是使用一个（这样可以节省您的请求数量）。进行小调整以适合您的小屏幕设备。

http://css-tricks.com/具有出色的响应式设计。只需注意它们如何更改元素即可。

或者一个简单的答案，从较大的宽度开始到较低的宽度！