缩放与窗口宽度的变化

Question

随着我对css缩放的所有阅读，我得出的结论是，考虑到所有浏览器缩放的有限支持，这不是一个好主意。在这方面，我不禁注意到微软的WORD没有缩放Word文档的内容。也许他们是对的。

但让我跋涉......

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

但是，仍然保持布局直到一定限度;例如，当圆角盒的宽度达到一定宽度时，例如设备宽度的80％

例如：

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

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

我希望同样用于缩放，但是在不改变窗口宽度的情况下进行缩放，即仅用于窗口的内容。

发生了什么：

随着放大，一切似乎都做得很好

随着缩小，好吧直到几个CMD +。此时，圆角边框向右移动并超出浏览器窗口的视图，并出现超级丑陋的水平滚动条。

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!!!
 */
}

为什么消除最小宽度消除了我的缩放问题？