响应式(R)网页(W)设计(D)实践

Responsive Web Design | Bootstrap

布局特点

手机屏幕宽度较小，因此多采用单列布局。

反观桌面网页设计，为了利用宽度，往往使用各种水平布局的组件，诸如水平导航栏，水平按钮组，水平分页等。然而水平布局的组件，在移动端中，如果设备宽度不够，会导致组件割裂换行，影响视觉效果。

因此RWD的基本思路之一，桌面使用水平布局，移动端使用单列布局。

水平按钮组

分页样式

所谓流式布局呢，举个例子，就像一碗水，宽度变小了，高度就会变长。本质是百分比宽度布局，不使用绝对定位样式，因为使用了绝对定位，会使得元素脱离文档流，当宽度变小，高度加长时，会遮盖其他处于文档流中的元素。

另外流式布局需要注意桌面显示宽度问题，在移动端中100%的宽度很合适，而在桌面上100%的宽度意义不大，甚至影响阅读，当需要限制宽度时，可以使用css的max-width属性。

固定布局，可以对元素的排列、位置做出精确布置，然而当屏幕宽度小的时候，会出现水平滚动条，影响用户体验，这也是一般固定布局的网页footer提示使用大于1024*768的分辨率的原因。

因此RWD的基本思路之二，使用流式布局。

两栏布局表问我导航栏左上角为何白茫茫一片，因为那是被擦除的logo

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

文字自动换行的问题，如果一个单词非常长，如果不强制换行，可能会超出包含该单词元素的边界，影响布局。

使用下面的CSS代码可以强制换行

CSS

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

第一次实现是灵感，后续实现是微创新重复。个人觉得总的思路是桌面水平，移动端垂直100%占满；简化元素结构；不能写style，用css类（用于Media Query）；浮动影响布局时，用绝对定位。

最后我只是网络资源的搬运工、整合人、翻译人，RWD的实践者，然后写了此文，有个人见解，各种错误在所难免，非常欢迎纠错、补充及交流。