Question

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

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

假设css会很复杂，是否会导致小屏幕手机的工作量增加（其功能往往弱于大手机）？以small.css作为base.css开始是否更好，并在大型手机上用big.css覆盖它？或者在Web应用程序场景中无关紧要（因为css文件大小不是一个大问题）？

任何设计考虑和提示？

Answer 1

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

}

Answer 2

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

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

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

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

响应式CSS设计 - 启动大屏幕或小屏幕

2 个答案: