响应式网站设计教程 第1篇
和视口元标签一起,你可以使用另外几个设定,但大体说来,上面那行就是你想要使用的。
你应该避免使用minimum-scale
、maximum-scale
,尤其是将user-scalable
设为no
。用户应该有权力尽可能大或小地进行缩放,阻止这种做法会引起访问性问题。
响应式设计指的是一个响应浏览环境的网页或者应用设计。它涵盖了很多 CSS 和 HTML 的功能和技术,现在基本上就是我们默认建设网站的方式。想一下你在手机上访问的网站,遇到一个缩放的桌面版网站,或者你需要向侧边滚动来寻找东西的网站可能是相当不寻常的。这是因为 Web 已经迁移到了这种响应式设计的方式上。
在这些课里学到的布局方式的帮助下,实现响应式设计也变得愈加简单。如果你今天新近了解 Web 开发,那么你与响应式设计早期相比,手边有多得多的工具。因而,你有必要检查下你所引用的任何材料的年纪。尽管历史上的文章仍然有用,现代的 CSS 和 HTML 的使用让创建一个优雅且实用的设计变得远远更加容易,且无论你的访客使用什么设备浏览网站。
响应式网站设计教程 第2篇
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 框架,模仿腾讯全端实现下面的响应式布局效果。
响应式网站设计教程 第3篇
这里有一个解决方法,它使用了calc()
,如果你将vw
单位加到了使用固定大小(例如em
或者rem
)的值组,那么文本仍然是可放缩的。基本来说,是vw
加在了放缩后的值上。
这就是说,我们只需要指定标题的字体大小一次,而不是为移动端设定它,然后再在媒介查询中重新定义它。字体会在你增加视口大小的时候逐渐增大。