适配iPhone 5屏幕时顶部栏元素无法同行排列的CSS问题求助

问题核心原因 #

iPhone 5屏幕宽度仅 320px，你现有的顶部栏元素总宽度（文本+间距+图标）超过了屏幕宽度，同时flex布局没有适配窄屏的收缩规则，才导致元素无法同行显示。

适配修改方案 #

直接替换你现有的320-374px宽度区间的媒体查询代码即可，修改点包括：缩小字号、压缩间距、允许flex子项收缩、取消不必要的大写字母间距：

@media only screen and (max-width: 374px) and (min-width: 320px) {
    /* Iphone 5 适配 */ 
    .top-bar {
        height: 45px;
        background-color: aqua;
    }
    .container {
        width: 96%; /* 留少量边距即可，充分利用窄屏宽度 */
        justify-content: space-between;
    }
    /* 缩小左侧文本字号，去掉多余间距 */
    .top-bar .text h2 {
        font-size: 10px;
        letter-spacing: 0; /* 取消大写字母间距节省宽度 */
        margin-right: 0;
    }
    .top-bar .text {
        margin-right: 6px;
        height: 45px;
    }
    .top-bar .text i {
        margin-right: 2px;
    }
    /* 右侧元素缩小字号，压缩间距 */
    .top-bar .hyper-text {
        font-size: 10px;
        margin-right: 0;
    }
    .top-bar .hyper-text select,
    .top-bar .hyper-text a {
        font-size: 10px;
        margin: 0 2px;
    }
    .top-bar .hyper-text i {
        margin: 0 2px;
    }
    /* 允许flex子项自动收缩，避免溢出 */
    .top-bar-left, .top-bar-right {
        flex-shrink: 1;
    }
}

可选优化方案 #

如果调整后还是觉得拥挤，可以选择隐藏优先级较低的左侧邮箱信息，只保留运营天数，在上面的媒体查询里再加一行代码即可：

.top-bar .text:nth-child(2) {
    display: none;
}

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