FE: Responsive Web Design Overview
布局特点
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的更多相关文章
- 自适应网页设计(Responsive Web Design)
引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...
- 响应式Web设计(Responsive Web design)
中文名 响应式Web设计 提出时间 2010年5月 英 文 Responsive Web design 解 释 一个网站能够兼容多个终端 目 的 解决移动互联网的浏览 优 点 ...
- Understanding Responsive Web Design: Cross-browser Compatibility
http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/ In the las ...
- 自适应网页设计(Responsive Web Design)(转)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- (转)自适应网页设计(或称为响应式web设计)(Responsive Web Design)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- 转:15 Best Responsive Web Design Testing Tools
Responsive Web Design is regarded as being the approach which suggests that web design and developme ...
- 自适应网页设计(Responsive Web Design)(转)
作者: 阮一峰 出处:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移 ...
- 阮一峰:自适应网页设计(Responsive Web Design)别名(响应式web设计)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- [转]如何设计自适应屏幕大小的网页 Responsive Web Design
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
随机推荐
- 高频交易策略之Penny Jump
今天假设有一个笨笨的大型机构投资人(共同基金,银行,退休基金....),他想要买进一只股票,但又不想挂市价买进,所以就在市场里面挂了一张要买进的大单.这时候所有市场里面的人都会看的到limit ord ...
- SqlServer中计算列详解
计算列区别于需要我们手动或者程序给予赋值的列,它的值来源于该表中其它列的计算值.比如,一个表中包含有数量列Number与单价列Price,我们就可以创建计算列金额Amount来表示数量*单价的结果值, ...
- 在SQL中用正则表达式替换html标签
由于数据库的一个表字段中多包含html标签,现在需要修改数据库的字段把html标签都替换掉.当然我可以通过写一个程序去修改,那毕竟有点麻烦.直接在查询分析器中执行,但是MS SQL Server并没有 ...
- MySQL中char、varchar和text的区别
三者空间占用方面: char:存储定长数据很方便,CHAR字段上的索引效率极高,可以有默认值,比如定义char(10),那么不论你存储的数据是否达到了10个字节,都要占去10个字节的空间(自动用空格填 ...
- 解决hyerv的linux虚拟机网卡地址重启发生变化的问题
关于linux的虚拟机,当进行虚拟机copy的时候,由于虚拟机配置文件里面会记录网卡的mac地址,所以导致linux里面记录的网卡地址和实际的会有冲突,这样linux会自动把网卡地址提高. 比如原来是 ...
- Java并发编程:并发容器ConcurrentHashMap
Java并发编程:并发容器之ConcurrentHashMap(转载) 下面这部分内容转载自: http://www.haogongju.net/art/2350374 JDK5中添加了新的concu ...
- Web —— java web 项目 Tomcat 的配置 与 第一个web 项目创建
目录: 0.前言 1.Tomcat的配置 2.第一个Web 项目 0.前言 刚刚开始接触web开发,了解的也不多,在这里记录一下我的第一个web项目启动的过程.网上教程很多,使用的java IDE 好 ...
- 数据库 —— 基于 ORM 模型的 Hibernate 的使用(java)
目录: 使用Hibernate Tool 从数据库中生成对应的实体类 1.使用Hibernate Tool 从数据库中生成对应的实体类 Title:Using Hibernate Tools gene ...
- [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 ...
- adb服务无法启动
今天学习android编程发现调试出错 The connection to adb is down, and a severe error has occured. You must restart ...