用 wordpress 适配.js 960 gs答案

【问题标题】：adapt.js 960 gs with wordpress用 wordpress 适配.js 960 gs
【发布时间】：2011-11-10 22:17:37
【问题描述】：

我想使用 960 gs Adaptive.js 脚本，它允许您根据用户屏幕大小（以 px 为单位）选择不同的样式表。但是我使用的是 wordpress，我的 css 文件都链接在一个主 css 文件中。我想知道这是否仍然可以正常工作。我认为这里不会是下面的脚本，下面是 css 文件的顶部。我不知道如何处理这个问题。

// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // Optional callback... myCallback(i, width)
  callback: myCallback,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1940px to 2540px = 1920.css',
    '2540px           = 2520.css'
  ]
};

链接样式表

@import "css/reset.css"; @import "css/typography.css"; @进口 “css/layout.css”； @import "css/960.css"; @import "css/mobile.css": 所以上...

【问题讨论】：

标签： javascript css wordpress import 960.gs

【解决方案1】：

它不起作用，但没有什么能阻止您使用媒体查询或使用 adapt.js 并简单地将这些文件排除在外。

Adapt.js 通过使用 javascript 动态调用 css 文件来工作。您可以将所有主要样式保留在您引用的链接文件中，并且只保留为每个屏幕尺寸创建网格布局的 css 文件。您的路径需要如下所示：

<?php bloginfo('template_directory'); ?>/css/adapt/

假设您的 adapt.js 样式表文件存储在模板根目录内的 /css/adapt 目录中，并且您的 adapt.js javascript 文件存储在模板根目录内的 /js 目录中。您无需告诉 Wordpress 包含文件，因为这是脚本的用途。

完整的代码可能如下所示：

<noscript> 
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/adapt/mobile.min.css" />
</noscript> 
<script> 
// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: '<?php echo get_template_directory_uri(); ?>/css/adapt/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
    '1600px to 1920px = 1560.min.css',
    '1920px           = fluid.min.css'
  ]
};
</script> 
<script src="<?php echo get_template_directory_uri(); ?>/js/adapt.min.js"></script>

如果您选择使用媒体查询，您可以将它们直接嵌入到您的 css 文件中。如果您这样做，您将需要首先定义基本样式（通常称为“移动优先”），然后根据越来越宽的视口选择性地增强网站。请参阅 Ethan Marcotte 的文章 Responsive Web Design 以获得很好的解释。

【讨论】：

我不太清楚你的意思所以我仍然可以使用 adapt.js 并让它根据屏幕大小选择要加载的 css 文件？
@AndersKitson 没错。没有理由需要按照您描述的方式组合和/或链接每个样式表。
所以我的问题实际上是让 wordpress 完全识别样式，我需要做一些 php 让他们正常看到它们，这超出了我的范围。
@AndersKitson 我提供了一个示例，说明您需要为 adapt.js 进行的确切配置，只需将其插入到 header.php 中即可，不需要任何额外的 php。我不完全确定“让 wordpress 完全识别样式”是什么意思。你能详细说明一下吗？
好的，这就是我没有将路径包装在 php 标签中的地方，谢谢。

【解决方案2】：

如果您要创建自己的主题，可以使用 Roots 主题，http://www.rootstheme.com/

它们包括一个“适应”选项作为 CSS 框架之一，以及引导程序和其他一些框架。

请记住，这基本上是一个空白主题，您必须自己设置样式。但是为适应以及其他响应式最佳实践（包括 HTML5 样板）提供了良好的基础。

【讨论】：