如何使适当的响应设计

-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

如何使适当的响应设计

回答

相关问题