0

我正在尝试使用Intention.js。

使用 intent.js 时，如何根据屏幕宽度以不同方式呈现页面 Intention.js 具有根据设备调整页面呈现的代码，如下面的代码示例所示

<html> <header>
<img src="logo.png" intent
  in-highres-src="retina.png" />
</header>

<nav intent
 in-mobile-prepend="#content"
 in-tablet-prepend="#content"
 in-standard-after="header"
 in-touch-class="swipeDrawer">

<a id="about" intent
 in-mobile-href="about.html"
 in-tablet-href="about.html"
 in-standard-href="#about">About</a>
<a id="projects" href="/faq"
 intent
 in-mobile-before="#about">FAQ</a>
</nav>

<div id="content" intent
 in-width: in-orientation:>
 This is all so complex
</div>
</html>

但是，我不清楚如何确定特定的屏幕尺寸。

什么是手机/平板/标准？我相信可以使用 intent.js 来确定宽度并显示内容，但是我不清楚如何使用这个库定义这样的宽度。

而且，鉴于这些信息，如何根据这些特定大小呈现不同的表格？

我猜是这样的：

<table intent
   in-tablet-td
   in-mobile-td      <<-- but wouldnt that change only a single td  ?

我正在寻找可以根据屏幕大小定义表格组成的东西，例如 3 列或 5 列。

//--------------------------------更新 14nov2013------------------

我想我正在做一些事情它接缝屏幕宽度的值是在另一个脚本中设置的。除了 intent.js 之外，我还读到了一个名为 context.js 的脚本：

  intent.responsive([{name:'base'}]).respond('base');

// width context?
// =======================================================================
horizontal_axis = intent.responsive({
  ID:'width',
  contexts: [
    {name:'standard', min:840}, 
    {name:'tablet', min:510},
    {name:'mobile', min:0}],
  // compare the return value of the callback to each context
  // return true for a match
  matcher: function(test, context){
    if(typeof test === 'string'){

      return test === context.name;
    }
    return test>=context.min;
  },
  // callback, return value is passed to matcher()
  // to compare against current context

所以在这里我不仅找到了“标准/平板电脑/...”的名称，而且它们在这里定义得很好？显然这些变量是在这里创建的，它们不在 intent.js 中

现在我只剩下要找出，如何做不同的餐桌妆容。

4

0 回答 0