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

Responsive Web Design | Bootstrap

布局特点

1. 单列布局 vs 水平布局

手机屏幕宽度较小,因此多采取单列布局

回望桌面网页设计,为了采取宽度,往往采取各种档次布局之零件,诸如水平导航栏,水平按钮组,水平分页等。然而水平布局的机件,在活动端着,如果设备宽度不够,会招致组件断换行,影响视觉效果。

从而RWD的基本思路之一,桌面使用程度布局,移动端采用单列布局。

参照实现

水平按钮组

Bootstrap 1

分页样式

Bootstrap 2

2. 流式布局 vs 固定布局

所谓流式布局也,举个例证,就比如相同碗和,宽度变多少了,高度就会变长。本质是百分于涨幅布局,不行使绝对化定位样式,因为运用了绝对定位,会使得元素脱离文档流,当宽度变多少,高度加长时,会遮盖别处于文档流中的元素。

另外流式布局要小心桌面显示涨幅问题,在动端着100%之宽度很恰当,而于桌面上100%的幅度意义不坏,甚至影响看,当得限制宽度时,可以使css的max-width属性。

固定布局,可以对素的排、位置做出确切布置,然而当屏幕宽度小的下,会并发水平滚动条,影响用户体验,这吗是形似固定布局之网页footer提示使用过量1024*768的分辨率的原故。

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

参照实现

少数牢布局
表问我导航栏左上角为何白茫茫一片,因为那是深受擦除的logo

Bootstrap 3

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

Bootstrap 4

4. Word wrap

字自动换行的题目,如果一个单词非常丰富,如果不强制换行,可能会见超出包含该单词元素的界限,影响布局。

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

CSS

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

总结

先是蹩脚实现是灵感,后续实现是微创新重复。个人认为总的思绪是桌面水平,移动端垂直100%据为己有满;简化元素结构;不可知写style,用css类(用于Media
Query);浮动影响布局时,用绝对定位。

终极自己只是网络资源的苦力、整合人、翻译人,RWD的实践者,然后形容了此文,有个人见解,各种不当在所难免,非常欢迎纠错、补充和交流。

参考资料

RWD 9 basic
principles

EM vs
PX

RWD CSS
Tricks

RWD Patterns
Collection

Web design with sophisticated
tech

相关文章