如何創建HTML/CSS響應式拼貼？

我嘗試瞭解CSS和響應式設計如何工作。我做了一個小例子here。如何創建HTML/CSS響應式拼貼？

這是一個簡單的瓷磚模板。

我希望能夠在2,3,4或更多列顯示我的瓷磚。在本示例中，您只需更改div「包裝器」類c2, c3, c4以修改列數。

這是可行的，因爲我的瓷磚是向左浮動的，這些c2, c3, c4修改了我的包裝的寬度。查看HTML和CSS文件或繼續JSFiddle。

HTML

<div class="wrapper c2"> <!-- try with c3, c4--> 
    <div class="scrollable"> 
     <div class="webbutiles"> 
      <a href='?page_id=77' class='tile TBlue iconmain '><div class='boxContent'><i class='icon-group'></i></div><div class='tilename '><div class='name'>Tile 1</div></div></a> 
      <a href='?page_id=85' class='tile TDarkGreen iconmain '><div class='boxContent'><i class='icon-comments-alt'></i></div><div class='tilename '><div class='name'>Tile 2</div></div></a> 
      <a href='?page_id=89' class='tile TDarkPurple iconmain '><div class='boxContent'><i class='icon-cogs'></i></div><div class='tilename '><div class='name'>Tile 3</div></div></a> 
      <a href='?page_id=91' class='tile TDarkBlue iconmain '><div class='boxContent'><i class='icon-table'></i></div><div class='tilename '><div class='name'>Tile 4</div></div></a> 
      <a href='?page_id=93' class='tile TDarkRed iconmain '><div class='boxContent'><i class='icon-heart'></i></div><div class='tilename '><div class='name'>Tile 5</div></div></a> 
      <a href='?page_id=95' class='tile TTwitterBlue iconmain '><div class='boxContent'><i class='icon-twitter'></i></div><div class='tilename '><div class='name'>Tile 6</div></div></a> 
      <a href='?page_id=97' class='tile TGreen iconmain '><div class='boxContent'><i class='icon-columns'></i></div><div class='tilename '><div class='name'>Tile 7</div></div></a> 
      <a href='?page_id=87' class='tile TOrange t2x iconmain '><div class='boxContent'><i class='icon-reorder'></i></div><div class='tilename '><div class='name'>Tile Large</div></div></a> 
     </div> 
    </div> 
</div>

CSS

/* General tile settings */ 
.tile{ display:block; float:left; background-color:#525252; width:150px; height:150px; cursor:pointer; text-decoration:none; color:#fff; overflow:hidden; position:relative; font-weight:300; font-size:11pt; letter-spacing:0.02em; line-height:20px; margin:0 10px 10px 0; overflow:hidden} 
.tile:hover{ outline:3px #3a3a3a solid} 


/* Tile responsive setting. */ 
@media (min-width:1025px){ 
    .wrapper{width:1024px} 
} 

.wrapper{margin-left:auto; margin-right:auto} 
.wrapper.c2{width:400px} 
.wrapper.c3{width:600px} 
.wrapper.c4{width:800px} 
.wrapper.c5{width:1000px} 
.resimgicon {max-width:62px;height:auto;} 
.tile .boxContent .resimgicon{ margin-left: 3em; margin-top: 2.7em;} 
.tile{ width:157px; height:157px} 
.tile.t2x{ width:324px} 
.tile.t2x .boxContent{ width:324px} 

@media (max-width:640px){ 
    .wrapper{margin-left:auto; margin-right:auto} 
    .wrapper.c2{width:324px} 
    .wrapper.c3{width:491px} 
    .wrapper.c4{width:658px} 
    .wrapper.c5{width:785px} 
    .resimgicon {max-width:64px;height:auto;} 
    .tile .boxContent .resimgicon{ margin-left: 2.7em; margin-top: 2.8em;} 
    .tile{ width:147px; height:147px} 
    .tile.t2x{ width:304px} 
    .tile.t2x .boxContent{ width:304px} 
} 

@media (max-width:360px){ 
    .wrapper{margin-left:auto; margin-right:auto} 
    .wrapper.c2{width:184px} 
    .wrapper.c3{width:281px} 
    .wrapper.c4{width:378px} 
    .wrapper.c5{width:435px} 
    .resimgicon {max-width:38px;height:auto;} 
    .tile .boxContent .resimgicon{ margin-left: .74em; margin-top: .68em;} 
    .tile{ width:77px; height:77px} 
    .tile.t2x{ width:164px} 
    .tile.t2x .boxContent{ width:164px} 
}

我不喜歡這樣的CSS，因爲我不喜歡固定的瓷磚和包裝尺寸的工作。這會創建一個左和右（自動）追蹤。這對大屏幕不是問題，但在手機或平板電腦屏幕上無用。

我應該怎麼做才能創建一個帶有列的平鋪系統而不需要固定的包裝寬度？有沒有更好的方法來生成這種瓷磚？

來源

2013-04-26 Bastien Vandamme

使用'％'而不是固定數量的'px' – DiederikEEn 2013-04-26 13:30:00

如果您想充分響應並減少某些代碼，請擁抱百分比寬度。 – Michael 2013-04-26 13:30:08

從某種意義上說，你有點反其道而行之。

而不是修改你的包裝的寬度，你希望包裝寬度是流體。這意味着它可以是320px寬或2560px寬。

然後......根據網格系統給出一組以百分比計算的預設列寬。

假設您最多需要12列寬。那麼每列集必須等於共有12

再比如說，如果你想要一個全寬列，你會調用這個類「COL-12」，並給它width: 100%;

然後，如果你需要2個列，兩者的寬度相等，例如在它們之間徘徊3.8％。那麼你會計算100％ - 3.8％= 96.2％，然後96.2％/ 2 = 48.1％。創建一個名爲col-6的類，該類具有width: 48.1%和margin-right: 3.8%;然後創建另一個類，名爲「last」。此類應用於「行」中的最後一個div，它具有margin-right: 0;以重置不需要的右邊距最後一個div。

沖洗，並用同樣的概念重複以上，使COL-1，COL-2，COL-3，等

然後，您可以創建你想要只要班級加起來任意組合12.像上面那樣的col-6和col-6，或者col-3，col-3，col-3，col-3。如果你有一個原因... col-1，col-2，col-3，col-5，col-1 ...

這有幫助嗎？

來源

2013-04-26 13:43:36 Michael

如何創建HTML/CSS響應式拼貼？

回答

相關問題