随着移动设备和不同尺寸的屏幕的出现，响应式设计日益成为网页设计的主流趋势。但是，在设计响应式网站时，如何兼容低端设备却是一个问题。本文将介绍一些关键技术和最佳实践，帮助您在设计响应式网站时兼容低端设备。
什么是响应式设计？
响应式网站设计是一种网站设计技术，可以自动调整网站的布局和内容以适应不同设备的屏幕尺寸。这种设计方法具有适应性，可以在移动设备、平板电脑和计算机上实现可用性。在这方面,我们所说的响应式设计不应该只考虑布局的适应性，同时还应考虑其他元素，例如字体大小、图像和视频。
设计低带宽和老旧设备上的网站
尽管响应式设计可以自适应屏幕和设备，但是在低带宽和老旧设备上加载响应式网站可能会遇到一些挑战，包括网站速度慢、布局失控、页面加载时间过多等。
下面是一些方法来解决效率问题:
最小化页面负载
每个网页都有其属性样式与外部样式表，以及CSS框架或库文件。因此，需要尝试尽量减少页面负载以提高页面加载速度。一些技术包括：
- 压缩减少HTML、CSS和JavaScript代码量
- 清理无用的HTML和CSS代码，包括空格、注释、换行符和不必要的代码
- 减少图片和视频文件大小，保持尽可能小的文件体积
对图片进行优化处理
图像是一个常常占用页面负载较大的元素。使用适当工具可以达到光滑和调整图像大小的目的。这可以使图片更快加载，因为它们的文件大小更小。
CSS 中的 Responsive Design 优化
通过调整 CSS中 Responsive Design 的优化，可以兼顾低端设备，建议您使用以下准则
- 使用兼容性好的 CSS 属性
- display：对于移动设备，通常最好使用块级元素，并且利用CSS Grid布局定义网格。
- Transform：防止客户端自动缩放，使用CSS3属性“transform”。
- Flexbox：它是一种CSS布局机制，并且具有可响应性的属性。
- Align-self、align-content、align-items、justify-content：维护在设计过程中定义的方向和顺序。
- scroll-behavior：在响应式网站中，滚动应该具有一致的方式，而不是在页面上跳动和“轻轻摇晃” -这是可以通过CSS3的“scroll-behavior”属性实现的。
- 小心使用字体和颜色：
字体大小和颜色必须在可引用范围内进行定义，并且尽可能使用不同的字体类别。
不要使用透明色或不明显的字体颜色。
一个简单的示例
以下是一个简单示例，说明如何使用 CSS 和最佳实践，兼容低端设备。
HTML
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- --- --------------
----- ---------------- -----------------
-------
------
---- ------------------
----------- -- -- ------------
------- -- -- ------- -- ---------- --- -----------
------
-------
-------CSS
-- -------------------- ---- -------
---------- -
---------- ------
------- - -----
-------- -----
-
------ ---- ------ --- ----------- ------ -
---------- -
---------- ----
------- - -----
-------- -----
---------- -----
-
-在这个示例中，我们定义了一个容器，它的最大宽度为800像素。我们还为低分辨率设备定义了一个媒体查询，并使用了最佳实践。
在这个媒体查询中，我们通过将容器的最大宽度调整为95%，将字体大小从18像素调整到16像素，将边距设置为自动，以实现字体缩小和模块包装。
结论
这篇文章提供了一些方法和技巧，可以帮助您设计适用于低端设备和响应式设计的网站。最佳实践包括最小化页面负载、对图片进行优化处理，使用 CSS 中的 Responsive Design 优化，并小心使用字体和颜色。下次设计响应式网站时，记得使用以上最佳实践，以确保网站能够兼容低端设备并使其更快的加载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6715f4b5ad1e889fe219bcc6