Question

如何设置此CSS边距：

.url {
    margin: 10px 0 0;
}

屏幕调整大小后？从margin: 10px 0 0;到margin: 20px 0;

Answer 1

你有几个选择：

1：响应式选项：

媒体查询由媒体类型和至少一个限制样式表的表达式组成。范围使用媒体功能，如宽度，高度和颜色。在不推荐使用的CSS3中添加的媒体查询，可以根据特定范围的输出设备定制内容，而无需更改内容本身。

@media all and (max-width: 1000px) and (min-width: 700px) {
  .class {
   margin:50px;
  }
}

2：使用百分比： 你可以使用：

.class{
margin:40%;
}

资源：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://css-tricks.com/css-media-queries/

Answer 2

例如，使用media queries更改宽度小于600px的屏幕上的边距：

@media screen and (max-width: 600px) {
  .url {
    margin:20px 0;
  }
}

Answer 3

试试这个

.url {
margin: x% 0 0;
}

* *将x替换为您的要求

例如：

.url {
margin: 5% 0 0;
}

希望这会有所帮助。

Answer 4

在调整屏幕大小时，有一种简单的方法可以处理边距。

只需定义容器宽度并将边距设置为自动：

.url {
    width: 768px;
    margin: auto;
}

容器宽度将固定，它将位于屏幕的中心。因此，边距将自动调整以适应屏幕的其余部分。

Answer 5

使用！important覆盖上一个边距。
例如：

 @media screen and (max-width: 600px) {
.marginleftright { 
  margin-left: 0 !important;
  margin-right:0 !important;
}}
.marginleftright{
margin-right: 10%;margin-left: 10%;
}

Answer 6

对于移动优先{tablets to mobile devices with min-width 320px}，您可以尝试固定菜单栏的位置并使中心按钮相对。显示：弹性

@media screen and (max-width: 767px) and (min-width: 320px){
    .menu {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        position: fixed;
        bottom: 0;
        height: 5%;
        width: 100%;

        background-color: rgb(227, 248, 255);
        border-top: 1px solid;

        z-index: 0;
        
    }

    .btns {
        width: 2rem;
        height: 2rem;
        


        background: none;
        border: none;

        font-size: 80%;
        margin: 0 auto;

    }

    #mic {

        position: relative;
        bottom: 2em;

        background-color: rgb(227, 248, 255);

        border-radius: 50%;

        padding: 10px;

        border: 2px;

        box-shadow: 0 8px 6px .01px;

        z-index: 1;

    }

<div class="background">
        <div class="menu">
            <button type="submit" class="btns"><i class="fas fa-home"></i></button>
            <button type="submit" class="btns"><i class="fas fa-compass"></i></button>
            <button type="submit" id="mic" class="btns"><i class="fas fa-microphone"></i></button>
            
            <button type="submit" class="btns"><i class="fab fa-youtube"></i></button>
            <button type="submit" class="btns"><i class="fas fa-user-circle"></i></button>
        </div>
    </div>

按屏幕大小更改边距的方法

6 个答案: