页面动态布局感悟

Posted 2020-09-26

有时候我们编写好了一个美观的页面，自以为很满意，但是当别人用的时候改变浏览器的宽度，或者放大缩小浏览器，页面的美感就很容易被打破，这就是因为你的页面布局不够动态！

所谓动态布局就是你的页面在各种情况都不会出现布局混乱，元素重叠，空白过多，以及出现左右滚动条等情况。所以写好页面，千万不要因偷懒而草草结束，记着做以下两步：改变你的浏览器的宽度，从最大到最小；按住Ctrl键，滚动鼠标，缩放你的浏览器。如果这两种情况都是OK的。那么就真的完美了！
如何动态布局？下面就根据我前端开发的经验，谈谈自己的心得。
一：长度段位避免一味地用px，多采用em，百分比

相信有经验的前端，都踩过px的很多坑，也许由于有产品经理的效果图，用px能快速精准的绘制出理想的页面，但这有一个致命的问题，缩小浏览器，文字一定会溢出容器，放大浏览器容器一定会溢出浏览器！

用em完全可以代替px。一般情况下1em=16px，用这个公式把你的px都替换成em，你会惊奇的发现刚才所有的问题都消失了。（可能有些细节明显没有px好，这是因为换算不是绝对的，还需要你根据实际情况再修改）
1em就是一个当前字体尺寸，注意是当前！随着你放大缩小屏幕，1em代表的像素也跟着变了，在不同的环境中由于默认字体尺寸不一样，正常的1em也不一样，但是由于你的布局是基于em，总体的相对布局始终不变，这下你就明白为何如此神奇了吧。

动态单位有两类，一类是基于当前字体尺寸，除了em，还有ex等。

另一类是基于长度的，常见的有pt和百分比，pt是固定宽度单位，1英寸=72pt，说他是动态单位是因为它的确有动态的特征，比如相同分辨率但屏幕尺寸不同，那么1pt代表的像素是不同的。百分比通常用于做总体布局，比如一行显示两列可以用50%

应该使用什么长度单位，没有绝对的，需要根据情况灵活选择，不过上面提到的所有单位足够满足任何情况了！最后再说一下：不要总是用px ，多想想em和百分比吧！

二：杜绝 table，多采用div布局

杜绝table也许有点过了，有些时候table还是最好的选择。但是根据我的经验，很多很多时候，你下意识的的选择table时，都不是最好的选择！
table有两个弱点，一是无法直接限制列宽，二是无法换行（指整个tr必须是一行），这两个弱点是雪上加霜的关系。由于无法直接限制列宽，当内容很宽时，所在的td会非常宽，这会导致后续的td没有足够的位置，而同一个tr的td又不能换行，这简直太致命了！
曾经尝试过限制td的宽度，方式是在里面加一层div，限制div的宽度，看起来就像限制td一样，不过最终的效果不是特别的理想。不能直接限制宽度，导致文本溢出用省略号也不行。总之用了table你将无法发挥你css的才华！
建议仅在两种情况下使用table：你要展示的 的确是一个table，而非因为样式比较整齐，且每一列的内容宽度是可知的；明确有规定要用table。

除了div，还有很多类似于div的比如article、session等，这是html5的，语义更强。很多人面对复杂的页面用div布局无从下手，即使做了很长时间的前端开发人员，也无法真正驾驭这种灵活而强大的布局方式。其实没那么难，记住先规划，再布局。先布局好总体结构，再布局小的结构，最后布局细节。还有就是多练习，多感悟吧。
三：明确栅格系统不是万能的
关于栅格系统我就不说了，没用过的可以自己查。

用过的，不要过于吹捧它，的确栅格系统非常‘动态’，甚至还继承了table的整齐风格，而且还不需要你自己去实现，以致于我发现很多人在真正理解并掌握了栅格系统后，开始有种狂热的热情，恨不得将所有的动态布局都交给它。但它的确不是万能的。

随着硬件设备越来越高端，强大，屏幕的分辨率也水涨船高，低分辨率模式（xs，sm，md）都还好，但是到了lg模式就不一样了，lg的container最小宽度是1170px，但是现在的显示器随随便便都是1800px以上。跨度达到了700px，整个一小平板的宽度！
所以lg模式的布局，适应性很差原因就在这里，经常出现某一列过宽，但在某些设备上又刚好，让你完全不知道怎么修改！

先写这里，改天再写！