响应式网页布局 W3Schools

响应式网页布局 – W3Schools教学01

W3Schools教学系列

W3Schools是知名的网页设计/前端开发教学网站,不仅提供HTML、CSS、JavaScript等的详尽教学,还可以把它当作说明文件(Documents)。有经验的前端或多或少已经接触过这个网站,因为它经常出现在搜索结果的前几项。其中,它的How To部分更是包含了大量非常实用的例子,例如,如何制作SlideShow(图片轮播)、Lightbox、Parallax(视差效果)等等。因此我想做一系列的影片专门介绍这些How To。

响应式网页布局 – W3Schools教学01

响应式网页布局

今天已经是2019年,基本上所有新建的网页都会是响应式(Responsive),以适应在手机显示。而实现响应式网页布局主要有3种方法:

  1. Float
  2. Flexbox
  3. CSS Grid

当然,以上三者都需要搭配Media Query使用。

其中CSS Grid是最新,也是我最推崇的,但由于太新,较旧的浏览器并不支持。不过,大部分的浏览器其实都已经支持了,我个人不会太担心。要想知道哪些浏览器支持CSS Grid(或其他新功能),可以前往Can I Use查询。CSS Grid完全就是为了网页布局及其他二维(横向加纵向)布局而设计的,相信未来的网页都会采用这一设计。

Flexbox也算新,但浏览器支持的情况比CSS Grid要好点。基本上,目前主流已经转向Flexbox,Bootstrap就是很好的例子。但其实,Flexbox是为一维布局设计的(横向或纵向),而网页布局往往是二维的,Flexbox并非最佳选择,但由于CSS Grid来得太迟,Flexbox又能完成任务,现在不少新的网页以及前端框架采用Flexbox。

Float原来是设计来处虑理文绕图之类的问题,后来被用于布局设计。Float布局有着各种各样的问题,已经在逐渐淘汰中,但由于过去应用太普遍,相信短时间内并不会消失,因此也有必要了解。

这三种设计,W3Schools都有介绍。我会分成三篇来讲,今天先从最古老的Float开始。

Float网页布局

Float布局的重点是

  1. 让元素靠向同一个方向(左或右)
  2. 用百分比控制每一个元素的宽度
  3. 透过Media Query改变元素宽度以适应不同屏幕尺寸

W3Schools的例子

这个例子的重点有两处,一是设定左右两栅都向左float,宽度分别为75%和25%:

二是Media Query设定当屏幕尺寸小于800px时,让左右两栅的宽度都变成100%,以实现响应式设计(Responsive Design):

或许你会注意到导航栏(.topnav)也进行了类似的处理,由于原理一样,就不多说了。

改进:移动优先原则(Mobile First)

之前介绍过移动优先原则,即先设计小屏幕版,再透过Media Query设定桌面版。W3Schools的这个例子并没有采取这一原则,我们可以自行修改,使之符合。方法很简单,只要将Median Query里的内容和外面相应的内容反过来即可,不要忘了把Media Query从max-width改为min-width。

你可以试着自行将.topnav也修改一下,要注意,width如果没有特别指定便是auto,另外,我发现原本例子采用的400px作为断点,换成min-width之后没有反应,需要改为500px。具体原因,我也不太确定,如果你知道的话,欢迎告知。

我开了一个GitHub的仓库专门放W3Schools系列的代码,要查看Mobile First版的代码请移步:W3Schools GitHub

No comment yet, add your voice below!


Add a Comment

你的电子邮件位址并不会被公开。 必要字段标记为 *

Comment *
Name *
Email *
Website

这个网站采用 Akismet 服务减少垃圾留言。进一步了解 Akismet 如何处理网站访客的留言资料