4

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

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

假设 css 会很复杂，是否会为小屏幕手机（其功能往往比大屏幕手机弱）带来更多工作量？以small.css作为base.css开始，在大手机上用big.css覆盖会更好吗？或者在 web 应用程序场景中并不重要（因为 css 文件大小不是一个大问题）？

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

4

2 回答 2

4

我只能同意@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) {

}
于 2013-09-13T06:59:30.960 回答
3

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

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

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

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

于 2013-09-13T04:43:57.823 回答