移动端适配：calc(50vw - 1px)无法设置正确宽度求助

针对你在max-width:647px媒体查询下遇到的section.defaultsection宽度偏差问题，结合代码分析，以下是可行的解决方案：

1. 覆盖默认内边距并启用盒模型约束 #

你的默认样式给section.defaultsection设置了padding:3vw，但媒体查询未覆盖该属性。默认content-box盒模型下，元素实际宽度是设置的width加上padding，直接导致calc(50vw -1px)的宽度被撑开，出现偏差。

修改媒体查询中的样式：

@media only screen and (max-width: 647px)
{
    section.defaultsection
    {
        display: block;
        float: left;
        margin: 0;
        height: 70vh;
        width: calc(50vw - 1px);
        box-shadow: none;
        border: 0;
        padding: 0; /* 覆盖默认内边距 */
        box-sizing: border-box; /* 确保宽度包含内边距和边框 */
    }
    /* 其他样式保持不变 */
}

2. 清除浮动元素间的空白间距 #

使用float:left时，HTML中元素的换行/空格会被解析为空白字符，导致元素间出现微小间隙，看起来像宽度偏差。给父元素main添加font-size:0可消除该问题：

@media only screen and (max-width: 647px)
{
    main
    {
        margin: 0;
        font-size: 0; /* 清除子元素间的空白字符 */
    }
    /* 其他样式保持不变 */
}

3. 改用Flex布局替代浮动（推荐） #

Flex布局天生适配响应式宽度分配，能避免浮动带来的各类问题，更精准控制元素宽度：

@media only screen and (max-width: 647px)
{
    main
    {
        margin: 0;
        display: flex;
        flex-wrap: wrap; /* 允许元素换行 */
    }
    section.defaultsection
    {
        flex: 0 0 calc(50vw - 1px); /* 固定宽度，不伸缩 */
        margin: 0;
        height: 70vh;
        width: auto; /* 由flex控制宽度 */
        box-shadow: none;
        border: 0;
        padding: 0;
        box-sizing: border-box;
    }
    /* 其他样式保持不变 */
}

4. 处理vw的小数像素精度问题 #

当视口宽度为奇数时，50vw会产生半像素值，浏览器取整规则可能导致calc(50vw -1px)计算结果偏差。可改用百分比代替vw，或给元素添加transform: translateZ(0)触发硬件加速，减少精度误差。

内容的提问来源于stack exchange，提问作者KawkaGaming