Web设计中的响应能力不再是可选的了。几乎没有人会反对这个前提-除非他们过去十年一直住在洞穴里。这个真品争论在于如何最好地让你的设计有针对性。你应该从移动的角度开始你的设计吗？你应该坚持把你完成的设计调整成移动的吗？这是个复杂的选择。
每个人的工作流程都是不同的，而且很可能您已经开发了自己的响应设计方法。我们有一件事能，会，可以几乎绝对肯定的是，如果你还没有开始加入视口单元(如：大众, VH，和REM)在你的CSS中，你错过了。
石狮做网站在我们开始将这些单元合并到Divi中创建流体页面之前，让我们详细回顾一下是什么使它们比使用常规的度量单元更可取。
什么是视图单元？
大众(视口宽度)和VH(视口高度)是指长度单位，它代表任何给定视口大小的1%，而不管其测量值如何。REM(“root em”的缩写)在功能上也是类似的，尽管它专门处理字体大小，并从根元素的字体大小(在大多数浏览器中默认为16像素)的值推导出它的名称。
还有更多的视口单元可供使用(尽管它们的使用比大众和VH)，例如vmin(最低视口)和Vmax(最大视口)，分别指视口较小尺寸的1%和较大维数的1%。我们也有前(X-高度)及查(字符单位)，比vmin和Vmax-很大程度上是因为它们的具体程度有多疯狂。例如，X-高度使用小写‘x’的大小来确定它的基值，它大约等于0.5em(即8像素或6点字体)，字符单位使用‘0’字符的度量作为它们的参考点。
长话短说-如果你发现自己仔细阅读了别人的CSS，并遇到了这些相关单位，你最好把他们引导到最近的心理健康机构。
有趣的是，浏览器实际上计算出整个浏览器窗口的宽度，这意味着它们会将滚动条考虑到这个维度中。如果您试图将元素的宽度设置为100 vw，它将强制出现一个水平条，因为您将轻松地拉伸您的视口。
使用Viewport单元有什么好处？
简单地说，通过正确实现viewport单元，石狮做网站可以创建一个与简单的自适应网站完全不同的流畅响应效果。响应设计将自动调整其大小随您的视口变化，而自适应设计将纠正自己一旦您的视口达到一个特定的大小，由于媒体查询的使用。
从美学的角度来看，这一优势是显而易见的-流畅的设计看起来更好。此外，对固定单元使用视图会带来更容易实现和维护的额外优势。在大多数情况下，实现自适应设计需要添加多个媒体查询，其特定值必须是像素完美的。
更重要的是，通过使用视口单元，您可以轻松地设计文本，使其始终保持在舒适的线条长度，然后随着分辨率的调整，体验尺度的上下调整。您还可以调整CSS，以使文本始终保持比例，如下所示：
石狮做网站在这个例子中，您的文本将始终保持与彼此成比例，并且随着视图的变化而保持与您的视口的宽度成比例。您甚至可以更进一步，使用这些单位为您的文本创建容器，在适当的宽度，将始终提供一个最佳的线条长度，正如我们前面提到的。
让我们来看看另一个又短又好的例子。这一次，我们将使用viewport单元创建几个框，作为流畅页面的基本演示。我们从HTML开始：
| <h1>Example of Fluid Responsiveness</h1> |
| <div class=”responsivebox”></div> |
| <div class=”responsivebox”></div> |
| <div class=”responsivebox”></div> |
| <div class=”responsivebox”></div> |
然后我们转到CSS：
| background-color: #81d8d0; |
快速查看代码应该是您所需的一切，以准确地确定它所做的事情。首先，我们创造了四个迪夫带着响应箱类，然后我们给它们一个宽度、高度和边距-所有这些都使用视口单元。我们唯一错过的就是H1一个相对大小，以便有一个100%的流体页面(尽管是一个非常基本的页面)，所以让我们继续纠正它：
| background-color: #81d8d0; |
这些是使用viewport单元可以完成的基本功能，但正如您所预期的，有些人已经进一步推进了它们的实现，并使用它们拼凑了一些非常酷的东西-请看下面的内容CSS MacBook在……上面代码笔例如。
如果您查看CSS，您可能已经注意到它如何将视口单元与常规的旧像素值混合，以获得非常酷的效果。我们的观点是，就像所有与CSS相关的东西一样，天空是它所能做的事情的极限。
在我们的基础上，是时候继续前进，把我们新发现的智慧应用到divi主题.
如何与Divi一起使用Viewport单元
到目前为止，我们石狮做网站讨论的所有内容都是非常简单的，幸运的是，对您来说，它将保持这种状态，因为使用viewport单元创建Divi页面非常简单。
实际上，要做到这一点，您只需稍微熟悉Divi构建器，并知道如何将自定义CSS添加到您的部分和模块中。然后，这只是一个调整代码的问题，直到您对结果感到满意为止。一旦您在DiviBuilder中，您将需要单击其中一个图标，以便启动设置相应部分或模块的窗口：
这些窗口中的每一个都将有一个自定义CSS选项卡，使您能够轻松地在一次移动中将CSS添加到整个块中。为了保持对模块大小的更高程度的控制，您需要直接向它们添加CSS，而不是添加它们的容器：
让我们使用Divi的预定义布局之一作为我们的测试场地。这是主页基础布局，通过几个小的调整：
如果您想在不影响现有WordPress页面的情况下遵循我们的测试过程，只需创建一个新页面，激活Divi Builder，单击来自图书馆的负载，并选择任何可用的多个预定义布局。我们建议您这样做，因为我们不能确切地向您展示这些流畅的页面，而且它将帮助您熟悉这个过程。
这个主页基础布局是少数模块的简单组合。一个滑块，一个全宽度的标题，四个有相应图标的短距，以及一个动作调用.让我们玩一下滑块：
如您所见，我们将滑块的宽度设置为视口宽度的75%，即5rem字体大小(相对于HTML的默认字体大小值)。尽管效果看起来与Divi的默认响应非常相似，但是使用这种配置，您将能够更好地控制站点在不同分辨率下的外观。
现在，移动到全宽度的标题上。如果您只使用一个简单的标题作为主页基础布局确实如此，您将希望将CSS输入到标题框中的自定义CSS标签：
字体大小可以相当快地使用rem单位，所以要小心。尽管在此布局中，标题默认设置为30像素，但如上面所示，用5 rem覆盖该值将导致相当于80像素的字体大小。
最后一个例子，让我们尝试一些不同的东西。正如您可能已经注意到的，主页基础布局包括四个带有图标的文字剪贴画。现在，只对其中的两个…进行了非常简单的调整-第二个和第四个
…我们可以获得相当好的(完全响应的)缩放效果：
如您所见，在CSS中实现viewport单元来创建FluidDivi页面非常简单。您只需要一点时间和耐心来调整模块的设置，直到您对多个分辨率的结果感到满意为止。
当然，你需要不断地测试这些设置，看看它们是如何维持的-我们在那里掩护你.
结语
我们都知道，创造可移动设计的重要性再怎么强调也不为过。移动设备已经如此迅速地成为规范，如果不能将响应性融入到您的设计中，很可能就等于表示您并不关心它们的成功。所有这些都意味着，在最佳实践的范围内保持领先是很重要的。
就Divi而言，在创建流畅页面时请记住以下技巧：
- 熟悉DiviBuilder设置中的新自定义CSS选项。
- 使用视图单元，以便为页面的“构建块”创建流体框。
- 通过检查页面是否支持多个分辨率来测试CSS。
石狮做网站当涉及到响应性设计时，你有什么诀窍吗？与我们分享，并订阅下面的评论部分！
