Flexbox响应式网页布局 - W3Schools视频02

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

内容简介:今日继续透过Flexbox实现响应式网页布局同样可分为三步:

Flexbox响应式网页布局 - W3Schools视频02

今日继续 W3Schools响应式网页布局 的实现,采用 Flexbox 方案。使用Flexbox实现响应式网页布局是目前最流行的做法。如果你对Flexbox并不熟悉,可以查看W3Schools的教学:

视频连结

Flexbox响应式网页布局

透过Flexbox实现响应式网页布局同样可分为三步:

  1. 将容器显示为flex,并让它wrap;
  2. 将需要响应的元素放在容器当中,并用百分比设定每一个元素的basis;
  3. 通过 Media Query 将容器的flex方向改为column(预设为row)。

在W3Schools的例子中,Flex容器是这样设定的:

.row {  
  display: flex;
  flex-wrap: wrap;
}

容器当中的两栏,即Flex项目:

/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

最后是媒体查询,断点设在700px:

@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

改进:移动优先

同样地,我们也对这个例子进行移动优先的改进,当作是练习。

Flex容器:

.row {  
  display: flex;
  flex-direction: column
}

Flex项目:

.side {
  padding: 20px;
  background-color: #f1f1f1;
}

/* Main column */
.main {
  padding: 20px;
  background-color: white;
}

媒体查询:

@media screen and (min-width: 700px) {
  .row {
    flex-direction: row;
  }
  .side {
    flex: 30%;
  }
  .main {
    flex: 70%;
  }
}

一样是,将媒体查询内外的内容交换。

W3Schools系列的代码都在GitHub上: W3Schools GitHub

W3Schools教学系列

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

  1. Float响应式网页布局

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

程序设计实践

程序设计实践

[美] BRIAN W.KERNIG / 裘宗燕 / 机械工业出版社 / 2007-1 / 59.00元

从排错、测试、性能、可移植性、设计、界面、风格和记法等方面,讨论了程序设计中实际的、又是非常深刻和具有广泛意义的思想、技术和方法,它的翻译出版将填补国内目前这方面书籍的空白。《程序设计实践》(双语版)值得每个梦想并努力使自己成为优秀程序员的人参考,值得每个计算机专业的学生和计算机工作者阅读,也可作为程序设计高级课程的教材或参考书。一起来看看 《程序设计实践》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具