Bootstrap里container的响应式布局的解释

最新推荐文章于 2024-04-20 16:13:23 发布

XiaoBsEven

最新推荐文章于 2024-04-20 16:13:23 发布

阅读量2.3k

点赞数 1

分类专栏：前端文章标签： bootstrap javascript 响应式布局

本文链接：https://blog.csdn.net/XiaoBsEven/article/details/82869087

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

之前在用bootstrap的时候,发现其中container设置了响应式布局,然后根据逻辑自己敲了一遍.

现在移动端越来越火,基本所有的网页都会根据移动端做一些适配,其中响应式布局,就是适配中关键的一环.其实响应式布局十分简单,通过JS原生代码,或者是@media,都可以进行响应式布局,下面我们来试试.

利用原生JS代码实现响应式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            height: 30px;
            background-color: red;
            margin:  0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
    </div>
    <!--
        四个档位 1170 970 750 100%
    -->
<script>
  
    window.onload=function () {
        //1.拿到container标签
        var container = document.querySelector('.container');

        windowChange();

        //2.监听窗口发生改变...
        window.addEventListener('resize',windowChange)
        
        function windowChange() {
            //3.拿到口的宽度
            var windowWidth=window.innerWidth; //width + padding
            
            if(windowWidth>=1170){
                container.style.width=1170+'px';
            }else if(windowWidth>=970){
                container.style.width=970+'px';
            }else if(windowWidth>=750){
                container.style.width=750+'px';
            }else{
                //...
                container.style.width='100%';
            }
        }
    }
</script>
</body>
</html>

其实有基础的朋友看眼代码就能理解了,所谓响应式代码就是监听了window的宽度,当宽度改变到一定程度时,布局相应的进行变化,这就是简易的响应式布局.如果认为JS原生代码很麻烦?不喜欢敲?可以,我们还可以通过媒体查询来实现.

媒体查询实现响应式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .container{
            height: 30px;
            background-color: red;
            margin:  0 auto;
        }

        /*... 750*/
        @media  (max-width: 750px){
            .container{
                width: 100%;
            }

        }

        @media  (min-width: 750px) and (max-width: 970px){
            .container{
                width: 750px;
            }
        }

        @media  (min-width: 970px) and (max-width: 1170px){
            .container{
                width: 970px;
            }
        }

        @media  (min-width: 1170px) {
            .container{
                width: 1170px;
            }
        }

    </style>
</head>
<body>

    <div class="container">

    </div>

    <!--
        四个档位 1170 970 750 100%
    -->
</body>
</html>

@media标签,其作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。不过该标签是CSS3的,对于IE老版本(IE9-)的兼容性存在问题(为什么老是要为IE去做兼容?),所以大家用的时候注意下.其实媒体查询的逻辑和之前JS的原生代码逻辑相同,所以这里就不再叙述了

@media其实还有许多的媒体类型,比如@meida all用于所有设备,@media print用于打印设备,@media speech应用于屏幕阅读器等发声设备,@media screen 用于电脑屏幕，平板电脑，智能手机等.

你也可以直接在link里用来判断当某个尺寸时,引入某个css

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 768px)">

这条代码意思是在大于或等于768时使用style.css.

大概的响应式布局就写到这了,很浅显却又很重要的功能,其实如果真要深入,去各类型做适配,也很麻烦,今天就写这么多吧.

XiaoBsEven

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap里container的响应式布局的解释

之前在用bootstrap的时候,发现其中container设置了响应式布局,然后根据逻辑自己敲了一遍. 现在移动端越来越火,基本所有的网页都会根据移动端做一些适配,其中响应式布局,就是适配中关键的一环.其实响应式布局十分简单,通过JS原生代码,或者是@media,都可以进行响应式布局,下面我们来试试.利用原生JS代码实现响应式布局&lt;!DOCTYPE html&gt...
复制链接

扫一扫