我打算用 Phonegap 设计一个网络应用程序。由于我需要处理不同的屏幕尺寸，我将不得不使用响应式设计和 CSS3 媒体查询。
我有一部 1080x720 分辨率的安卓手机，我想从这个（大）分辨率开始，并说 css 是 base.css。对于较小的屏幕，我会添加类似 small.css 的内容来覆盖 base.css（需要的地方）。
假设 css 会很复杂，是否会为小屏幕手机（其功能往往比大屏幕手机弱）带来更多工作量？从small.css作为base.css开始，在大手机上用big.css覆盖会更好吗？或者在 web 应用场景中没关系（因为 css 文件大小不是大问题）？
任何设计注意事项和提示？
【问题讨论】：
标签： performance css web-applications responsive-design
我只能同意@Lisbeth。从更大的设计开始，并将其全部保存在一个 CSS 文件中。如果您在设计更宽屏幕和更小屏幕之间来回切换，您很容易感到困惑，最终结果也会受到影响。为大屏幕做一个完整的设计，然后继续向下一个尺寸。这是我用于大多数项目的模型。只需将其添加到 CSS 文件的底部即可。 A good article that descibes the details
// 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) {
}
【讨论】：
我通常从 1000px 宽度开始，然后先完成设计。 然后我对 800px、600px 和
在设计页面时，决定哪些元素要缩小，哪些元素要浮动删除。然后在媒体查询中应用适当的更改。不要使用两个 css，而是使用一个（这样可以节省您的请求数量）。进行小的调整以适应您的小屏幕设备。
http://css-tricks.com/ 具有出色的响应式设计。请注意它们是如何改变元素的。
或者一个简单的答案，从大宽度开始到小宽度！
【讨论】：