①固定布局 采用固定像素
原理:设置好视口,跟PC端写法一样,版心设置320即可
优点:思路沿用pc端,上手简单
缺点:界面两侧留有空白,用户体验差,而且元素略小
②流式布局
原理:用百分比代替固定像素,限制布局盒子的最大最小宽度
优点:实现自适应
缺点:只做宽度适配,高度会被拉伸
③rem布局
原理:设置跟标签html字体的大小,利用媒体查询不同屏幕宽度下字体的大小,利用相对定位rem代替固定px
优点:宽高字体大小都能自适应,显示效果好
④媒体查询布局
原理:利用媒体查询不同的屏幕宽度,给每个不同的设备都写一套样式文件
缺点:复杂,工作量大,后期难维护
常见的移动端布局解决方案有哪些?原理如何?
最新推荐文章于 2025-05-07 08:16:35 发布