css - 当屏幕宽度为 "is too small or too big"时，条件视口(viewport)缩放以适合？

Question

我对响应式设计还是个新手，如果我的问题没有意义，我深表歉意。

我目前正在为两个屏幕宽度实现两个 CSS 集:

@media screen and (max-width:659px) { ... }

@media screen and (min-width:660px) { ... }

在第一组中，我有一个包含内容的 480 像素宽的表格，它以 margin auto 为中心。如果屏幕尺寸在 480px 和 659px 之间，我很高兴在左右两侧有一点背景空间。

第二组在左侧添加了一个额外的列，使表格宽 660 像素。

当屏幕宽度低于 480 像素或明显高于 660 像素时，我很担心。我的表格将被截断，或者其左右两侧的边距过多。这就是缩放可能很有趣的地方。

我读到建议按如下方式实现视口(viewport)元标记:

<meta name="viewport" content="width=device-width, initial-scale=1">

但这对我的问题来说是正确的解决方案吗？实现视口(viewport)元标记的正确方法是什么？当表格为 480 像素或 660 像素宽时，是否可以自动“缩放以适合”？如果是怎么办？

Answer 1

Zurb 的 Playground 上有一个非常简洁的响应式表格解决方案。

http://zurb.com/playground/responsive-tables

它仍然在 Playground 上，但到目前为止我已经使用过它并且效果非常好。 对于任何类型的响应式设计，您总是希望在页面中拥有移动视口(viewport)。这是语义亲爱的 friend 。 :) 它确实会让您的响应式设计变得更加容易。