html - 缩放与窗口宽度的变化

Question

通过阅读所有关于使用 css 缩放的文章，我得出的结论是，考虑到所有浏览器对缩放的有限支持，这不是确实是个好主意。对此，笔者不禁注意到，微软的WORD并没有对Word文档的内容进行缩放。也许他们是对的。

但让我继续……

作为一种学习体验，我真正希望通过缩放看到的是= 重新调整浏览器窗口大小时会发生什么。即元素容器+字体大小+等，在缩小窗口大小时缩小(缩小)，在增加窗口大小时扩大(放大)。

但是，仍然保持布局直到一定的限制；例如，当圆 Angular 框的宽度达到一定宽度时，比如设备宽度的 80%

例如:

顺便说一句，上面都是以 block 为中心的。

例如，圆 Angular 框的宽度随着窗口的增大而增加=放大，而框的宽度随着窗口的减小而减小= 缩小。

我希望缩放也是如此，但缩放时不改变窗口宽度，即，仅针对窗口的内容。

发生了什么:

放大，一切似乎都很好

缩小，好吧直到几个 CMD-plus。此时，圆 Angular 边框向右移动，超出了浏览器窗口的视野， super 丑陋的水平滚动条出现了。

HTML:

<section class="roundedBodyCornersWrapper zoomStyleRule centerBlock elemPadding">

    <div class="roundedBodyCorners">

<img class="headerImage centerImage" src="images/Broken_Heart.gif" alt="crying" />

<section class="roundedTextCornersWrapper centerBlock elemPadding">

CSS:

body {
    background-color: white;   /* around oval */
    margin:           2.0em;
    font-size:        120%;
    min-width:        300px;
}

.zoomStyleRule {
    width:  75%;      /* always put fall-back spec 1st */
    width:  auto\9;   /* IE8 = exception to fall-back spec */
    width:  75vw;     /* even if this isn't here, still does not work */

    height: auto;
}

.roundedBodyCornersWrapper {
    /* center via  .centerBlock in layout */
    /* padding via .elemPadding in layout */
}

.roundedTextCornersWrapper {
    padding-bottom: 2.0em;   /* + a tad extra above .mainContent */
}


.headerImage {
    /*
        original size = 888px X 448px (55.5em X 28em)
    */
    width:          75%;
    width:          auto\9;   /* IE8 exception */

    padding-bottom: 1.5em;
}

.centerBlock, .centerImage {
    display:      block;
    margin-left:  auto;
    margin-right: auto;
}

.infoHeader {
    font-family:    Georgia, Helvetica;
    font-size:      130%;    /* 130% x the % in body */
    color:          #fff;
}

顺便说一句，即使我有，一切都不会像已经描述的那样工作

<meta name="viewport" ...>

和

@viewport {
}

适当放置。

为了全面披露，我不再确定在窗口调整大小时或缩小/放大发生时哪些尺寸会发生变化。我看到 GUI 发生了变化...

Answer 1

哦，看在上帝的份上......

body {
    background-color: white;   /* around oval */
    margin:           1.0em;
    font-size:        120%;
 /*
    min-width:        300px;   // Oh ... for Heaven's Sake!!!
 */
}

为什么消除 min-width 可以消除我的缩放问题？