布局特点

1. 单列布局 vs 水平布局

手机屏幕宽度较小,因此多采用单列布局。
    反观桌面网页设计,为了利用宽度,往往使用各种水平布局的组件,诸如水平导航栏,水平按钮组,水平分页等。然而水平布局的组件,在移动端中,如果设备宽度不够,会导致组件割裂换行,影响视觉效果。
    因此RWD的基本思路之一,桌面使用水平布局,移动端使用单列布局。

实现参考
    按钮组    http://zrss.github.io/ResponsiveDesign/templates/rw-btn-group.html
    分页样式 http://zrss.github.io/ResponsiveDesign/templates/rw-pagination.html
    发布话题 http://zrss.github.io/ResponsiveDesign/templates/rw-topic.html

2. 流式布局 vs 固定布局

所谓流式布局呢,举个例子,就像一碗水,宽度变小了,高度就会变长。本质是百分比宽度布局,不使用绝对定位样式,因为使用了绝对定位,会使得元素脱离文档流,当宽度变小,高度加长时,会遮盖其他处于文档流中的元素。
    另外流式布局需要注意桌面显示宽度问题,在移动端中100%的宽度很合适,而在桌面上100%的宽度意义不大,甚至影响阅读,当需要限制宽度时,可以使用css的max-width属性。
    固定布局,可以对元素的排列、位置做出精确布置,然而当屏幕宽度小的时候,会出现水平滚动条,影响用户体验,这也是一般固定布局的网页footer提示使用大于1024*768的分辨率的原因。
    因此RWD的基本思路之二,使用流式布局。

实现参考
    首页样式 http://zrss.github.io/ResponsiveDesign/templates/rw-navbar.html 其中的两栏布局

3. EM vs PX

em和px均为字体大小单位。
    em不是绝对单位,它是相对于当前所选择的字体大小的单位,直观上看,1em等于当前字体大小,如当前文档的字体大小为12px,1em = 12px,2em = 24px。对移动设备友好。
    px是绝对单位,它是用于屏幕媒介的固定大小单位,1px等于电脑屏幕的1点(屏幕分辨率的最小划分)。当然由于固定大小的性质,不能缩放,对移动设备不友好。

实现参考
    表格样式 http://zrss.github.io/ResponsiveDesign/templates/rw-table.html 其中的标题

4. Word wrap

文字自动换行的问题,如果一个单词非常长,如果不强制换行,可能会超出包含该单词元素的边界,影响布局。
    使用下面的CSS代码可以强制换行

.front-text-break {
word-break: break-all;
word-wrap: break-word;
}

调试方法

Chrome desktop调试页面时,右键审查元素,或者按下F12,即可使用developer tools,诸如查看element、network及console;在Chrome mobile中也可以完成相同功能,不过需要借助Chrome desktop的帮助。
    首先,在Android手机上打开USB调试,并用usb线连接上电脑;其次,在Chrome desktop的地址栏中输入about:inspect,即可检查到连接手机中的Chrome mobile,此时可以在Chrome mobile中打开想要调试的页面,参考下图

点击inspect,即可打开针对该页面的Developer Tools,然后就可以如同在Chrome desktop中调试页面了

PS:右侧红色箭头指向的图标为屏幕投影,即把手机上的视图显示在浏览器左侧;

另外Chrome desktop还有device mode功能,可以模拟页面在不同手机上的显示情况,优点简单快捷,缺点并不完全符合实际情况。
操作步骤如下
  1. F12 / option + command + i 呼出developer tools
  2. 点击Toggle Device Mode
  3. 调整developer tools位置,使其移动到浏览器右侧
  4. ctrl + r / command + r 刷新页面

Toggle Device Mode及调整Developer tools按钮位置,参考下图

完整操作过程

资料

http://blog.froont.com/9-basic-principles-of-responsive-web-design/ RWD 9 basic principles
http://stackoverflow.com/questions/609517/why-em-instead-of-px EM vs PX
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design RWD CSS Tricks
http://bradfrost.github.io/this-is-responsive/patterns.html RWD Patterns
http://www.lingulo.com/tutorials/css/how-to-build-a-html5-website-from-scratch Web design with sophisticated tech (fucking awesome)
http://www.smashingmagazine.com/2014/09/03/testing-mobile-emulators-simulators-remote-debugging/2/ Android and IOS Debugger

