不久前，我不同意诸如bootstrap和amaze之类的响应组件或框架组件的概念。我认为国内搜索引擎在提供手机搜索结果页面时仍然会给手机网站打分，但他们无法识别像谷歌这样的响应性网站。这可能需要一些时间来发展。但毫无疑问，现在网络趋势首先转向了移动。当然，如果您使用域名或其他解决方案，这并非不可能，但响应可能更简单，发展前景也很好。

在过去的两三周里，我每天都在写响应页面，所以我在响应页面和Ajax方面积累了很多经验。我已经大致整理了几页回应性文章的要点。如果我想在这个领域发展或者对它感兴趣，我希望我能给你一些帮助。

习惯于使用PC页面的前端开发人员可能更喜欢使用PC来控制页面大小，但EM和REM在响应页面中更常见。使用它们来控制字体大小，甚至是方框大小，总体上效果非常明显。

例如，我的字体设置是10px/20px/30px等。网站上不同位置的自然字体大小不可避免地会有差异。如果一个页面足够复杂或有足够多的文字，这些字体的大小设置也是一个很大的工作，但是，在响应页面中，您还没有完成设计：如果您用手机浏览页面，您会发现字体会非常大，甚至单个标题也会填满手机屏幕，这可能会对移动用户的体验产生影响。因此，您应该开始编写媒体查询，然后发现页面上有几十种字体需要设置。如果以不同的分辨率逐个调整，可能需要编写100多句CSS代码，但如果使用EM/REM，可以大大减少工作量并确保字体比例一致。

您可以自己搜索EM/REM的解释。互联网上有无数这样的教程。事实上，它们和px一样简单。当我开始使用它们时，我只花了几分钟熟悉它们。如上所述，您还可以使用它们控制框的大小，然后在响应页面下均匀缩放。当然，这需要足够的计算。此外，值得一提的是，字体图标也可以由它们控制。有关详细信息，请参阅不同“字体图标”的官方文件。

有几种方法可以解决缩放问题。最适合新手的无疑是百分比布局。在“关键帧宽度”设置下，百分比可能会产生意外效果：

框1{宽度：100%；}

ul{利润率：02%；}

我不主张在布局中使用百分比，但有时它可能会大大减少工作量。将box1宽度设置为100%后，它将自动用宽度填充整个浏览器。无论您是什么分辨率的移动PC，它的性能总是很好。此时，您在box1下为UL设置了约2%的边距，UL的实际边距大小将随浏览器窗口大小的变化而变化。这样，我们都理解了百分比布局的概念。

当然，有时它不会产生预期的效果，尤其是在分辨率很小的情况下，原始看似良好的百分比设置将非常奇怪，因为大多数情况下，响应只指定宽度，而长度由文档和浏览器确定。此时，如果您想在所有终端上都有良好的体验，就需要mediaquery来解决这个问题。

MediaQuery

流行的解释是CSS的媒体查询功能。它不仅可以准确地识别设备，还可以设置自己的分辨率或宽度。W3CSchool中有mediaquery参考文档。如果你认为文件太多，我可以大致解释一下它的工作原理。

必要时，可以设置长方体的高度。当盒子的高度为500px时，它在电脑上看起来可能很好看，但在手机上打开它时却很可怕。整个框内满是页面，内容排列混乱，严重影响用户体验。此时，您可以使用媒体查询mediaquery，使用它为不同的大小设置不同的高度。例如，当打开640/320时，盒子的高度分别为300/200px，这看起来不错。

你可能会想到进口。事实上，媒体查询可以这样理解。它为不同的宽度或设备设置类似于导入的CSS规则，以确保实际呈现完整页面的效果。

Media query还可以为一个页面准备多个不同的CSS文件。当设备大小不同时，可以使用不同的CSS文件。如果样式文件很大，也可以考虑使用此方法。

我所看到和实际使用的许多前端框架都是丰富的前端设计。不建议新手前端盲目使用框架进行布局，无论框架看起来有多漂亮。在实际使用过程中，您可能会发现很多问题，例如类名太多太复杂（您可能对约定的类名知之甚少，没有很多CSS经验）和样式冲突。过多资源的引入会导致页面沉重、偏离设计效果等。

以bootstrap为例。如果你想设计一个类似谷歌的搜索框，这是非常困难的。Google类型的搜索框实际上在框中包含一个输入，然后在框中添加左右图标。如果您使用引导，可能会有许多无法解释的冲突，但您实际得到了什么？一个鱼片，一排高？还是他的宽度百分比？这些只是用CSS编写的几句代码。