レスポンシブデザインをするには

Question

私は現在、レスポンシブデザインをウェブサイト用に作成しています。私はそれを素晴らしいものにするために多くの方法を試しました。残念ながら、それは私のためにうまくいかなかった。ここで

は私の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

Answer 1

時にはyの良い使用、ブートストラップのようなフレームワーク。..簡単に管理するためのあなたが複数のデバイスに割合を維持するために画像の幅の割合を使用するようにHTMLだけを望む場合

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

Answer 2

まず第一に、テーブルを使用しないでください。可能な限り、テーブルを避けてください。 flex is your friendこのようなものになると、

Answer 3

レスポンシブウェブサイトを作成するには、最初のルールはユーザーテーブルレイアウトではなく、divベースの列レイアウトを使用します。応答性の高いものに慣れていない場合は、Bootstrapフレームワークに精通していることをお勧めします。それは良いコミュニティと素晴らしい文書を持っています。どのように反応的な仕事をするのか、そしてあなたが従わなければならない基本的なコーディング構造は何かを身近に感じてください。