要设计一个要在pc和手机端都通用且正常显示的页面也是很简单的，原理就是在不同设备和不同宽带下加载不同的样式文件，来控制元素的显示和大小等。
首先要设置移动设备友好优先
在网页代码的头部，加入一行viewport元标签,让网页宽度自动缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度，下面是这些属性的解释：
1）width=device-width ：表示宽度是设备屏幕的宽度
2）initial-scale=1.0：表示初始的缩放比例，1.0就是占网页的100%
3）minimum-scale=1.0：表示最小的缩放比例
4）maximum-scale=1.0：表示最大的缩放比例
5）user-scalable=no：表示用户是否可以调整缩放比例
2.根据屏幕宽度加载css文件
"自适应网页设计"的核心，就是CSS3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件
方式一 在html文件引入不同的css文件
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/mobile.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1000px)" href="style/css/pc.css" />
方式二 在css文件中引入不同的css文件
@import url("css/pcStyle.css") screen and (min-width:1000px);
@import url("css/mpStyle.css") screen and (max-width:1000px);
注意:可以使用max(min)-device-width或者max(min)-width。前者是设备的宽度，后者是浏览器的宽度，在pc上你缩放浏览器宽度，用device-width是不会执行代码的，而用后者就可以。
3.另外字体和图片也要自适应
字体也不能使用绝对大小（px），而只能使用相对大小（em）。页面基本参照像素是16px。
图片自适应：html img标签图片自适应响应式的css写法
