跨屏网，顾名思义致力于网站在不同屏幕下的显示问题，有关于网页适配手机端的问题，下面介绍一种删格系统的模式，删格系统并不是一套系统，它是一种思维一种方法，就是通过把网页划分成12列等份的格子，然后基于这12列格子系统去拼凑网页。最后对12列删格进行响应式处理，因为网页基于格子系统拼凑而成，所以即完成整站的适配。
不得不说第一个想出这个方法的人，是非常聪明的。
在前端编程当中多采用栅格模式，我在接触过的BootStrap、Layui以及切图网quickly框架都是此类设计。适配各类屏幕多使用不同尺寸的class去装饰即可。 ##不同尺寸下的显示方案
LayUI为例，分别采用xs、sm、md、lg代表超小屏幕、小屏幕、中等屏幕，和超大屏幕
- layui-col-xs*
- layui-col-sm*
- layui-col-md*
- layui-col-lg*
###不同尺寸下隐藏、显示某元素
同时官方定义了， layui-show-*-block 来表示是否在某尺寸下显示。
或者使用layui-hide-*显示或隐藏某列。
这个实现总体上不难,查看官方源码可知CSS定义方式如下（768px一般定义为超小屏幕的最大像素）。
@media screen and (min-width:768px){
layui-hide-xs{
display:none!important
}
}
那么可想而知，这种实现最简单的方式就是通过媒体查询来实现。这里就不重点描述什么是媒体查询了。
JS方式
最开始开发博客的时候，并没有对前端知识了解太多，只认识js才算的上是一门语言，很多时候用js实现了。 以博客侧边栏为例，往往在手机/移动设备上是不要显示的，为了实现这个功能，最终采用了Js方式，示例如下。
- html代码
<div id="index-side" style="display:none">
.....
<div>
- JS代码
if (document.body.clientWidth > 768) {
- //小屏幕不显示侧边
- $('#index-side').show()
- }
- 缺点： 这样做虽然实现了，但是在屏幕大小切换过程中并不理想，响应方面没有媒体查询流畅。
未经允许不得转载：跨屏互联 » 网页适配手机的删格系统尝试
