例如,在基于引导程序的应用程序中,我可能会编写标记以使网格为大屏幕宽 8 列,小屏幕宽 2 列。
屏幕尺寸肯定会对屏幕设计产生影响,在我开始在 famo.us 中尝试之前,我想知道应该遵循什么体面的模式。看到 famo.us 是“自以为是”,这里真的应该只有一个答案:)
我完全支持移动优先设计,但我不想要一个桌面应用程序,它只是一个扩展了 400% 的移动应用程序。
谢谢,
安德鲁
例如,在基于引导程序的应用程序中,我可能会编写标记以使网格为大屏幕宽 8 列,小屏幕宽 2 列。
屏幕尺寸肯定会对屏幕设计产生影响,在我开始在 famo.us 中尝试之前,我想知道应该遵循什么体面的模式。看到 famo.us 是“自以为是”,这里真的应该只有一个答案:)
我完全支持移动优先设计,但我不想要一个桌面应用程序,它只是一个扩展了 400% 的移动应用程序。
谢谢,
安德鲁
基于 Github 上 Famo.us 示例中的示例。
https://github.com/Famous/examples/blob/master/src/examples/views/GridLayout/example.js
你可以很容易地做这样的事情..
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var GridLayout = require("famous/views/GridLayout");
var mainContext = Engine.createContext();
var contextSize = mainContext.getSize()
var dimensions;
if (contextSize[0] < 480 || contextSize[1] < 480) {
dimensions = [2,8];
} else {
dimensions = [8,2];
};
var grid = new GridLayout({
dimensions: dimensions
});
var surfaces = [];
grid.sequenceFrom(surfaces);
for(var i = 0; i < 16; i++) {
surfaces.push(new Surface({
content: "I am panel " + (i + 1),
size: [undefined, contextSize[1] / 2.0],
properties: {
backgroundColor: "hsl(" + (i * 360 / 16) + ", 100%, 50%)",
color: "black",
lineHeight: window.innerHeight / 2 + 'px',
textAlign: 'center'
}
}));
}
mainContext.add(grid);
编辑:
由于最终目标是 Javascript 作为现代 Web 应用程序的唯一开发语言。有时您只需要自己管理事物。
对于像 Famo.us 这样的框架尤其如此,它强烈依赖于绝对定位。事情只是不像盒子模型中那样流畅
为了处理所有细微的差异,我构建了一个 StateHash 类来管理状态并根据当前状态为相同的键返回不同的值。
var DESKTOP, MOBILE, StateHash, screen_state, sh;
StateHash = (function() {
function StateHash(states) {
this.set_state = __bind(this.set_state, this);
this.get_state = __bind(this.get_state, this);
this.set = __bind(this.set, this);
this.get = __bind(this.get, this);
var i, _i, _ref;
if (!states) {
states = 2;
}
this.state = 0;
this.hash = {};
for (i = _i = 0, _ref = states - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
this.hash[i] = {};
}
}
StateHash.prototype.get = function(key) {
return this.hash[this.state][key];
};
StateHash.prototype.set = function(state, key, val) {
return this.hash[state][key] = val;
};
StateHash.prototype.get_state = function() {
return this.state;
};
StateHash.prototype.set_state = function(state) {
return this.state = state;
};
return StateHash;
})();
// Usage
MOBILE = 0;
DESKTOP = 1;
screen_state = some_check_mobile_function() ? MOBILE : DESKTOP;
sh = new StateHash();
sh.set_state(screen_state);
sh.set(MOBILE, "top-margin", "10px");
sh.set(DESKTOP, "top-margin", "20px");
sh.get("top-margin");
如果我知道任何其他更好的方法,我会告诉你的!
祝你好运!
该方法是使用基于窗口大小的网格的即兴版本。刚刚添加了一个调整大小的监听器来观察调整大小的事件。
function ResponsiveGridView() {
View.apply(this, arguments);
this.rootModifier = new StateModifier({
align: [.5, .5],
origin: [.5, .5]
});
this.mainNode = this.add(this.rootModifier);
this.slides = [];
_createGrid.call(this);
_createSlides.call(this);
Engine.on('resize', function(){
_reflowGrid.call(this);
}.bind(this));
}
function _createGrid(){
this.grid = new GridLayout({
dimensions: window.innerWidth < 490?[1,8]:[4, 2],
transition: {curve: 'easeInOut',duration: 200}
});
this.grid.sequenceFrom(this.slides);
this.mainNode.add(this.grid);
}
function _reflowGrid(){
this.grid.setOptions({dimensions: window.innerWidth < 490?[1,8]:[4, 2]});
}