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

栏目: CSS · 发布时间: 5年前

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

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

掘金大数据

掘金大数据

程新洲、朱常波、晁昆 / 机械工业出版社 / 2019-1 / 59.00元

在数据横向融合的时代,充分挖掘数据金矿及盘活数据资产,是企业发展和转型的关键所在。电信运营商以其数据特殊性,必将成为大数据领域的领航者、生力军。各行业的大数据从业者要如何从电信业的大数据中挖掘价值呢? 本书彻底揭开电信运营商数据的神秘面纱,系统介绍了大数据的发展历程,主要的数据挖掘方法,电信运营商在网络运行及业务运营方面的数据资源特征,基于用户、业务、网络、终端及内在联系的电信运营商大数据分......一起来看看 《掘金大数据》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具