网页适配移动/手机设备的一点点方案：栅格模式&JS

网页适配移动/手机设备的一点点方案：栅格模式&JS

在前端编程当中多采用栅格模式，我在接触过的BootStrap、Layui都是此类设计。适配各类屏幕多使用不同尺寸的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()
-   }

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

作者微信:bianbingdang。转载请注明，变饼档博客

转载于:https://my.oschina.net/u/4098368/blog/3025025