我想使用 960 gs adaptive.js 脚本,它允许您根据以像素为单位的用户屏幕大小选择不同的样式表。但是我使用的是 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"; @import "css/layout.css"; @import "css/960.css"; @import "css/mobile.css": so on...
最佳答案
它不会工作,但没有什么可以阻止您使用媒体查询或使用 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 文件中。如果您这样做,您将需要首先定义基本样式(通常称为“移动优先”),然后根据越来越宽的视口(viewport)有选择地增强站点。请参阅 Ethan Marcotte 的文章 Responsive Web Design一个很好的解释。
关于javascript - adapt.js 960 gs 与 wordpress,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8087138/