響應式佈局問題

-1

我想建立這個網站：http://www.alsite.com.br/misskessi響應......但我對響應格式有一些懷疑。響應式佈局問題

我想知道我需要做的圖像，鏈接，文本...？我認爲這是與百分比，但多少？..我怎麼能看到我需要調整大小，以適應分辨率...

例：對我的決議（1600 x 900）這工作正常：

#wrap{ 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-left:-495px; 
    margin-top:-359.5px; 
    width:990px; 
    height:719px; 
    background-color: rgba(247, 8, 8, 0.2); 
}

但在1024x768的分辨率，顯示滾動條......所以我需要響應這個...

但如何？

任何人都可以幫助我嗎？

來源

2013-06-24 Preston

這可有助於：http://www.smashingmagazine.com/2013/04/25/maintain-hierarchy -content-choreography/ – sweetamylase

確實，鏈接中的文章是一個很好的資源。但是，一般來說，除非您使用媒體查詢**，否則您希望避免使用任何特定的像素度量（如「900px」）**。你有特定的邊距，所以如果屏幕小於像素總數，你會得到一個滾動條。 –

只是FYI，有一個*更好的*技巧來製作一個始終居中放置的「盒子中的網站」佈局。或者至少，對我來說總是更好。給定特定的CSS顯示'table'和'table-cell'，只需在2個div內放置一個content-wrapper。從那裏你只需要確保身體的高度和寬度以及'div：table'的高度，你就可以走了！ [在這裏試試！]（http://jsfiddle.net/LQ6tW/）哦，是的，也使用'vertical-align：middle'。 [見這裏例如全屏]（http://jsfiddle.net/LQ6tW/show/） – SpYk3HH

我希望這一次我回答一個關於響應式設計的問題，這個問題將不會被刪除;）

有響應式設計和百分比之間的差異。
如果你想去百分比，你必須在每個點上添加它們。目前你的屏幕居中，但你的寬度，高度和邊距是固定的（以邏輯方式，而不是css方式）。您將不得不將它們更改爲百分比值。爲了保持圖像不會變大，您應該查看max-height/min-height屬性（對於寬度，左側等等）

此外，這不是真正的響應，使您的網站響應和適應甚至非常小瀏覽器你應該檢查出media queries（http://css-tricks.com/css-media-queries/和https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）。這兩個網站爲我提供了很多幫助，當時我必須在過去幾周內創建一個響應式網站（http://wywy.tv/howimetyourmother）。

有了媒體查詢，你可以修改你的CSS類，如果各種條件都fullfilled，屏幕的寬度最次，把這個在你的CSS代碼，例如：

@media (max-width: 755px) { 
    .content { 
    width: 100%; 
    } 
    .header { 
    margin: 0 auto; 
    } 
    ... 
}

您可以擴展此代碼相當多，也許看看我的開發網站上的CSS文件，看看我做了什麼以及它如何影響外觀。

來源

2013-06-24 18:28:21 luk2302

爭氣，醇」密友！正確的答案！ – SpYk3HH

是啊..很好的答案！正確的...如果我使用媒體查詢..我有我的內容'寬度= 960px'，我的標識與'寬度= 320px'。我需要在CSS上設置，我的標誌寬度爲320px/960px = 33,33％？是或我在說傻嗎？ – Preston

既不，可以做到這一點，但可以做幾乎所有，可以指定，如果一邊的尺寸大於某個點處的圖像具有固定的寬度和它下面具有寬度爲100％，如果圖像是320像素寬可以設置切換到正確的值，那麼你的圖像將永遠不會被放大並填充足夠大，所以，即使有更簡單的方法來做到這一點，但既然你問的是repsonsive設計，我給了一個那簡單的解釋。 – luk2302

-2

您可以使圖像成爲背景圖片並使用「background-size：cover;」，該圖片將其縮放爲瀏覽器大小。

來源

2013-06-24 18:26:53 eevaa

但是..我不想背景全 – Preston

在構建響應式網站時，請注意以下幾點。

使用媒體查詢來定義設計中的重要斷點。一些常見的突破點是< 320px，< 480px，< 768px，> 768px及以上。
使您的佈局流暢。如果有幫助，可以使用網格系統 - 960網格系統，Gridset，Columnal，Golden GS等。
圖像應該設置爲最大寬度的100％。利用中斷點 - 您可以根據不同的中斷點改變圖像的位置。使用移動版面時，請僅保留基本圖像並隱藏無用（非重要）圖像。
利用最大寬度/高度和最小寬度/高度。這些非常有用，因爲它可以讓你在幾個小角色中定義「最低和最高」寬度/高度。
對於移動設備佈局，您的列寬度爲100％ - 您基本上會使用一個橫跨一列的列。您將使用的媒體查詢適用於任何東西< 320px。
正如我上面所說 - 只保留基本內容。在更大的佈局（> 768-1024 +）上，您可以使用您喜歡的圖像，但在此之下，請確保您先考慮內容，然後再考慮內容。這對移動設備佈局特別重要。
讓您的佈局簡單
不要忘記你的視口元標記。

<階name = 「視口」內容= 「寬度=設備寬度」>

來源

2013-06-24 18:57:18

響應式佈局問題

回答

相關問題