layui 代码学习笔记

最新推荐文章于 2024-09-26 13:55:37 发布

清风古韵

最新推荐文章于 2024-09-26 13:55:37 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/ttpage/article/details/87065842

layui 专栏收录该内容

3 篇文章

订阅专栏

这篇博客主要记录了作者在学习layui框架过程中的体验和理解，详细探讨了layui如何为通用页面设置默认样式，包括body、img、ul和li等元素的默认配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@media screen and (max-width:768px) {
    .layui-hide-xs {
        display: none !important
    }

    .layui-show-xs-block {
        display: block !important
    }

    .layui-show-xs-inline {
        display: inline !important
    }

    .layui-show-xs-inline-block {
        display: inline-block !important
    }
}

xs太小了，一般可以不用
下面是当屏幕大于768时的设置
@media screen and (min-width:768px) {
    .layui-container {
        width: 750px
    }

    .layui-hide-sm {
        display: none !important
    }

    .layui-show-sm-block {
        display: block !important
    }

    .layui-show-sm-inline {
        display: inline !important
    }

    .layui-show-sm-inline-block {
        display: inline-block !important
    }

@media screen and (min-width:992px) {
    .layui-container {
        width: 970px
    }

    .layui-hide-md {
        display: none !important
    }

    .layui-show-md-block {
        display: block !important
    }

    .layui-show-md-inline {
        display: inline !important
    }

    .layui-show-md-inline-block {
        display: inline-block !important
    }

@media screen and (min-width:1200px) {
    .layui-container {
        width: 1170px
    }

    .layui-hide-lg {
        display: none !important
    }

    .layui-show-lg-block {
        display: block !important
    }

    .layui-show-lg-inline {
        display: inline !important
    }

    .layui-show-lg-inline-block {
        display: inline-block !important
    }

默认layui中已经设置了很多通用页面默认值，如body img ul li等