随着最近做的页面数目的增多，积累的一些被坑的经验，对于页面布局方面，感受良多。
一开始也是知道对于一个页面来说，好的布局是基础，只有把这基础东西做好了，后面的功能实现才有可能。
于是，今天就把所踩过的，影响深刻的坑，都罗列出来。
尺寸单位rem em px %
谈到布局，必定要说的是尺寸
单位，在现在各种屏幕分辨率参差不齐，尤其是要结合手机屏幕的小屏幕分辨率的情况下，对于屏幕自适应问题，必然少不了对长度单位的探究。
常用的长度单位有几种，分别是px em 和% 。
- px：是像素单位，这是一个绝对尺寸单位，也是我们经常使用的一个单位，一般浏览器字体默认大小为16px。
- em：它是描述相对于父元素的字体尺寸，是相对长度单位。运算公式为：1/父元素的font-size * 需要转化的像素值 = em值。
- rem：它是描述相对于根元素的字体尺寸，也是相对长度单位。
- %：百分比，也是一个相对长度单位。他描述的是相对于父元素的百分比值。如果父元素未设定长度，默认的，html，body宽度都为100%，然而其高度却为0。
布局方式
依据以上有的几种单位，会有几种依赖以上单位而存在的布局方式。在面临屏幕自适应的问题时，对于尺寸单位的使用就显得有些技巧了。以下为走过的坑中的有感而发。
①. 尽量使用相对尺寸单位
使用相对尺寸单位计量，则在调整页面布局的时候，不需要重置所有内部子元素的尺寸的大小，能更好的适应屏幕终端，在自适应方面有很大的便捷之处。
如果是随着当前元素的字体尺寸而改变尺寸，则用em比较方便；如果是随着父容器或者页面大小而改变尺寸，则用%更方便。
②. 对于可预知的元素上使用绝对尺寸
对于一些icon，图片，导航栏，之类的不适宜每当页面变小就改变大小的元素，为了最佳体验，设置绝对尺寸会比较好。
③. 以上的技巧，当然是配合css3@media query，bootstrap食用更佳
最近因为工作室主页的项目需要用到bootstrap，于是好好地肝了bootstrap。对比于css的@media query，bootstrap的特点就是，可以利用其栅格布局，自动划分屏幕为12等分，并根据设置自动布局。
④. 擅用一些标签
这里是针对于几种样式集合在一块区域内的布局方法，通过对比，使用最适宜最省事的标签。比如说，对比span和div的不同，从而达到在组合区域中，既能减少样式的设置，又能达到预想效果的目的。
私以为，布局可以分为两种。一种是手动型，一种的自动型的。
手动型就像是css3@media query这样子需要在每个缩小范围内自己定义的类型，自动型就像是如百分比定位，js监测，bootstrap自动调试类型。于此，目前最大的感受是，越复杂的情况越要细心应对。也就是说，类似于组合区域内的布局，或者是涉及到变字体大小之类的，还是手动的调节比较不容易出错。