本节书摘来自华章出版社《Bootstrap开发精解:原理、技术、工具及最佳实践》一书中的第1章,第1.1节,作者[美] 亚拉文·谢诺伊(Aravind Shenoy)乌尔里希·索松(Ulrich Sossou),更多章节内容可以访问云栖社区“华章计算机”公众号查看
1.1 移动优先的设计
随着手机和平板电脑的出现,响应式网页设计成为了当前人们的需要。在早期,我们使用的是平稳降级的方法,用这种方法我们可以先为桌面电脑构建一个网站,然后去掉一些特性,让它适应小屏幕的尺寸。这样生成的网站只具备少量的功能,浏览体验是打了折扣的,水准也比较低。
随着Bootstrap 3的发布,移动优先(mobile-first)的方法也被引入,这种方法可以帮助我们创建能够在移动平台上有效发挥作用的网站,而不会受到平台的种种限制。这种方法也考虑到移动设备的局限,构建的网站具有很好的跨浏览器的兼容性,为网站用户提供了极其出色的移动体验。通过使用渐进增强(progressive enhancement)技术,我们还可以为桌面用户添加其他特性,显著地提升网站的可访问性。因此,这样做出来的网站足以应对各种各样的变化,无论用户使用的是iPad、Windows PC还是其他平台。
例如,我们考虑为网页设计一个导航条,在桌面屏幕上,网页显示如图1-1所示。
很明显,网站把导航条的Packt Publishing标识显示在Books and Videos、Articles、Categories和Support这些菜单项的旁边,而搜索框则出现在右边。
但是,当网页在小屏幕的手机上显示时,效果如图1-2所示。
单击移动屏幕右上角可展开的移动导航图标,就会出现如图1-3所示界面。
通过上面几幅图的演示,我们可以从中了解到Bootstrap所使用的移动优先的方法。