javascript - css 中的响应表

Question

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

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

现在我想让它成为一个响应式的，这样它就可以在平板电脑和移动设备上工作，而不会有太多痛苦

这是我生成的 fiddle

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 嵌套在每个媒体屏幕后的括号内)。希望对您有所帮助。