Javascript 使用wordpress调整js.960 gs
我想使用960 gs adaptive.js脚本,它允许您根据用户在px中的屏幕大小选择不同的样式表。然而,我使用的是wordpress,我的css文件都链接在一个主css文件中。我想知道这是否还能正常工作。我不认为它会在这里是下面的脚本&下面是css文件的顶部。我不知道如何处理这个问题Javascript 使用wordpress调整js.960 gs,javascript,css,wordpress,import,960.gs,Javascript,Css,Wordpress,Import,960.gs,我想使用960 gs adaptive.js脚本,它允许您根据用户在px中的屏幕大小选择不同的样式表。然而,我使用的是wordpress,我的css文件都链接在一个主css文件中。我想知道这是否还能正常工作。我不认为它会在这里是下面的脚本&下面是css文件的顶部。我不知道如何处理这个问题 // Edit to suit your needs. var ADAPT_CONFIG = { // Where is your CSS? path: 'assets/css/', // fal
// 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'
]
};
链接样式表
@导入“css/reset.css”@导入“css/typography.css”@进口
“css/layout.css”@导入“css/960.css”@导入“css/mobile.css”:所以
在
它不会起作用,但没有什么可以阻止您使用媒体查询或adapt.js,而只是将这些文件放在外面 js的工作原理是使用javascript动态调用css文件。您可以将所有主要样式保留在引用的链接文件中,而只保留为每个屏幕大小创建网格布局的css文件。您的路径需要如下所示:
<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/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框架之一的“adapt”选项,以及bootstrap和其他一些框架
请记住,这基本上是一个空白主题,您必须自己设计它。但提供了一个良好的基础,适应和其他响应最佳实践,包括HTML5样板。 我不太清楚你的意思,所以我仍然可以使用adapt.js,让它根据屏幕大小选择加载哪个css文件?@AndersKitson这是正确的。没有理由认为每个样式表都需要按照您描述的方式进行组合和/或链接。因此,我的问题实际上是让wordpress识别所有样式,我需要做一些php让它们正常查看,这超出了我的范围。@AndersKitson我提供了adapt.js所需的确切配置示例,只需将其插入到标头中即可。php不需要任何其他php。我不完全清楚你所说的“让wordpress识别所有样式”是什么意思。你能详细说明一下吗?好的,这就是我没有用php标记包装路径的地方,谢谢你。