前端布局方法大全及定义浅谈
早期 <table>， 后来 <p> ，再后来 html5 语意化标签根据自上而下的方法顺次排布。
刚开始设计目的是用于图文环绕排版、不过现在常用于左右布局。
维持与目的元素（position不为static的近期父元素）的绝对距离，用场景有顶部固定的广告栏，瀑布流等等。
较为系统的布局策略，详见：
较为系统的布局策略，详见：
静态布局：网站布局一直根据固定的布局和尺寸来显示，不用 Flex 之类的弹性盒子策略。
达成办法：
一般/文档流 布局
Float 布局
绝对布局
对于PC：通常居中布局，所有样式用绝对宽度/高度（px），屏幕宽高有调整时，用滚动条来查阅被遮掩部分；
对于手机：另外打造移动网站，单独设计一个布局，用不一样的域名如 wap.或m., 在 <viewport meta> 标签上设置 width，页面的各个元素也使用px作为单位。通过用 js 动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。
优点：这种布局方法对设计师和 css 撰写者来讲都是最容易的，亦没兼容性问题。
缺点显而易见，不可以依据用户的屏幕尺寸做出不一样的展示：
窄屏幕滚动条体验非常差
宽屏有大片空白，不利于空间借助
流式布局目的是在不同大小的设施上满屏呈现同样网页。它是用于解决类似的设施不同分辨率之间的兼容（通常分辨率差异较少）。
达成办法：
允许网页宽度自动调整：<meta name="viewport" content="width=device-width, initial-scale=1" />
不用绝对尺寸（包含容器/字体/图片），用百分比、em、rem、vw、vh 等
可用 flex 等弹性盒子（不要用 px 定尺寸）
优点：页面左右满屏。
但缺点明显：
用百分比概念，所以在大屏幕的手机/Pad 下（或者横屏下）显示成效会变成有的页面元素被拉的非常大，但内容数目却不变，看上去稀疏不紧凑，空间借助率低下。
假如文字也根据百分比放大，则整体成效会很不协调（老人机成效）。
自适应布局是为不一样的屏幕分辨率分别概念不一样的布局。改变屏幕分辨率可以切换不一样的静态布局（页面元素地方可能发生改变），但在每一个静态布局中，页面元素不随窗口大小的调整发生变化。
自适应布局看作是静态布局的一个合集。
达成方法：
静态布局办法
分辨率 detector（media query/server-side detector/UA）
自适应布局 页面里面元素的地方会变化，非常不错的解决了流式布局中的大屏空间借助率不高弊病。
缺点：单个布局容器没办法灵活伸缩，未触发布局切换的状况下，容器仍然容易出现静态布局中提到的问题。
响应式布局同样分别为不一样的屏幕分辨率概念布局。改变屏幕分辨率可以通过 css Media query 实时地切换不一样的布局（页面元素地方可能发生改变），在每一个布局中，页面元素会随窗口大小的调整发生流式布局中的自动尺寸变化。
达成方法：
流式布局
css media query
响应式布局 融合了流式布局和自适应布局的优势。
缺点：css 代码繁琐，对于特定的设施有较多冗余，适用于对于各个终端（尤其是手机端）性能需要不高的 Blog Dos 站点。
布局的目的，归根结底，都是为了网站设计服务。那样就顺带聊一聊和响应式设计（RWD）和自适应设计（AWD）。
Wikipedia: Responsive web design （RWD） is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes. Content, design and performance are necessary across all devices to ensure usability and satisfaction
“Progressive enhancement”， “one-fits-all”
响应式设计基于响应式布局，用同一套页面在各种各样不同大小的设施上进行大小适合、布局（甚至功能）适当的展示。
响应式设计会依据辨别屏幕宽度对于展示的具体内容块进行地方调整，甚至展示和隐藏。
达成方法：
响应式布局
特质测试 （用于网页功能的渐进增强）
Wikipedia: Adaptive web design is a process of server-side detection that chooses a design layout and size to display. All types of web design layouts can be used, including responsive layout. The adaptive design will serve different versions of the site to different devices based on common screen sizes and resolutions. The only difference is the way the design is looked at from a collateral or device viewpoint rather than the responsive web design （RWD） one-size-fits-all approach to layout
“All types of web design layouts”， “different versions to different devices”，
自适应设计是通过服务端测试设施种类、从 site 的不同版本中选择比较合适该设施种类的设计布局/尺寸的版本进行展示。它可以用到所有（包含响应式布局）布局策略。
达成方法：
server-side detection
different versions to different devices
对于 PC: 可用流式布局；
对于 Mobile: 可用流式布局。推荐一个 Rem 解决方法：
设置元素（可以包含字体等）大小为 rem （rem 是以跟元素font-size为基准的单位）
根据屏幕宽度的不同，js 动态设置 <html> 的 font-size 大小，元素同样会根据屏幕宽度等比率放大缩小
希望以上内容可以解决您的问题！
如有其他问题欢迎大家一起交流学习！
►本文网址：http://www.nsxcb.cn/HTML/HTMLrumen/20220511/14155.html
►凡本站提供教程均已验证教程的准确性。
