如何使適當的響應設計

-1

我目前正在爲網站做出響應式設計。我已經嘗試了很多方法讓它變得很棒。不幸的是，它並沒有爲我工作。如何使適當的響應設計

這裏是我的html代碼：

<div class="custom" > 
    <table class="yslygi"> 
<tbody> 
<tr> 
<td><img src="/images/pencil.png" alt="" /></td> 
<td><img src="/images/arrow.png" alt="" /></td> 
<td><img src="/images/larry.png" alt="" /></td> 
<td><img src="/images/arrow.png" alt="" /></td> 
<td><img src="/images/tools.png" alt="" /></td> 
<td><img src="/images/arrow.png" alt="" /></td> 
<td><img src="/images/clock.png" alt="" /></td> 
</tr>

這裏是我的CSS：

.yslygi tr:first-child td:nth-child(2n+1) { 
    width: 150px; 
    padding: 20px 0 11px; 
} 
yslygi { 
    text-transform: uppercase; 
    font-size: 13px; 
    font-weight: 600; 
    text-align: center; 
}

Responsive-design image

來源

2017-04-24 NK Montreal

你是否嘗試過像bootstrap這樣的框架？它帶有可輕鬆管理內容的列。 – Felix

你想達到什麼目的？它應該如何在小屏幕上顯示？除非你提到你想到的具體目標，否則這個問題太廣泛了。 –

這是「卡車」的方式，而不是「larry」。 –

-1

有時Ÿ良好的使用像引導一個框架..它易於管理的內容，但如果你只需要保留HTML作爲圖像使用寬度的百分比，以保持多個設備的比例

Td.arrowImage{width: 10%;} 
Td.Image{width: 17%} 
Td.img{width: 100%} 
.yslygi{width: 100%}

來源

2017-04-24 06:52:07

-1

首先不要使用表格，儘量避免使用表格。當涉及到這樣的東西時，就是flex is your friend。

來源

2017-04-24 06:54:43 Mik

要做出響應的網站，第一條規則是從來沒有用戶表格佈局，而是使用div基列布局。如果您對響應式新手不熟悉，建議熟悉Bootstrap框架。它有很好的社區和一個很棒的文檔。讓自己熟悉如何快速響應的工作以及您需要遵循的基本編碼結構。

來源

2017-04-24 07:13:29

如何使適當的響應設計

回答

相關問題