控制大小,习惯了PC页面的前端开发者 谈谈响应式网站前端设计

摘要：一段时间前，我仍然有响应概念

Bootstrap、Amaze等框架组件用了好几次都不这么认为。我觉得国内搜索引擎在提供移动搜索结果页面的时候还是会给移动网站加分，但是不能像谷歌一样识别响应网。...

一段时间前，我对响应式的概念还是

Bootstrap、Amaze等框架组件用了好几次都不这么认为。我觉得国内搜索引擎在提供移动搜索结果页面的时候还是会给移动网站加分，但是不能像谷歌一样识别响应网站，可能需要一段时间才能开发出来。但毫无疑问，Web趋势转向移动优先级。当然，如果你使用域名或其他解决方案也不是不可能的，但响应可能更简单，发展前景也很好。

在过去的两三个星期里，我每天都在写响应页面，积累了很多响应页面和ajax的经验。我大致梳理了几个响应页面的要点。如果你想在这方面发展或对它感兴趣，我希望它能给你一些帮助。

控制大小

习惯了PC页面的前端开发者可能更喜欢用PC来控制大小，但em和rem更多地出现在响应页面中，用它们来控制字体大小，甚至框架大小对整体效果非常明显。

例如，我的字体设置是10px/20px/30px等。网站上不同地方的自然字体会有不同的大小，这是不可避免的。如果一个页面足够复杂或有足够的文本，这些字体的大小设置也是一项大量的工作，但在响应页面中，你设计它们并不完整：如果你用手机浏览页面，你会发现字体会支持很多，一些标题甚至充满了手机屏幕，这可以想象对移动终端用户体验的影响。因此，你应该开始写媒体查询，然后发现一个页面需要设置几十个字体。如果你在不同的分辨率下逐一调整它们，你可能需要写100多个CSS代码，但如果你使用em/rem，可以大大降低工作量，保证字体的统一比例。

你可以自己搜索em/rem的解释。网上有无数这样的教程。事实上，它们和px一样简单。当我开始使用它们时，我只需要几分钟就能熟悉它们。正如前面所说，你也可以用它们来控制框架的大小，然后在响应页面下统一缩放，当然这需要足够的计算。另外值得一提的是，字体图标也可以用它们来控制，具体可以参考不同“字体图标”的官方文件。

百分比

有几种想法可以解决缩放问题。最适合新手的无疑是百分比布局。在关键宽度设置下，百分比可以发挥意想不到的效果：

box1{ width:100%;}

ul{ margin:0 2%;}

我不提倡布局所有百分比，但有时这可能会大大降低工作量。在设置了100%的box1宽度后，它会自动填充整个浏览器的宽度。无论你的手机PC分辨率如何，它总是有很好的性能。此时，您在box1下设置约2%的ulmargin。随着浏览器窗口尺寸的变化，ul的实际margin尺寸也会发生变化。这样，每个人都或多或少地理解了百分比布局的概念。

当然，有时候也不会有想象中的效果，尤其是分辨率小的时候。看似不错的百分比设置会很奇怪，因为响应式大部分时间只约定宽度，长度由文档和浏览器决定。这个时候，如果你想在所有的终端上都有很好的体验，你需要Media Query解决问题。

Media Query

流行的解释是CSS的媒体查询功能，它不仅可以准确识别设备，还可以设置自己的分辨率或宽度。w3cshool中有Media Query的参考文件，如果你觉得文件太多，我可以粗略解释一下它的工作原理。

必要时，您可以为box设置高度。当box有500px高度时，它可能在PC上看起来不错，但当你用手机打开它时，它有点吓人。整个box充满页面，内容排列混乱，严重影响用户体验。此时，您可以使用媒体查询media Query，单独为不同的大小设置不同的高度，例如，box在640/320打开时分别处于300/200px的高度，所以看起来不错。

你可能会想到import。事实上，媒体查询可以理解这一点。它为不同的宽度或设备设置了类似import的css规则，以确保页面的实际渲染效果。

媒体查询还可以为一个页面准备多个不同的CSS。当设备尺寸不同时，可以使用不同的CSS文件。如果样式文件比较大，也可以考虑这种方法。

说说框架

我见过和实际使用的许多前端框架都是富有前端类型的设计。不建议新手盲目使用前端框架进行布局，不管框架看起来有多漂亮。在实际使用过程中，你可能会发现很多问题，比如太多太复杂的类名（当你没有太多的css经验时，你可能对约定的类名知之甚少）、风格冲突。过度引入资源导致页面繁重，偏离设计效果等。

以bootstrap为例。如果你想设计一个类似谷歌的搜索框，那就很难了。谷歌类型的搜索框实际上包含了box中的input，然后在这个box中添加左右图标。如果你使用谷歌trap，可能会有很多莫名其妙的冲突，但你实际上得到了什么呢？一个圆角，一个行高？还是他的百分比宽度？用css写这些只是几句代码。

有些框架过于依赖AJAX。他们可能有很好的想法。大量的AJAX在前端看起来很酷，对用户足够友好。然而，大量的要求对服务器不友好，这可能会大大降低服务器的实际负载。简言之，框架并不是万能的，根据实际需要解决问题。

注：阅读相关网站建设技能，请移动到网站建设教程频道。