摘要：视频连结站响应式网页布局今天已经是年，基本上所有新建的网页都会是响应式，以适应在手机显示。而实现响应式网页布局主要有种方法当然，以上三者都需要搭配使用。完全就是为了网页布局及其他二维横向加纵向布局而设计的，相信未来的网页都会采用这一设计。
W3Schools教学系列
W3Schools是知名的网页设计／前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详尽教学，还可以把它当作说明文件（Documents）。有经验的前端或多或少已经接触过这个网站，因为它经常出现在搜索结果的前几项。其中，它的How To部分更是包含了大量非常实用的例子，例如，如何制作SlideShow（图片轮播）、Lightbox、Parallax（视差效果）等等。因此我想做一系列的影片专门介绍这些How To。
视频连结B站
YouTube
响应式网页布局今天已经是2019年，基本上所有新建的网页都会是响应式(Responsive)，以适应在手机显示。而实现响应式网页布局主要有3种方法：
Float
Flexbox
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布局的重点是
让元素靠向同一个方向（左或右）
用百分比控制每一个元素的宽度
透过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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117415.html
摘要：今日继续响应式网页布局的实现，采用方案。有经验的前端或多或少已经接触过这个网站，因为它经常出现在搜索结果的前几项。因此我想做一系列的影片专门介绍这些。 今日继续W3Schools响应式网页布局的实现，采用Flexbox方案。使用Flexbox实现响应式网页布局是目前最流行的做法。如果你对Flexbox并不熟悉，可以查看W3Schools的教学： W3Schools Flexbox教学...
摘要：继续响应式网页布局的实现，今日讲的是方案。就是为二维布局设计的，最适合用来做网页布局。其中是最小宽度单位，等于六个等于三个等于两个而则等于五个。 继续W3Schools响应式网页布局的实现，今日讲的是CSS Grid方案。CSS Grid就是为二维布局设计的，最适合用来做网页布局。目前主流的浏览器都已经支持CSS Grid，除非你很确定你的用户常使用较旧的浏览器，不然的话，建议使用CS...
摘要：继续响应式网页布局的实现，今日讲的是方案。就是为二维布局设计的，最适合用来做网页布局。其中是最小宽度单位，等于六个等于三个等于两个而则等于五个。 继续W3Schools响应式网页布局的实现，今日讲的是CSS Grid方案。CSS Grid就是为二维布局设计的，最适合用来做网页布局。目前主流的浏览器都已经支持CSS Grid，除非你很确定你的用户常使用较旧的浏览器，不然的话，建议使用CS...
阅读 1072·2021-11-15 18:00
阅读 2780·2021-09-22 15:18
阅读 1943·2021-09-04 16:45
阅读 732·2019-08-30 15:55
阅读 3799·2019-08-30 13:10
阅读 1308·2019-08-30 11:06
阅读 1943·2019-08-29 12:51
阅读 2277·2019-08-26 13:55
