页面缩放规律的探究

Posted 2021-01-08 weizhibin1996

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面缩放规律的探究相关的知识，希望对你有一定的参考价值。

1、文字在浏览器缩放导致空间不够时候的规律

<div class="content">
    <h1>文字测试文字测试文字测试文字测试文字测试文字测试文字测试</h1>
  </div>


*{
      margin: 0;
      padding: 0;
    }

    .content{
      background-color: #eee;
    }

因为是div，所以肯定是沾满屏幕的

技术分享图片

压缩浏览器

1、文字部分宽度还够的时候，只是多出来的背景没有了而已

技术分享图片

2、空间不够，文字自动换行，且不会出现滑动条，差不多就是自适应了

技术分享图片

3、最后压不下去了，不知道最小宽度是怎么定义的，反正刚好显示4个子

技术分享图片

单独两个字也是这样就压缩不下去了

技术分享图片

别的网站或许会产生滑动条，但是最小的视口也是这么大

技术分享图片

二、仅有元素

    *{
      margin: 0;
      padding: 0;
    }

    .content{
      background-color: #eee;
    }

    .text{
      width: 100%;
      height: 100px;
    }


<body>
  <div class="content">
    <h1>测试文字测试文字测试文字测试文字测试文字测试文字测试文字</h1>
    <div class="text">
    </div>
  </div>
</body>

正常页面

技术分享图片

压缩页面

因为是100%宽度，定高，所以压缩页面，不会有影响，也不会有滑动条

技术分享图片

如果是定宽呢？

顶宽如果视口不够大的话，肯定会有滑动条，且父元素的背景，只会渲染父元素的宽度+子元素高度。

技术分享图片

三、元素+文字

    .text{
      width: 100%;
      height: 100px;
    }


<body>
  <div class="content">
    <h1>测试文字测试文字测试文字测试文字测试文字测试文字测试文字</h1>
    <div class="text">
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
      测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    </div>
  </div>
</body>