手机与PC的屏幕宽度有着很大的差异，会造成同样的内容在手机与PC端呈现两种不同的显示结果。那该怎么才能使得手机与PC都能对网页呈现出令人满意的结果呢，本文收集了以下5种方法，有兴趣的小伙伴们能够看下：

    1、在网页代码的头部，参加一行viewport元标签

    viewport是网页默许的宽度和高度，上面这行代码的意思是，网页宽度默许等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始巨细占屏幕面积的100%。

    留意：该方法不支持IE8及IE8以下的版本

    2、不运用肯定宽度

    因为网页会根据屏幕宽度调整布局，所以不能运用肯定宽度的布局，也不能运用具有肯定宽度的元素。对图画来说也是这样。

    具体说，CSS代码不能指定像素宽度：width:xxxpx;

    只能指定百分比宽度：width:xx%;或许width:auto;

    3、运用相对巨细的字体

    字体也不能运用肯定巨细（px），只能运用相对巨细（em或许rem）

    例如：body

    上面的代码指定，字体巨细是页面默许巨细的100%，即16像素（1em=16px）。

    h1

    h1的巨细是默许巨细的1.5倍，即24像素（24/16=1.5）

    将想要的像素去除默许的16像素能够得到em

    4、活动布局（fluidgrid）

    "活动布局"的含义是，各个区块的方位都是起浮的，不是固定不变的。

    .main

    .leftBar

    float的好处是，假如宽度太小，放不下两个元素，后面的元素会主动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的呈现。

    5、媒体查询器@media

    "自习惯网页规划"的中心，就是CSS3引入的MediaQuery模块。

    它的意思就是，主动勘探屏幕宽度，然后加载相应的CSS文件。

    上面的代码意思是，假如屏幕宽度小于400像素（max-device-width:400px），就加载tinyScreen.css文件。

    假如屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。