响应式

一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容，有不正确的欢迎大家指正。谈到响应式网站，目前比较主流的做法是通过前端通过判断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

line-height,margin-top如果使用em的话，em的大小根据的是 上文的字体的大小 还是 上文的line-height的大小 决定？ 测试： body: line-height:20px; font-size:16px; 1. header[role='banner'] p: line-height: 1em; font-size: .9em; 2. header[role='banner'] p: line-height: 20px; font-size: .9em; 3. header[role='banner'] p: line-height: 100%; font-size: .9em; 4. header[role='banner'] p: line-height: 16px; font-size: .9em; 测试之后，发现 line-height: 1em = line-height: 100% ≠ line-height: 16px ≠ line-height: 20px 行高变化不是很大,但确实不同 这里的 1em , 100% 不是 16px 也不是 20px 是什么情况？ 来源： oschina 链接： https://my.oschina.net/u/1376301/blog/192011

你调整了浏览器，笑容攀上脸颊。你感到非常开心，认为自己实现了友好移动的目标。在正式讨论前，让我来预测下未来：你会失掉用户和经济效益，如果你把响应式网页作为唯一目标和唯一的解决办法。 好消息是，你可以改善它。 在这篇文章中，我们会谈到移动互联网和响应式设计的关系，首先将介绍如何巧妙的运用响应式设计，为什么性能对移动端非常重要，为什么响应式设计不能作为你网站的目标，最后技术的性能问题帮助我们更好的理解这问题。 自2000年开始，设计者和开发者就把移动设备的问题过于简单化，以至于现在仍然有人认为响应式网页设计能解决一切问题。 大家必须明白，凌驾于任何目标，移动网络体验必须和闪电一样快。迅速、实用、兼容的体验对所有移动设备都是挑战。当你使用响应式设计时，这些挑战都存在。从一开始就重视性能会让过程容易些。 响应式设计是很棒，但不是万能钥匙。如果你在移动设备上一味坚持，在转换率后就可能隐藏着性能问题。大约有11%的网站是响应式，这个数字每月都在增长，所以现在是谈论这个问题的时机了。 据Guy Podjarny研究，72%的响应式网站不分屏幕大小都提供相同的字节，尽管这会降低移动网络连接。不是所有用户都有耐心等着网站加载。 对响应式设计存在的问题有了基本认识，我们就能减低它带来的损失。 移动网站来自过去 我不是说你不应该采用响应式设计或者去用m.*的子域名。事实上，现在社会分享无处不在，不分设备

响应式网页设计基础【从零开始】 如今的互联网事业突飞猛进，可谓一日千里。响应式网页设计凭借其能为开发者提高开发效率，降低维护成本，提升用户体验等突出优势更是为Web 2.0时代掀起了又一股狂潮，致使无数开发者倾心致力于响应式网页设计。纷纷为响应式设计贡献自己的绵薄之力，当然各大软件制造上肯定不会放过如此良机，也纷纷推出各类响应式设计软件。理所当然不乏优秀之作： Groundwork ，一款开源的响应式设计工具，在 Github 上可以找到其项目源代码。 Groundwork 提供多套通用响应式页面模版，用于快速构建Web响应式应用程序。此外，它还提供丰富的UI组件，详情可以访问 Groundwork官网 。 FROONT ,一个网页版的响应式开发工具。提供在线编辑，布局调整，以及在不同临界值之间切换预览等响应式开发必备功能，还能导出html/css文件，实属强大的响应式开发工具，更具体的介绍请参看 FROONT官网 ，注册并登录即可体验在线响应式开发。 Adobe Edge Reflow CC ，由世界著名软件大户Adobe公司开发的响应式网页设计软件。和Adobe Dreamweaver、Adobe Photoshop等知名软件一样，Adobe Edge Reflow CC是一款桌面应用程序，配合 Adobe Edge Inspect CC