CSS - 响应中心 div，位置固定

Question

我这里有一个 jsfiddle https://jsfiddle.net/ajvvjnq3/

非常简单，我有一个宽度固定、位置固定且居中的 div。

低于 600px 我希望 div 宽度为 100%，左右边距为 20px。

我无法获得 margin-right: 20px;

.block{
    background: red;
    height: 100px;
    position: fixed;
    top: 50px;
    left: 50%;
    margin-left: -200px;
    width: 400px;
}

@media only screen and (max-width: 600px){
    .block{
        left: 0;
        margin-left: 20px;
        margin-right: -20px;
        width: 100%;
    }
}

<div class="block"></div>

Answer 1

JSfiddle https://jsfiddle.net/ajvvjnq3/2/

你可以尝试使用 calc

width: calc(100% - 40px); 似乎工作正常

它在这里所做的只是从您的边距中取反值。

编辑另一种方法是使用@CBroe 答案，因为它支持的浏览器比 calc 多，但不管你的船如何:)

@media only screen and (max-width: 600px){
    .block{
        left: 20px;
        right: 20px;
        width: auto;
        margin: auto;
    }
}