css - HTML布局如何做多端自适应？

Question

有哪些方案？

Answer 1

关于多端适配其实也没有那么多所谓的方案，总得来说流式布局，rem布局，媒体查询这几个配合起来使用罢了。

流式布局

流逝布局其实就是百分比布局，至于何时使用百分比布局，这需要看你的页面是怎样的，也就说你的布局适合的时候你就使用。

rem布局

rem布局就是把你的像素单位从px转换为rem，rem的方案它的本质是基于根元素html的字体的倍数来取值，譬如你的html元素上设置font-size: 100px，那么你在其他地方的1rem就是100px。这种你直接在百度上搜淘宝rem适配方案就好，使用js的方式动态修改html元素的fontsize，这样在不同的视口下改变元素的宽高，字体的大小等等。

媒体查询

一般多端适配的时候，在电脑端可能有一条长长的nav栏，但是这在手机端是不可能存在的，于是乎你就需要使用媒体查询，通过媒体查询它会在你的视口改变的时候自动检测当前视口的宽高，然后当你适配该媒体查询下的样式。

百分比一般而言应该不需要学习你都懂，而关于后面的rem和媒体查询并不难，但是这里不可能把内容给你写下来，所以后面两个你可以自己在站内获取掘金去搜索一下，有博主写得很详细很详细的。希望可以帮助到你。

Answer 2

响应式设计布局方案方案，就是通过 @media 去做媒体查询。

不过现在很少全靠自己开发整套的自适应样式了，都是通过一些UI组件库去完成 layout，比如说 Bootstarp、AntDesign、Ele UI

其中的抉择就是企业官网这类展示性的网站，选择 bootstrap。管理后台选择 AntD 和 EleUI 这种组件UI。

当然也可以考虑当下环境比较流行 TailwindCSS 这样的原子类方案，但是就比较繁琐了，需要有很多前置执知识的学习。

Answer 3

当然可以，以下是HTML布局如何做多端自适应的几种方案：

1. 流式布局（Fluid Layout）：流式布局也称为百分比布局，它的主要思想是使用百分比来代替像素来设置元素的宽度。这样，元素的宽度就会随着浏览器窗口大小的改变而改变。
2. 响应式布局（Responsive Design）：响应式布局是使用媒体查询（Media Queries）来根据设备的特性（如视口宽度）调整布局。通过使用 CSS3 的媒体查询，可以针对不同的屏幕尺寸设置不同的样式。
3. 弹性布局（Flexbox）：弹性布局是一种一维的布局模型，它提供了更好的方式来设计复杂的布局结构，特别是当子元素的大小未知或者动态的时候。弹性布局能够让子元素在容器中以对齐、方向、顺序和尺寸等的方式灵活的分布。
4. 网格布局（Grid Layout）：网格布局是一种二维的布局模型，它让你可以在两个维度上（行和列）来排列元素。这种布局模型非常适合创建复杂的网页布局，尤其是当元素跨越多行或者列的时候。
5. CSS 框架：像 Bootstrap、Foundation 这样的 CSS 框架，都内置了响应式设计的特性，通过这些框架，你可以很方便地创建多端自适应的网页。
6. Viewport元标签：这个标签可以让你的网页在不同的设备上看起来更合适。例如，你可以设置initial-scale来控制页面首次加载时的缩放级别，或者设置max-width来限制内容的最大宽度。

以上就是HTML布局做多端自适应的一些常见方案，你可以根据项目的实际需求来选择最适合的一种或多种方案。