一、以前都是在电脑上的网页，现在要在手机上看了，可怎么搞？
是的，电脑上面我们需要做的大致是背景宽度100%，主体内容居中，分栏布局浮动，再结合内外边距等便可解决，但到了移动端呢？屏幕本来就很小，你别告诉我要把图片和文字都调整到很小然后把网页上的经验再全部搬过来，显然不靠谱，本身手机网页有着屏幕小的特性，俺就意味着空间非常宝贵，没有那么多地方给你留白，绝大部分区域要么可操作，要么用来展示内容，而且在此同时，给用户比较好的感官和操作便利。
二、知道了第一点，那接下来该怎么做呢，设备多种多样，不同品牌，不同尺寸，不同默认显示方式等等…
首先就是很重要的百分比，百分比宽度和高度，这样是为了设置自适应的容器大小，但有了容器大小，内容区域怎么处理？这就涉及到字体和图片，你猜对了，字体也需要使用相对大小，如果用惯了像素（px），那么让你用em，或者rem之类，可能会一下很不习惯，但有一个参考标准还是给你带来了福音，一般默认大小16px是1em，这样，你准备个计算器，然后把像素计算一下一转换，好吧，看样子这样是凑合解决了问题，之所以说是凑合是因为你总会遇到一些“莫名”的问题，比如字体大小的继承性，使用px的时候，你想设置多少就是多少对吧？任你摆布，它就是个统一标准（px）绝对大小，而你使用了相对大小，比如父元素设置的2em，相当于32px大小，子元素你再设置个2em，不好意思，这里好像2em≠2em了，具体自己去实验吧~如果我这么说你觉得本身就是合情合理，那说明你比较聪明，但当你摆脱不掉px带来的习惯而遇到问题的时候回来看或许会发现点儿价值。
三、文字已经做了相对大小处理了，那么图片呢？
你会堂而皇之的去跟设计说，我需要适应各种尺寸，你给我设计不同大小的图片吧，你确定要这么做？可事实是，如果你这么做能解决问题也行啊~只可惜，用户的图片可大都是从后台自行上传的，你怎么处理？只能用代码了，我只告诉你，代码的核心只用到一点：max-width：100%，至于需不需要加上max-height:100%,或者height：auto。朋友，自己去试验吧，或许我说的就是错的呢？多尝试才能接近真理。
四、使用了百分比就万事大吉了吗？
事实好像不尽然，因为，你知道怎么正确计算百分比吗？有这么一个公式：目标元素宽度/上下文元素宽度=百分比宽度。简而言之，它也是相对的，比如父元素只占到了60%，那么你想它其中一个子元素占到它的一半，那就除以2吗？呵呵，或许聪明的你想到了，是50%，而不是想当然的30%，这一点上和em同理。
五、屏幕的尺寸跟你用肉眼看的一样吗？
确实存在着这样一个坏习惯，那就是你已经习惯了某种屏幕的分辨率，那么在你脑海中就有了那个分辨率下相应数值所对应的宽度，你再去看手机或者平板电脑，你就会觉得，这个宽度大概也就300px左右，那个宽度也就500px左右吧。童鞋，我们真的要很谨慎这个错误，眼见不为实，经验不可信了，为什么要提到这一点呢，跟下面要说的有关~
六、不想设置百分比怎么办？
如果你实在不想那么费劲的去设置和计算百分比和相对大小，该怎么办？当然可以，不过你要搞清楚网页要在哪些设备上使用，以及分辨率范围，记住是分辨率，而不是让你去犯“第五点”里提到的错误。然后你可以用一个看起来很方便的东西，那就是媒体查询：@media screen and （max-width:xx px）{}.是的，如果你这么做了，那么在你定义的xx宽度以内，就可以使用绝对宽度和大小了，我没骗你，就是这么直接，你可以在html文件的头部加入它，然后引用不同的样式表，也可以在样式表里直接这样写，然后覆盖掉之前定义的样式。但它带给我们的不只是好处，还有不便利，因为，如果你要考虑的设备不多还好，如果很多或者你追求达到某种特殊效果，比如每小10px，字体大小就变，那你要写多少查询语句才能满足呢？~
或许有人没看完就想忍不住在心里发出声音，完全可以用jquery mobile之类的解决问题啊，什么都不用管了多好。好吧我承认目前为止我对它了解的还不是很多，只是做了一些简单的实验，它的确不需要让你考虑布局方面的问题了，可是如果你的设计师做的东西让你很难下手去套用它你又该怎么办呢~
最后我想说，这里提到的只是很少一部分，还有流式布局、根据内容重要程度改变顺序等等，看起来问题还很多，等你去不断探索吧！~
