Question

我想使用960 gs adaptive.js脚本，它允许您根据px中的用户屏幕大小选择不同的样式表。但是我使用的是wordpress，我的css文件都链接在一个主要的css文件中。我想知道这是否仍能正常工作。我不认为这将是下面的脚本＆amp;下面是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”：所以上...

Answer 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文件中。如果这样做，您将首先定义简单样式（通常称为＆＃34;移动优先＆＃34;），然后根据更宽和更宽的视口选择性地增强站点。请参阅Ethan Marcotte的文章Responsive Web Design以获得一个很好的解释。

Answer 2

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

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

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

adapt.js 960 gs with wordpress

2 个答案: