资讯专栏INFORMATION COLUMN

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

codecraft / 3222人阅读

摘要:今日继续响应式网页布局的实现,采用方案。有经验的前端或多或少已经接触过这个网站,因为它经常出现在搜索结果的前几项。因此我想做一系列的影片专门介绍这些。

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

W3Schools Flexbox教学

Flexbox实现响应式网页布局例子

视频连结

B站

YouTube

Flexbox响应式网页布局

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

将容器显示为flex,并让它wrap;

将需要响应的元素放在容器当中,并用百分比设定每一个元素的basis;

通过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。

Float响应式网页布局

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117464.html

相关文章

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

    摘要:今日继续响应式网页布局的实现,采用方案。有经验的前端或多或少已经接触过这个网站,因为它经常出现在搜索结果的前几项。因此我想做一系列的影片专门介绍这些。 今日继续W3Schools响应式网页布局的实现,采用Flexbox方案。使用Flexbox实现响应式网页布局是目前最流行的做法。如果你对Flexbox并不熟悉,可以查看W3Schools的教学: W3Schools Flexbox教学...

    tinylcy 评论0 收藏0
  • 响应网页布局 - W3Schools How-Tos 01

    摘要:视频连结站响应式网页布局今天已经是年,基本上所有新建的网页都会是响应式,以适应在手机显示。而实现响应式网页布局主要有种方法当然,以上三者都需要搭配使用。完全就是为了网页布局及其他二维横向加纵向布局而设计的,相信未来的网页都会采用这一设计。 W3Schools教学系列 W3Schools是知名的网页设计/前端开发教学网站,不仅提供HTML、CSS、JavaScript等的详尽教学,还可以...

    Heier 评论0 收藏0
  • 响应网页布局 - W3Schools How-Tos 01

    摘要:视频连结站响应式网页布局今天已经是年,基本上所有新建的网页都会是响应式,以适应在手机显示。而实现响应式网页布局主要有种方法当然,以上三者都需要搭配使用。完全就是为了网页布局及其他二维横向加纵向布局而设计的,相信未来的网页都会采用这一设计。 W3Schools教学系列 W3Schools是知名的网页设计/前端开发教学网站,不仅提供HTML、CSS、JavaScript等的详尽教学,还可以...

    iOS122 评论0 收藏0
  • CSS Grid响应网页布局 - W3Schools视频03

    摘要:继续响应式网页布局的实现,今日讲的是方案。就是为二维布局设计的,最适合用来做网页布局。其中是最小宽度单位,等于六个等于三个等于两个而则等于五个。 继续W3Schools响应式网页布局的实现,今日讲的是CSS Grid方案。CSS Grid就是为二维布局设计的,最适合用来做网页布局。目前主流的浏览器都已经支持CSS Grid,除非你很确定你的用户常使用较旧的浏览器,不然的话,建议使用CS...

    piapia 评论0 收藏0
  • CSS Grid响应网页布局 - W3Schools视频03

    摘要:继续响应式网页布局的实现,今日讲的是方案。就是为二维布局设计的,最适合用来做网页布局。其中是最小宽度单位,等于六个等于三个等于两个而则等于五个。 继续W3Schools响应式网页布局的实现,今日讲的是CSS Grid方案。CSS Grid就是为二维布局设计的,最适合用来做网页布局。目前主流的浏览器都已经支持CSS Grid,除非你很确定你的用户常使用较旧的浏览器,不然的话,建议使用CS...

    leejan97 评论0 收藏0

发表评论

0条评论

codecraft

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<