Responsive Web Design | Bootstrap
布局特点
1. 单列布局 vs 水平布局
手机屏幕宽度较小，因此多采用单列布局。
反观桌面网页设计，为了利用宽度，往往使用各种水平布局的组件，诸如水平导航栏，水平按钮组，水平分页等。然而水平布局的组件，在移动端中，如果设备宽度不够，会导致组件割裂换行，影响视觉效果。
因此RWD的基本思路之一，桌面使用水平布局，移动端使用单列布局。
参考实现
2. 流式布局 vs 固定布局
所谓流式布局呢，举个例子，就像一碗水，宽度变小了，高度就会变长。本质是百分比宽度布局，不使用绝对定位样式，因为使用了绝对定位，会使得元素脱离文档流，当宽度变小，高度加长时，会遮盖其他处于文档流中的元素。
另外流式布局需要注意桌面显示宽度问题，在移动端中100%的宽度很合适，而在桌面上100%的宽度意义不大，甚至影响阅读，当需要限制宽度时，可以使用css的max-width属性。
固定布局，可以对元素的排列、位置做出精确布置，然而当屏幕宽度小的时候，会出现水平滚动条，影响用户体验，这也是一般固定布局的网页footer提示使用大于1024*768的分辨率的原因。
因此RWD的基本思路之二，使用流式布局。
参考实现
两栏布局 表问我导航栏左上角为何白茫茫一片，因为那是被擦除的logo
3. EM vs PX
em和px均为字体大小单位。
em不是绝对单位，它是相对于当前所选择的字体大小的单位，直观上看，1em等于当前字体大小，如当前文档的字体大小为12px，1em = 12px，2em = 24px。对移动设备友好。
px是绝对单位，它是用于屏幕媒介的固定大小单位，1px等于电脑屏幕的1点（屏幕分辨率的最小划分）。当然由于固定大小的性质，不能缩放，对移动设备不友好。
参考实现
CSS
.front-text-title {
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
max-width: 15em;
}
表格样式 其中的标题行使用了front-text-title
4. Word wrap
文字自动换行的问题，如果一个单词非常长，如果不强制换行，可能会超出包含该单词元素的边界，影响布局。
使用下面的CSS代码可以强制换行
CSS
.front-text-break {
word-break: break-all;
word-wrap: break-word;
}
总结
第一次实现是灵感，后续实现是微创新重复。个人觉得总的思路是桌面水平，移动端垂直100%占满；简化元素结构；不能写style，用css类（用于Media Query）；浮动影响布局时，用绝对定位。
最后我只是网络资源的搬运工、整合人、翻译人，RWD的实践者，然后写了此文，有个人见解，各种错误在所难免，非常欢迎纠错、补充及交流。
网友评论