总结

​    第一次实现是灵感,后续实现是微创新重复。个人觉得总的思路是桌面水平,移动端垂直100%占满;简化元素结构;不能写style,用css类(用于Media Query);浮动影响布局时,用绝对定位。
    最后我只是网络资源的搬运工、整合人、翻译人,RWD的实践者,然后写了此文,有个人见解,各种错误在所难免,非常欢迎纠错、补充及交流。

FE: Responsive Web Design Overview的更多相关文章

  1. 自适应网页设计(Responsive Web Design)

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  2. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

  3. Understanding Responsive Web Design: Cross-browser Compatibility

    http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/ In the las ...

  4. 自适应网页设计(Responsive Web Design)(转)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  5. (转)自适应网页设计(或称为响应式web设计)(Responsive Web Design)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  6. 转:15 Best Responsive Web Design Testing Tools

    Responsive Web Design is regarded as being the approach which suggests that web design and developme ...

  7. 自适应网页设计(Responsive Web Design)(转)

    作者: 阮一峰 出处:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移 ...

  8. 阮一峰:自适应网页设计(Responsive Web Design)别名(响应式web设计)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  9. [转]如何设计自适应屏幕大小的网页 Responsive Web Design

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

随机推荐

  1. 高频交易策略之Penny Jump

    今天假设有一个笨笨的大型机构投资人(共同基金,银行,退休基金....),他想要买进一只股票,但又不想挂市价买进,所以就在市场里面挂了一张要买进的大单.这时候所有市场里面的人都会看的到limit ord ...

  2. SqlServer中计算列详解

    计算列区别于需要我们手动或者程序给予赋值的列,它的值来源于该表中其它列的计算值.比如,一个表中包含有数量列Number与单价列Price,我们就可以创建计算列金额Amount来表示数量*单价的结果值, ...

  3. 在SQL中用正则表达式替换html标签

    由于数据库的一个表字段中多包含html标签,现在需要修改数据库的字段把html标签都替换掉.当然我可以通过写一个程序去修改,那毕竟有点麻烦.直接在查询分析器中执行,但是MS SQL Server并没有 ...

  4. MySQL中char、varchar和text的区别

    三者空间占用方面: char:存储定长数据很方便,CHAR字段上的索引效率极高,可以有默认值,比如定义char(10),那么不论你存储的数据是否达到了10个字节,都要占去10个字节的空间(自动用空格填 ...

  5. 解决hyerv的linux虚拟机网卡地址重启发生变化的问题

    关于linux的虚拟机,当进行虚拟机copy的时候,由于虚拟机配置文件里面会记录网卡的mac地址,所以导致linux里面记录的网卡地址和实际的会有冲突,这样linux会自动把网卡地址提高. 比如原来是 ...

  6. Java并发编程:并发容器ConcurrentHashMap

    Java并发编程:并发容器之ConcurrentHashMap(转载) 下面这部分内容转载自: http://www.haogongju.net/art/2350374 JDK5中添加了新的concu ...

  7. Web —— java web 项目 Tomcat 的配置 与 第一个web 项目创建

    目录: 0.前言 1.Tomcat的配置 2.第一个Web 项目 0.前言 刚刚开始接触web开发,了解的也不多,在这里记录一下我的第一个web项目启动的过程.网上教程很多,使用的java IDE 好 ...

  8. 数据库 —— 基于 ORM 模型的 Hibernate 的使用(java)

    目录: 使用Hibernate Tool 从数据库中生成对应的实体类 1.使用Hibernate Tool 从数据库中生成对应的实体类 Title:Using Hibernate Tools gene ...

  9. [Redux] Writing a Todo List Reducer (Adding a Todo)

    Learn how to implement adding a todo in a todo list application reducer. let todo = (state = [], act ...

  10. adb服务无法启动

    今天学习android编程发现调试出错 The connection to adb is down, and a severe error has occured. You must restart ...