内容简介:今日继续透过Flexbox实现响应式网页布局同样可分为三步:
今日继续 W3Schools响应式网页布局 的实现,采用 Flexbox 方案。使用Flexbox实现响应式网页布局是目前最流行的做法。如果你对Flexbox并不熟悉,可以查看W3Schools的教学:
视频连结
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。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript核心技术
Shelley Powers / 苏敬凯 / 机械工业出版社 / 2007-6 / 45.00
Ajax是当今Web开发领域最流行的词汇。而JavaScript与CSS、XML和DOM几种老技术,加上XMLHttpRequest就构成了Ajax的四大基石。对于JavaScript,一些更资深的同事告诉我的感觉是失望。面对不同的浏览器和浏览器的不同版本,没有优秀的调试开发工具,JavaScript成了软件开发的泥潭。. 而本书的出版则给我们增加了一丝解决这些问题的信心。 它从最简单......一起来看看 《JavaScript核心技术》 这本书的介绍吧!