不得不说第一个想出这个方法的人，是非常聪明的。

在前端编程当中多采用栅格模式，我在接触过的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() -   } 

• 缺点： 这样做虽然实现了，但是在屏幕大小切换过程中并不理想，响应方面没有媒体查询流畅。

看到这里了，顺便了解下 跨屏互联 建站Saas系统吧

注册地址：http://kuaping.com/business/register.php

市面上已经有不少自建站Saas系统了，为什么还要做跨屏Saas建站系统？这是一个外行不清楚，内行心知肚明的事情，市面上建站系统大多是拖拽式生成，这种做出来的网站代码很乱，对于seo很不好友。从事建站十多年，我见到太多了。

坚守品质，始终采用更利于seo的手写代码开发

我希望打破这个常规，跨屏互联7年自主开发的Saas建站系统，是一个费时费力的事情，我们所有模板都是手写代码开发，虽说是自助建站，但是和定制是一模一样的流程，所以出来的品质也是一模一样。而是自适应终端适配效果非常好。

对其wordpress，好过wordpress

我们是Wordpress十几年的使用者，对于wordpress我们非常熟悉，也非常喜欢，所以开发跨屏Saas建站系统的时候，汲取了来自wordpress的体验和思路。如果你也喜欢wordpress，跨屏互联的Saas建站后台你会感到熟悉。相比于wordpress，它的优势是无需购买服务器部署源码，注册账号就可以拥有前台后台，可以选择模板。

有软著 无风险，和钓鱼CMS建站系统彻底说拜拜

我们申请了软著-计算机软件著作权登记号：2017SR675691，相比于市面上有钓鱼的CMS建站系统，先免费等你下载使用，然后在起诉，选择跨屏互联SAAS建站系统，也省去了侵权风险。

我们的价格幅度从680~4980不等，不同模板不同价格，按工作量定价，让所有人都可以做得起网站，做放心的网站，做优质的网站，做价格透明的网站。