将传统网站构建成自适应网站所使用的关键技术

1.媒体查询

在将传统网站升级为响应式网站中使用的媒体查询就是指根据访问端的屏幕分辨率，调用不同的CSS样式来渲染页面的结果。然后通过响应式的开发来实现跨设备的兼容。通过CSS中的媒体查询可以使不同的设备使用不同的CSS样式，最终完成响应式开发和对不同分辨率屏幕适配。

2.弹性盒子

css3中新出了一种“flex”的弹性盒子布局。他的作用就是可以根据屏幕的宽度自动等比例的分配各个元素的大小，即使你不知道设备屏幕的大小也没有关系，类似于给宽度使用了百分比。

3.具体实现

传统网页重构成响应式网站的具体实现是在不改变PC端样式的前提下对HTML中的DOM进行研究，重新定义一个样式表文件来写入不同的移动端样式。然后根据媒体查询来最终实现网站的自适应。

由于移动端的屏幕分辨率以及网络环境的限制，所以在将PC端网页重构成移动端网页的时候需要将一些难以展示给客户的组件进行隐藏，耗费流量多的组件也需要隐藏，将需要展示给客户却无法从PC端网页做成移动端的部件进行重新写入HTML，但是一定要在PC端进行隐藏。