途徑屏幕尺寸

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，例如更改保證金在屏幕上比600像素寬的小：

@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; 
} 

容器寬度將是固定的，這將是在屏幕的中央。因此，邊距將自動調整以適應屏幕的其餘部分。