虽然中国的搜索引擎技术还不是很成熟,但百度建议移动网站和PC网站应该分开。然而,随着技术的发展,响应式网站在未来会像谷歌一样得到认可。毕竟,它更方便,节省了资源和时间成本。以下是我的一些经历:
习惯于PC页面的前端开发人员可能更喜欢使用PC来控制页面大小,但EM和REM在响应页面中出现的频率更高。使用它们来控制字体大小,甚至是帧大小,总体上有非常明显的效果。可以大大减少工作量,保证字体比例的统一。
所有人都可以找到EM和REM的解释。有无数的在线教程。事实上,它们和px一样简单。在我开始使用它们之后,我只用了几分钟就熟悉了它们。如前所述,您还可以使用它们来控制框架的大小,然后在响应页面下均匀缩放。当然,这需要足够的计算。值得一提的是,字体图标也可以由它们控制。
有几种方法可以解决缩放问题。对于初学者来说,适合的布局无疑是百分比布局。使用“关键点宽度”设置,百分比可能会产生意外效果:
方框1{宽度:;}
Ul{裕度:02%;}
有时这可以显著减少工作量。通过将浏览器的宽度设置为,可以将浏览器的宽度设置为。不管它在你的电脑上有多高的分辨率,当你在第1列中为保险商实验室设定2%左右的利率时也是如此。UL的实际边距大小也随浏览器窗口的大小而变化。
当然,有时它并不像预期的那样有效,尤其是在小的分辨率下。以前看起来不错的百分比设置看起来很奇怪,因为大多数时候,响应类型只指定宽度,而长度由文档和浏览器决定。此时,如果您希望在所有终端上都有良好的体验,您需要使用mediaquery来解决这个问题。
流行的解释是CSS的媒体查询功能,它不仅可以准确识别设备,还可以设置分辨率或宽度。W3Chool mediaquery具有媒体查询参考文档。如果你认为有太多的文件,我可以给你一个一般的解释,如何工作。
如果需要,可以设置长方体的高度。这个盒子在500像素高的电脑上看起来很不错,但是用手机打开它就有点吓人了。整个框内页面堆满,内容排列混乱,严重影响用户体验。此时,您可以使用media query为不同的大小设置不同的高度。例如,启用640/320时,框的高度为300/200像素,看起来不错。
你可以考虑进口。其实,媒体的询问可以这样理解。它为不同的宽度或设备设置类似于import的CSS规则,以确保完成页面的实际呈现。
如果你想设计一个类似谷歌的搜索框,这是非常困难的。Google类型的搜索框实际上在框中包含一个输入,然后将左、右图标添加到框中。如果您使用bootstrap执行此操作,可能会有许多令人困惑的冲突,但是您实际得到了什么呢?一个鱼片和一排高?或者他的百分比宽度?这些只是用CSS编写的几行代码。
还有一些框架过于依赖Ajax。他们可能有个好主意。很多Ajax在前端看起来很酷,而且用户友好,但是大量的请求对服务器不友好,这可能会大大降低服务器的实际负载。总之,要根据实际需要解决问题,框架并不是固定的。如果您对制作响应性网站有任何要求,请与我们联系。
电话咨询
在线咨询