ouvenzhang

web前端响应式设计总结

倾然丶 夕夏残阳落幕 提交于 2020-04-11 10:34:33
一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈到响应式网站,目前比较主流的做法是通过前端通过判断userAgent来做页面的302跳转。 那么问题来了,使用userAgent的问题: 依赖设备本身浏览器或设备特点,例如尺寸,屏幕分辨率等。 需要分配多个站点页面跳转适配浏览器。例如:ke.qq.com,m.ke.qq.com,来分别存放PC端和移动端的页面。 多了一次跳转,跳转之前的逻辑不能少,这样用户体验就慢了   当然我们也都知道像bootstrap这种ui框架也是响应式的,即写一份代码,在浏览器和移动端都能跑,然而事实上这些事远远不够的,而且在移动端为什么要加载那么多PC端的内容?   我们理解的是完整的响应式页面的设计不仅仅是通过屏幕尺寸来动态改变页面容器的宽度等,其实大部分人通常理解的都停留在这个方面。完整的响应式网站的实现其实需要考虑到以下这些问题: 响应式布局 、 响应式html和css 、 响应式媒体 、 响应式javascript 。 先看几个线上的样例: http://ke.qq.com/huodong/shengkao/index.html http://ke.qq.com/huodong/yikao2016/index.html