关于html页面布局

        之前做的一个网站，结果今天这几天测试发现在19寸屏幕和手机屏幕上页面布局全乱了，今天刚刚改好，发现还是自己经验不足，做个小总结。

一、div布局要固定宽高

         当div不设计长宽高而是自动由内部控件”撑“尺寸的话，我们发现当屏幕缩小时其布局会变乱，（推测原因可能和使用的bootstrap框架的自适应有关），于是我们将所有的宽度设死，这样当屏幕缩小或改变屏幕尺寸时虽然不会自动适应当前窗口大小，而是出现滚动条，但起码能保证不会出现之前的布局错乱的现象。（不过我相信应该能有更优的解决方案）

二、整体页面宽度设定的小细节

        之前看各种网站都发现一个小细节，很多网页的主体不会占满整个窗口，在左右两边会留下空位，内容写在中部。

        根据这次网站开发的经验，我感觉到了这么做的好处（肯定不是所有网站都是这个原因）。

        举个例子，假设你将网页的总体宽度设死，设置成1520px（写死的原因是上一条），那么你在15寸笔记本上看可能会刚刚好占满屏幕。但如果你在14寸电脑上看，就会发现超出了屏幕（因为14寸屏幕的宽度小于1520px），此时底部就会出现滚动条，而在19寸屏幕上可能又会占不满屏幕的现象。

        此时我们的解决办法就是将整体的主体宽度设死为一个比较小的值（比如1170px）并水平居中，而两边”自动补白“。这样就可以保证在各种尺寸的显示器上不会出现网站内容超过窗口或小于窗口的现象。原因是此时的主体宽度小于任何一个尺寸的屏幕自然就不会超出，而且居中显示，那么即使没有占满屏幕也不会显得很奇怪。

三、网页头部布局的小细节

        虽然像第二条说的，在很多网页上主体都是居中且两边补白，但很多网页的头部都是宽度占满屏幕的。这次修改网页我们也发现了，最终的解决方案其实是头部主体依然用第二条的解决方案（小尺寸宽度且居中），但两边不是补白而是补”背景色“。如现在我所处的这个csdn的写博客页面，它的头部背景颜色就和主体不一样，是黑灰色。要是让我设计我会将头部内容尺寸固定居中，两边补灰黑色，制造出一种占满屏幕宽度的”假象“。

 

转载于:https://www.cnblogs.com/red-code/p/5288644.html