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

How I can set this CSS margin:

我如何设置此CSS边距:

.url {
    margin: 10px 0 0;
}

When screen is resized? From margin: 10px 0 0; to margin: 20px 0;

屏幕调整大小?来自保证金:10px 0 0;保证金:20px 0;

4 个解决方案

#1

you have Several option:

你有几个选择:

1:Responsive Option:

media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in deprecated CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

媒体查询由媒体类型和至少一个表达式组成,该表达式通过使用媒体功能(如宽度,高度和颜色)来限制样式表的范围。在已弃用的CSS3中添加的媒体查询允许内容的呈现针对特定范围的输出设备进行定制,而无需更改内容本身。

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

2:Using Percentage: you can use:

2:使用百分比:您可以使用:

.class{
margin:40%;
}

resource:

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

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

#2

Use media queries, for example to change the margin on screens smaller than 600px wide:

使用媒体查询,例如更改宽度小于600px的屏幕上的边距:

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

#3

Try this

.url {
margin: x% 0 0;
}

**replace x with your requirement

**根据您的要求更换x

eg:

.url {
margin: 5% 0 0;
}

hope this helps.

希望这可以帮助。

#4

There is a simple way to deal with margins when you resize the screen.

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

Just define your container width and set margin to auto:

只需定义容器宽度并将边距设置为auto:

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

The container width will be fixed and it will be on the center of the screen. Therefore the margins will be automatically adjusted to fit the rest of the screen.

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

#1