skel.js 响应式框架
页面一般结构
<!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>