带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（1）https://developer.aliyun.com/article/1340897?groupCode=taobaotech
Liquid Page Layout Example芦@nickpettit芦CodePen
（地址：https://codepen.io/nickpettit/pen/dyZwVg）
（地址：https://codepen.io/nickpettit）
（地址：https://codepen.io/）
但流式布局并不是完美的。使用流式布局的Web页面上，内容可能会溢出，在较小的屏幕上文字可能会换行，在较 大的屏幕上可能会有很多不必的空白。
大多数流体布局在 800px x 600px到 1280px宽或更大的屏幕分辨率下看起来还不错。然而，如果我们能把它分割得更细一些，比如为 800px ~ 1024px、1024px ~ 1280px以及1280px以上的分辨率提供不同的定制布局，那效果会更佳。同样，对于 640px ~ 800px、320px ~ 640px、240px ~ 320px 以及 240px 以下的分辨率也可以定制不同的布局。
大约在 2004 年的时候，Cameron Adams（@themaninblue）（地址：https://codepen.io/）在他的博文
《Resolution dependent layout》（地址：https://www.themaninblue.com/writing/perspective/2004/09
/21/）提出了基于屏幕分辨率来动态构建Web布局，即使用JavaScript根据浏览器窗口大小加载不同CSS文件。
<!-- Narrow style sheet --> <link rel="alternate stylesheet" type="text/css" href="css/narrow.css" title="narrow"/> <!-- Default style sheet --> <link rel="stylesheet" type="text/css" href="css/normal.css" title="default"/> <!-- Wide style sheet --> <link rel="alternate stylesheet" type="text/css" href="css/wide.css" title="wide"/> <!-- Included JavaScript to switch style sheets --> <script src="scripts/dynamiclayout.js" type="text/javascript"></script>
注意，在所有 标签上title属性的值分别为 narrow、default 和 wide，并且在 dynamiclayout.js中有一个DynamicLayout() 函数，将会根据 标签的title属性的值来调用不同的样式表：
function dynamicLayout(){ var browserWidth = getBrowserWidth(); // Narrow CSS rules if (browserWidth < 640){ changeLayout("narrow"); } // Normal (default) CSS rules if ((browserWidth >= 640) && (browserWidth <= 960)){ changeLayout("default"); } // Wide CSS rules if (browserWidth > 960){ changeLayout("wide"); } }
@Kevin Hale 的博文《 Dynamic Resolution Dependent Layouts》详细介绍该技术。
这种布局技术后来就以 Cameron Adams 博客文章标题命名，被称为 分辨率相关的布局。这种布局技术虽然会额外增加开发者（开发者需要为不同定制的布局提供不同样式表）工作量，但在CSS媒体查询流行之前还是很受欢迎的。它也被称为是早期的 CSS 媒体查询（通过JavaScript查询断点）。
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（3）https://developer.aliyun.com/article/1340895?groupCode=taobaotech
