响应网站前端设计分析！

佚名 2022-08-06

一段时间前，小编对响应式的概念还是Bootstrap、Amaze这样的框架组件用了好几次都不同意。小编认为，国内搜索引擎在提供移动搜索结果页面时，仍然会给移动网站加分，但不能像google也许需要一段时间来识别响应网站。但毫无疑问，现在Web趋势转向移动优先，当然，如果你使用域名或其他解决方案并非不可能，但响应可能更简单，发展前景也很好。

小编大致梳理了几个响应页面的要点。如果你想在这方面发展或对它感兴趣，我希望它能给你一些帮助。

控制大小

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

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

关于em/rem的解释大家可以自行搜索，网上这类教程数不胜数，实际上它们就和px同样简单，当小编开始使用时，只需几分钟就能熟悉它们。

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

百分比

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

box1{ width:100%;}

ul{ margin:0 2%;}

小编并不提倡布局的所有百分比，但有时这可能会大大降低工作量box宽度设置100%后，会自动填充整个浏览器的宽度，不管你是手机PC它总是有很好的分辨率。这时候你给box1下面的ul设置约2%margin同样，随着浏览器窗口大小的变化，ul的实际margin大小也会随之变化，所以大家或多或少都理解百分比布局的概念。

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

Media Query

通俗的解释就是CSS媒体查询功能，既能准确识别设备，又能自行设置分辨率或宽度，w3cshool里有Media Query如果你认为文档太多，小编可以粗略地解释它的工作原理。

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

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

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

说说框架

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

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

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