Question

我仍然对响应式设计不熟悉，如果我的问题没有意义，那就很抱歉。

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

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

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

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

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

当屏幕宽度低于480px或明显高于660px时，我很担心。我的桌子会被截断，左边和右边的边距会太大。这是缩放可能很有趣的地方。

我读到建议按以下方式实现视口元标记：

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

但这是我的问题的正确解决方案吗？实现我的视口元标记的正确方法是什么？当表格为480px或660px宽时，是否可以自动“缩放以适应”？如果是的话怎么样？

Answer 1

Zurb游乐场的响应表有一个非常巧妙的解决方案。

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