Question

我在min-width rem与宽度百分比共存时遇到了一些麻烦。 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周围的任何东西都非常有帮助

最小宽度和宽度的共存

1 个答案: