响应式网站设计布局 第1篇
屏幕窗口宽度小于600px时,改变样式 屏幕窗口宽度大于600px时,改变样式 也可以结合rem更加便捷的改变样式
响应式网站设计布局 第2篇
类似百分比, vw和vh参考浏览器窗口大小,vw代表窗口横向宽度;vh代表窗口纵向高度; vw只是一个单位,都可以用于表示宽度或高度的单位,如width:50vh 相当于宽度为屏幕高度的50% 如:
蓝色方块始终占屏幕窗口的50%
响应式网站设计布局 第3篇
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定 HTML 结构及 JavaScript,快速编写功能完善的网页及常见交互效果。
这里只简单的讲解一下 Bootstrap 的使用,这个框架功能很多,如果要全部讲解,能够专门开一个专栏讲解了。网上也有很多讲解这个框架怎么使用的博客是视频,感兴趣的同学可以自行去找。
将下载解压好的文件拖入到工程。
引入 Bootstraps CSS 文件
栅格化是指将整个网页视口的宽度分成12等份,每个盒子占用的对应的分数。
例如:一行排 4 个盒子,则每个盒子占 3 份,即(12 / 4 = 3)。
使用栅格布局,要使用类名为 row
的元素作为父级,子级才能使用栅格系统布局。
栅格系统布局以 col-*-*
的格式作为类名,如:col-xl-3
表示当视口宽度大于等于 1200px 时,该元素占了 3 份,即该元素宽度占视口宽度的 1/4 。
估计这对于新接触这个框架的同学有很多疑问,为什么这么写类名、为什么这么写就能实现这些功能等等,但是这些类名的命名和写法是框架开发者规定的,必须这么写,我们只能通过多写多练,将这些常用的类名记住,没有其他捷径。
下面通过一个例子,帮助大家理解:
Bootstrap 提供了很多 Button 类 的样式,也不用刻意去背,使用的时候知道在哪里找就可以了。
Bootstrap 提供了很多 表格类 的样式,感兴趣的同学可以去看一看。
此外,Bootstrap 还提供了现成的组件、字体图标等等,感兴趣的同学可以了解下。
接下来通过今日所学的媒体查询和 Bootstrap 框架,模仿腾讯全端实现下面的响应式布局效果。