随着互联网和科技的快速发展，越来越多的手机厂商开始发动手机之间的战争。 手机的快速发展也促使越来越多的人使用手机上网。 联通设备正在超越桌面设备，成为最常见的上网终端。 这样总会有一个问题，PC端的网页如何在手机上正常显示？ 手机和PC的屏幕长度差异很大css3等比例缩放，这会导致相同的内容在手机和PC上有两种不同的显示结果。 那么如何才能让手机和PC都呈现出满意的网页效果呢？ 本文收集了以下5个方法，感兴趣的男伙伴可以看看：
1.在网页代码腹部添加一行viewport meta标签
viewport 是网页的默认长度和高度。 上一行代码的意思是网页长度默认等于屏幕长度（width=device-width），原始缩放比例一栏（initial-scale=1）为1.0，即初始尺寸网页的面积占屏幕面积的100%。
注意：该方法不支持IE8及IE8以下版本
2.不要使用绝对长度
因为网页会根据屏幕间距调整布局，所以不能使用绝对长度布局，也不能使用绝对长度的元素。 对于图像也是如此。
具体来说，CSS代码无法指定像素长度：width:xxxpx;
3.使用相对大小的字体
字体不能使用绝对大小（px），只能使用相对大小（em或rem）
例如：身体
里面的代码指定字体大小为页面默认大小的100%，即16像素（1em=16px）。
h1
h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）
从默认的16个像素中消除所需的像素即可得到em
4. 流式布局（fluidgrid）
“流体布局”意味着每个块的位置是浮动的，而不是固定的。
。主要的
.leftBar
float的好处是，如果长度太小，放不下两个元素css3等比例缩放，前面的元素会被手动滚动到后面元素的底部，并且不会在水平方向溢出，防止出现水平滚动条。
5.媒体查询器@media
“自适应网页设计”的核心是CSS3引入的MediaQuery模块。
意思是手动检测屏幕长度，然后加载对应的CSS文件。
里面的代码意思是，如果屏幕长度大于400像素（max-device-width: 400px），则加载tinyScreen.css文件。
如果屏幕长度在400像素到600像素之间，则加载smallScreen.css文件。
