2022/8/17

css(4) 完结

css + css作业 完结

响应式布局

简要介绍响应式布局就是我们针对于 网页端 和 app , 面对不同屏幕大小 , 我们块的位置要"选择"地变化

media查询

实现动态选择的作用

media(min-width: 768px) {

    /* min-width: 768px 的意思是当屏幕的宽度大于等于 768px 才执行以下的 class */

    .col-md-1 {
        width: calc(100% * 1 / 12);
    }

    .col-md-2 {
        width: calc(100% * 1 / 12);
    }

    ...

    .col-md-12{
        width: calc(100% * 12 / 12);
    }

    /* y总说一般分为 12 份 , 用百分比表示*/
}

media( max-width: 767px ) {
    /* max-width: 767px 的意思是当屏幕的大小小于等于 767px */

    .col-sm-1 {
        width: calc(100% * 1 / 12);
    }

    .col-sm-2 {
        width: calc(100% * 2 / 12);
    }

    ...

    .col-sm-12 {
        width: calc(100% * 12 / 12);
    }
}

这样在 html 里面

<div class="col-md-6 col-sm-12"> </div>

就可以由屏幕大小决定进入 "md" 类 , 还是 "sm" 类

Bootstrap

别人已经写好的框架 , 方便直接调用 , 但难修改

下在好后解压到项目中 css 文件夹

css文件 用<link> 引入 , js文件 用<script> 引入

<link rel="stylesheet" href="/static/third_party/bootstrap-5.1.3-dist/css/bootstrap.min.css">
<script src="/static/third_party/bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>

 y总 强调一定是 "bootstrap.min.css" 和 "bootstrap.min.js" 文件

 一般习惯 col-(xs/sm/md/lg/xl)-(1~12)