我想在pixelarity的Rails 4.2.6 app模板中使用(比如这个例子http://pixelarity.com/elemental).
所以,我在main.js(片段)中有一个有趣的构造
skel.init({
reset: 'full',
breakpoints: {
'global': { range: '*', href: 'style.css', containers: 1400, grid: { gutters: 48 } },
'wide': { range: '-1680', href: 'style-wide.css', containers: 1200 },
'normal': { range: '-1280', href: 'style-normal.css', containers: '100%', grid: { gutters: 36 } },
'narrow': { range: '-960', href: 'style-narrow.css', grid: { gutters: 32 } },
'narrower': { range: '-840', href: 'style-narrower.css', containers: '100%!', grid: { collapse: true } },
'mobile': { range: '-736', href: 'style-mobile.css', …
<div id="app">
<ul>
<!-- On mobile devices use short heading -->
<template v-if="mobile == 1">
<li><a href="#">Heading</a></li>
</template>
<!-- Else use long heading -->
<template v-else-if="mobile == 0">
<li><a href="#">Heading Long</a></li>
</template>
</ul>
</div>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
mobile: 0
}
});
当 (max-width: 547px) 的屏幕断点变为活动时，我正在寻找一种方法来更改 'mobile' 的值。并在此移动断点变为非活动状态（屏幕超过 547 像素）时将其更改回来。我通常使用 skel ( https://github.com/ajlkn/skel ) 来处理屏幕断点，但我无法从 Vue 内部访问 skel，反之亦然。我会放弃使用 Vue 来完成这个特定的任务，但是 display: none 和 display: block 会破坏我的演示文稿——将我的元素变成一个块。
我是skel.js框架的新手,我遇到了一些问题.
我从HTML5UP.net(Zerofour主题)下载了一个模板,我已经为我的网站修改了所有模板,但CSS没有在我的无边栏和左侧边栏页面上正确显示.
我有一个包含以下链接(与他们的模板相同):
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800" rel="stylesheet" type="text/css" />
<script src="http://www.**********.com/js/jquery.min.js"></script>
<script src="http://www.**********.com/js/jquery.dropotron.js"></script>
<script src="http://www.**********.com/js/config.js"></script>
<script src="http://www.**********.com/js/skel.min.js"></script>
<script src="http://www.**********.com/js/skel-panels.min.js"></script>
<noscript>
<link rel="stylesheet" href="http://www.*********.com/css/skel-noscript.css" />
<link rel="stylesheet" href="http://www.*********.com/css/style.css" />
<link rel="stylesheet" href="http://www.*********.com/css/style-desktop.css" />
</noscript>
如果我绕过noscript,网页就会出现,但会丢失所有移动和可流动的功能.
任何想法将不胜感激!
插件:如果我将页面移动到根目录并更新链接,那么CSS可以工作,但在他们的子目录中只有基本布局有效.
<?php
define(currentDIR,'../');
include (currentDIR.'includes/_functions.php');
?>
<html>
<head>
<?php include(currentDIR.'includes/_metalinks.php'); ?> //This is where the code above is stored
</head>