html - min-width 和 width 并存

Question

我在使 rem 中的 min-width 与百分比宽度共存时遇到了一些问题。 When resizing this jsfiddle the outer right block is going under because of the min width restrictions.我想知道是否有一种简单的方法可以解决这个问题并仍然保持最小宽度 + 宽度？

<div class="container">
    <div class="first">
    </div>
    <div class="second">
    </div>
    <div class="third">
    </div>
</div>


.container{
    min-width:20rem;
    width:80%;
    border: 1px solid black;
    height:50px;
}
.first{
    min-width:3rem;
    width:15%;
    background:red;
    height:50px;  
    float:left;
}
.second{
    min-width:10rem;
    width:65%;
    height:50px;   
    background:yellow; 
    float:left;
}
.third{
    min-width:7rem;
    width:20%;
    background:green;   
    height:50px;
    float:left;
}

Answer 1

如果你想让网站在移动设备上查看时响应更快，请尝试使用 css 媒体查询

在这里查看简单教程W3Schools tutorial

如果你真的想深入理解，那么这将是一个重要的帮助:CSS Tricks - Media queries

CSS 技巧对于学习 CSS 方面的任何东西都非常有帮助