程式学徒

不断学习

响应式网页布局 - W3Schools视频01

2019-02-14 Zackcoding

响应式网页布局

W3Schools教学系列

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

视频连结

响应式网页布局

今天已经是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%:

/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

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

@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

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

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

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

/* Left column */
.leftcolumn {   
  float: left;
  width: 100%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 100%;
  background-color: #f1f1f1;
  padding: 0;
}
@media screen and (min-width: 800px) {
  .leftcolumn {   
    width: 75%;
  }
  .rightcolumn {
    width: 25%;
    padding-left: 20px;
  }
}

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

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

W3Schools系列全部视频:

  1. Float响应式网页布局
  2. Flexbox响应式网页布局
  3. CSS Grid响应式网页布局
  4. 幻灯片如何实现
  5. 响应式导航如何实现
  6. 灯箱效果如何实现
  7. Parallax-视差效果如何实现
  8. 可拖拉效果如何实现