skel.js応答フレームワーク
3002 ワード
ページ一般構造
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script src="skel.min.js"></script>
<script>
skel.init();
</script>
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
<p>This is a test.</p>
</div>
</body>
</html>skelはhtmlと要素のclassを変更し、以下の方法を使用しないことができますが、性能のためにできるだけ選択的にロードします~:
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style-medium.css" media="(min-width: 769px) and (max-width: 1024px)" />
<link rel="stylesheet" href="style-small.css" media="(max-width: 768px)" />初期化
skel.init({
reset: 'full',
//"normalize","full",false
containers: '95%',
viewport: {
scalable: false,
width: "device-width" //1280
//height
},
breakpoints: {
medium: {
media: '(min-width: 769px) and (max-width: 1024px)',
},
small: {
media: '(max-width: 768px)'
}
}
});コントロールの表示と非表示
<p class="only-large">You can only see this on large displays.</p>
<p class="only-medium">You can only see this on medium displays.</p>
<p class="only-small">You can only see this on small displays.</p>
<p class="not-large">You can see this on anything but a large display.</p>
<p class="not-medium">You can see this on anything but a medium display.</p>
<p class="not-small">You can see this on anything but a small display.</p>grid
<div class="row">
<div class="12u">Twelve</div>
</div>
<div class="row">
<div class="8u">
<div class="row">
<div class="12u">Twelve</div>
</div>
<div class="row">
<div class="8u">Eight</div>
<div class="4u">Four</div>
</div>
<div class="row">
<div class="4u">Four</div>
<div class="4u">Four</div>
<div class="4u">Four</div>
</div>
</div>
<div class="4u">Four</div>
</div>
<div class="row">
<div class="4u">Four</div>
<div class="4u">Four</div>
<div class="4u">Four</div>
</div>
<div class="3u 6u(small) 12u(xsmall)">
Sidebar1
</div>