最小宽度的使用

如果可以，可以如果

于 2022-03-09 15:12:34 发布

阅读量846

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43687594/article/details/123377674

版权

在写自适应浏览器屏幕的样式时，脑中第一反正是给宽度设置百分百，这样不管页面怎么缩小或者放大，都可以使得样式撑满整个屏幕。
首先要搞清楚，宽度百分百或者auto自适应，都是根据页面的当前大小来自动变化的，这样确实可以解决一些自适应样式，但只限于该标签只有一个，里面什么都不嵌套的情况下，内容和背景确实会自适应铺满屏幕。
在正常编写代码页面的时候，怎么可能会没有嵌套呢，对吧，特别是现在的页面为了适应各种电脑屏幕分辨率，特意设置了版心区居中，背景做成自适应屏幕的效果。
当页面缩小到小于中间的版心区内容时，这个宽度仍然会根据页面的当前大小来显示宽度时就会出现bug。
这样说可能有点迷糊，举个例子吧，比如说这个页面的版心区宽度为900，给这个页面一个宽度自适应百分百，此时的背景颜色不管怎么页面怎么放大缩小，都是在当前页面上完美显示的，注意，这只是在当前可视页面范围是正常的，当你缩小至小于900px时，页面下方会出现的横向滚动条，你再拖动滚动条会发现，这个背景颜色在超过当前页面大小之后的部分，就没有了…

<style>
        .box{
            width: 100%; /*不建议使用*/
            height: 100px;
            background-color: aquamarine;
        }
        .boxSon{
            width: 900px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxSon">宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕宽度撑满整个屏幕</div>
    </div>