1、使用响应式布局：使用CSS媒体查询和弹性布局来根据屏幕尺寸调整页面布局和元素大小。通过设置百分比、em或rem单位来实现元素的相对大小。
2、使用Viewport：通过设置Viewport元标签来控制页面在移动设备上的显示。可以使用来设置Viewport的宽度为设备宽度，并且禁用缩放。
3、使用CSS Flexbox或Grid布局：这些布局技术可以帮助您更轻松地创建自适应的布局，使元素在不同屏幕尺寸下自动调整位置和大小。
4、使用CSS媒体查询：通过使用@media规则，可以根据不同的屏幕尺寸应用不同的CSS样式。您可以根据需要设置不同的断点，并在不同的屏幕尺寸下应用不同的样式。
5、使用流式布局：使用百分比单位和自适应容器来创建流式布局，使页面元素根据屏幕尺寸自动调整大小。
6、使用图片适配：使用srcset和sizes属性来为不同屏幕尺寸提供不同大小的图片，以减少加载时间和带宽消耗。
7、使用JavaScript库：例如，使用Bootstrap或Foundation等前端框架，它们提供了一些内置的响应式布局和组件，可以帮助您更轻松地实现移动端适配。
原文出处：http://www.dongblog.com/notes/94.html
来源：博客网 转载请注明出处！
