建站百科

文章导读：本文主要阐述了“网页适配手机的删格系统尝试”跨屏网，顾名思义致力于网站在不同屏幕下的显示问题，有关于网页适配手机端的问题，下面介绍一种删格系统的模式，删格系统并不是...，本文由跨屏网最后更新于2020-07-26，全文共894个字，预计阅读时长2分58秒。

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

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

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

写在最后，以上就是对于“网页适配手机的删格系统尝试”的一些看法，欢迎指正、交流。

网页标题：网页适配手机的删格系统尝试
转载来源：http://test.kuaping.com/article/show217.html