移动端有哪些常见布局方式？

最新推荐文章于 2022-04-30 11:30:35 发布

天心天地生

最新推荐文章于 2022-04-30 11:30:35 发布

阅读量389

点赞数

CC 4.0 BY-SA版权

分类专栏： # CSS深度思考

本文链接：https://blog.csdn.net/tianxintiandisheng/article/details/102528527

CSS深度思考专栏收录该内容

65 篇文章

订阅专栏

本文探讨了响应式网页设计的多种实现方法，包括使用px、em/rem单位，百分比宽度，以及通过JS控制scale比例，确保网页在不同设备上都能良好显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                    响应式布局。

可以用px作为像素，网页进行平铺。全屏的用100%。高度可以用px写死，宽度可以用百分比。不管网页怎么拉伸，高度不变，宽度会相应的扩大。
em/rem 方式布局。

可以设置好html，body的字体大小，然后用不同的尺寸手机访问的时候，我们可以去修改body的字体大小，网页（网页的内容用rem设置宽度、高度）的之内容会自动进行缩放。
可以按照设计稿的宽 高 来写css，然后通过js判断不同尺寸屏幕，修改 里面 scale的比例大小。

比如设计稿是 640 * 1136

我们可以按 640宽度写网页 也可以按320宽度写网页。

然后

默认宽度可以设置为你写网页的宽度。

然后再通过js 来控制scale的比例缩放即可 也可以控制 最小宽度 跟 最大宽度。