試圖使用響應式CSS的百分比

我鞭打了這個網站在http://www.flywavez.com/，它主要位於（我必須在這裏像素有一個像素，在那裏有一個像素），但我去檢查它在iPhone上， Android（galaxy s3運行4.3，Chrome和Android瀏覽器），iPad和Kindle，我不認爲我的CSS頁邊界被解釋爲它們在屏幕瀏覽器（即桌面和筆記本電腦）中的樣子。試圖使用響應式CSS的百分比

我用我的邊際百分比，甚至嘗試填充，但我無法找到平衡的地方顯示相對統一的元素。我是否應該爲不同邊距的移動設備指定單獨的樣式表？對於手機來說，似乎.socials（一個精靈，順便說一句）將有一個0的餘裕，有幾個在頂部將它踢倒。

同爲＃快速中期文本，在一個單獨的手機瀏覽器，保證金將留待0

不過，我想保留它儘可能多的在一個樣式表成爲可能。我應該使用邊距或元素排列來將社交媒體圖標置於播放器下方，並且＃quick-mid-text中的段落與播放器的左側邊緣齊平？

這裏是我的CSS：

.socials { 
float: right; 
padding-top: 13px; 
margin-right: 40%; 
width:275px; 
} 

.socials a { 
display: block; 
width: 58px; 
height: 50px; 
float: left; 
background: url(../images/socials2.png) 0 0 no-repeat; 
} 

.socials a:hover { 
opacity: 0.5; 
} 

.socials a+a { 
margin-left: 12px; 
background-position: -62px 0; 
width: 56px; 
} 

.socials a+a+a { 
margin-left: 4px; 
background-position: -120px; 
width: 32px; 
} 

.socials a+a+a+a { 
margin-left: 4px; 
background-position: -156px; 
width: 93px; 
}

來源

2014-02-24 abtecas

我建議你使用媒體查詢基於屏幕寬度改變風格。你可以做基本樣式，然後在媒體查詢中覆蓋它們等。

如：

.socials { 
    float: right; 
    padding-top: 13px; 
    margin-right: 40%; 
    width:275px; 
} 

@media only screen and (max-width: 979px) { 
    .socials { 
     margin-right: 10px; 
    } 
}

來源

2014-02-24 04:38:14 Papa

這似乎是工作，但我不得不將其更改爲保證金的權利，而且可能添加一些，在不同的水庫等。我有點用這個學到了一些東西。謝謝。 – abtecas

請儘量將三網融合

#quick-mid-text { 
    margin-bottom: 0; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 13px; 
    width: 42%; 
} 
.socials { /* style.css -line no.756*/ 
    float: none; 
    margin-bottom: 0; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 13px; 
    padding-top: 0; 
    width: 260px; 
}

來源

2014-02-24 04:45:01

會看看。謝謝。 – abtecas

所以如果我的理解正確，我真正必須做的是檢測分辨率，設備或瀏覽器顯示的不合需要 - 然後根據相應的規格和樣式編寫媒體查詢？ – abtecas

雅我正在使用媒體查詢，但主要使用寬度，高度完全％。 –

試圖使用響應式CSS的百分比

回答

相關問題