Question

使用vmin调整字体大小时出现问题。它在桌面浏览器上看起来很好但是当我切换到移动大小时，textValue div的计算字体大小会有所不同，具体取决于它们的父容器。

代码：

<!DOCTYPE html>
<html>
<head>
<style>
    html {
        height: 100%;
        width: 100%;
    }
    body {
        height: 100%;
        width: 100%;
        margin: 0;
        font-family: sans-serif;
    }
    .main{
        width: 100%;
        margin: 0 auto;
        display: inline;
    }
    .contentWrapper{
        width: 90%;
        margin: 0 auto;
        font-size: 0;
        margin-bottom: 10%;
    }
    .textValue{
        font-size: 3vmin;
    }
    #someForm{
        text-align: center;
    }
    .subMain1{
        display: inline-block;
        width: 50%;
    }
    .subMain2{
        display: inline-block;
        width: 50%;
    }
    @media only screen and (min-device-width : 320px) and (max-device-width:
    480px) {
        .textValue{
            font-size: 4vmin;
        }
        .subMain1 {
            width: 100%;
        }
        .subMain2 {
            width: 100%;
        }
    }

</style>
</head>
<body>

    <div class="main">
        <div class="contentWrapper">
            <div class="textValue">This is the opening String</div>
            <div class="noCssClass">
                <form id="someForm" name="theForm"> 
                    <div class="subMain1">
                        <div class="textValue">Hello How are things?</div>
                        <div class="textValue">Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</div>
                    </div>
                    <div class="subMain2">
                        <div class="textValue">Hello How are things?</div>
                        <div class="textValue">Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</body>
</html>

所有textValue容器都设置为font-size: 3vmin;并具有媒体查询以切换此4vmin。这会覆盖父容器font-size: 0;（0字体大小允许2个div＆＃34;列＆＃34;在我的实际工作中宽度为50％）

当切换到足够小的移动模式时，vmin对嵌套在subMain div中的textValue div进行不同的计算。我已经在chrome（桌面响应式开发工具和较旧的Android设备）上测试了这一点，IE11都复制了这个问题;第一个textValue小于subMain嵌套的textValue。

从测试开始，它看起来像是在subMain div上设置的宽度值，因为在开发工具中取消选中此值会导致font-size正常计算。

为什么div宽度会影响vmin计算？我希望DOM元素大小对视口百分比的缩放没有影响。

修改

上面的代码示例是100％完成的，html文件在小（移动大小）分辨率上存在vmin大小的问题。

我注意到的一件事是，注意到计算值差异的实际vmin值最明显在3.5或4左右;更高或更低的问题使问题最小化。我想知道整体屏幕分辨率是否与它有关。

我添加了一张图片，希望能够澄清我所看到的问题：

第二次编辑：

这是一个让人们更容易查看问题的代码。 Codepen

请记住，此问题仅显示手机类型大小，打开开发工具并启用响应式视图。在Chrome中，这是＆＃34;切换设备工具栏＆＃34;左上角的按钮（或Ctrl-Shift-M）

使用vmin

0 个答案: