Question

我正在尝试使以下jsfiddle代码正常工作。实际上一切正常，对于服务器端我正在使用ColdFusion。

这些值连续出现6个。 6在ColdFusion变量中是硬编码的，因此它将值拆分为6然后是下一行。

现在我想让它成为一个响应式的，所以它应该适用于平板电脑和移动设备而不会在a ****中产生太大的痛苦

这是我生成的小提琴

http://jsfiddle.net/9arpxvga/

这需要帮助实现响应式设计......

Jquery，javascript解决方案也可以使用

Answer 1

你很难找到解决这个广泛问题的客观解决方案。因此，广泛地说：实现响应式设计的许多方法之一是编写CSS媒体查询，针对各种屏幕尺寸。这是一个取自getskeleton.com的示例片段（如果您需要一个简单的响应框架来启动，可能值得一试）

    /* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}

您只需为您尝试定位的每种屏幕尺寸编写新的CSS（或覆盖您的CSS）。（在每个媒体屏幕后将css嵌入括号内）。希望有所帮助。

Answer 2

浏览此网页：它提供了如何构建响应表的想法

http://css-tricks.com/responsive-data-tables/

css中的响应表

2 个答案: