日照网站建设_关于响应式网站建设设计

日照网站建设_关于响应式网站建设设计

响应式网站建设设计（Responsive Web Design，RWD）在近几年风靡一时。但是，人们大多只是在不停念叨网站的“响应式”是多么重要，而极少有人去深入探讨怎样才能做好响应式设计。

比较常见的实践是用多种分辨率来测试一个网站，然后添加越来越多的媒体查询（Media Query）规则来修补网站在这些分辨率下出现的问题。然而对于今后的 CSS 改动来说，每个媒体查询都会增加成本，而这种成本是不应轻易上升的。未来每次对 CSS 代码的修改都要求我们逐一核对这些媒体查询是否需要配合修改，甚至可能要求我们反过来修改这些媒体查询的设置。这一点常常被我们忽略，后患无穷。你添加的媒体查询越多，你的 CSS 代码就会变得越来越经不起折腾。

这并不是说媒体查询是一种不良实践。只要用对了，它就是利器。但是，你只应该把它作为末尾的手段。比如你想把网站做得弹性灵活，但其他尝试全都失败了；或者我们希望在较大或较小的视口下完全改变网站的设计形态（譬如，把侧栏改成水平布局）。我这么说的原因在于，媒体查询不能以一种连续的方式来修复问题。它们的工作原理基于某几个特定的阶梯（亦称“断点”），如果大部分样式代码并不是以弹性的方式来编写的，那么媒体查询能做的只是修补某个特定分辨率下的特定问题——这本质上只是把灰尘扫到地毯下面而已。

当然，有一点上面并没有提到，媒体查询的断点不应该由具体的设备来决定，而应该根据设计自身来决定。这不仅是因为我们的网站需要面向的设备太多了（尤其是考虑到未来的设备时），还因为一个网站在桌面端可能会以任意尺寸的窗口来显示。如果你有信心自己的设计在任何可能出现的视口尺寸下都能良好工作，谁关心这些设备的分辨率具体是多少呢？

遵从“尽量减少代码重复”所描述的原则对此也是有帮助的，因为你不需要去覆盖媒体查询里同样数量的声明。这在本质上减轻了它们所产生的维护成本。

以上是日照网站建设公司（昊诺网络公司）所分享，您要是喜欢该网站建设的知识，请关注我们网站更多的动态！