页面的自适应方法总结

Posted 2022-03-30 jennydtt

一、使用前端框架，如bootstrap响应式布局，推荐使用

二、包裹一个容器，设置一个固定宽度如1200px，并设置居中，里面的内容可以写具体的px值，不同电脑显示的两边的空白大小不一样。

三、使用百分比，各个部分都使用百分比。这种编码难度大，难以掌控，测试困难，一般少用。

四、针对不同分辨率写不同css文件，不推荐使用。（包含媒体查询media）

五、用js/jquery动态调整一些值的大小，但是页面上较多元素都会变形的情况不推荐使用。

六、百分比和em结合使用。

七、使用rem来作为单位写样式，需要借助js来获取分辨率大小调整rem，pc端兼容差，适合移动端。