响应式网页技术：
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
技术：
1.HTML5中viewport标签。
metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
2.CSS3中MediaQuery技术
自动探测屏幕宽度，加载对应的CSS文件
linkrel="stylesheet"type="text/css"media="screenand(max-width:px)"href="phone.css"/
//如果屏幕宽度小于px，则加载phone.css文件。
linkrel="stylesheet"type="text/css"media="screenand(min-width:px)"href="pc.css"/
//如果屏幕宽度大于px，则加载pc.css文件。
3.手机端css文件注意：
由于网页会根据屏幕宽度调整布局，所以不要使用绝对宽度布局，也不能使用具有绝对宽度的元素。
3.1不要使用绝对宽度，如：
width：px；==width：70%；
3.2使用相对字体大小(rem)。
rem字体大小是相对于根元素html字体大小，默认网页根元素大小为%，即16像素，所以1rem=16px;
在实际项目中，我们为了方便，可以使用如下方式设置。
html{font-size:62.5%}，即1rem=10px，1.8rem=18px.
4.图片、flash和动画都要设置自适应。
img,object,embed{max-width:%}
5.原理图
说明：编写的时候可以采用div标签包裹的形式对其布局
赞赏