开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《响应式Web设计实践》一2.4 混合固定宽度和流动宽度

简介:
+关注继续查看

本节书摘来异步社区《响应式Web设计实践》一书中的第2章,第2.4节,作者: 【美】Tim Kadlec 译者: 侯鸿儒 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4 混合固定宽度和流动宽度

响应式Web设计实践
到目前为止,文章页面看起来已经很不错了,而且布局十分灵活,下面让我们来加强一下右侧的边栏。现在它看起来好像没什么问题,但是如果我们能让它保持300px宽,而只让主体列流动岂不是更好?虽然这不是必需的,但是考虑到边栏里的广告,我想这将会是一次很好的润色。

使用浮动来实现这个任务几乎是不可能的。正如我们之前讨论过的那样,主要内容栏的宽度依赖于屏幕的分辨率,如果我将边栏设置为固定的300px宽,同时保持主要内容栏为当前的63.125%,那么我们将遇到前面在浏览器宽度小于960px时遇到的同样的问题。

有一种方法可以绕过这个问题,其中会涉及CSS表格。

表格布局——正确的方法
不久以前,在一个离我们不太遥远的星球,那里多数的Web站点都是使用表格来布局的。那是一种缺乏语义的、散乱到让人看了想哭的实现方法,但它的确是有效的。后来那里出现了一场Web标准化运动,并提出了要将内容和表现相分离的理念,突出强调了使用语义标记的重要性。一场伟大的战役便随之而来,并最终以标准的获胜而告终。

相比CSS布局,表格布局的优势之一在于它简化了将站点布局为多列的实现过程。可以混合使用固定宽度和流动宽度;一行里可以包括好几列——所有这些在表格布局中实现起来都相当容易,而用CSS来实现这些样式则远没有那么简单。

其实你可以给display属性赋予许多不同的、与表格相关的值,并以此来实现上述的那些样式,因为display的一些属性值可以让元素获得与表格相关元素相似的布局效果。


b2_1

如果在CSS中使用表格值的做法会让你觉得不爽,那么我想你不该因此而受到指责。毕竟,基于表格(table)的布局曾一度受到了人们猛烈的抨击,你也许非常理解那种甚至看到厨房里的桌子(table)都会感到恶心的感受。但是,在CSS中使用表格值与使用HTML表格来布局还是有很大区别的,CSS中的表格值只是给内容定义了视觉样式,而并不是说表格也是内容的一部分。

到目前为止,display属性的表格值还没有得到广泛的使用。对此你也许可以指责IE,因为Firefox、Safari以及Opera都已经支持表格值有一段时间了,而IE直到IE 8才开始支持表格值。在写这本书时,IE 6和IE 7总共的市场份额已经下降到了5%以下,所以我想现在是时候扫扫CSS表格值身上的尘土,并开始使用它们了,更何况移动平台对此的支持也相当棒。

如果将某列的display属性指定为table-cell,我们就可以混合分别使用固定宽度和流动宽度的列了:

.main {
     display:table-cell;
}
aside {
     display:table-cell;
     width: 300px; 
}

这时当我们再来缩放浏览器,边栏将仍旧保持300px,而左边的主要内容栏则会进行调整以填满剩余区域。虽然现在两列之间没有了漂亮的间隔,但我们可以很容易地通过增加一些padding来让它重现:

.main {
     display:table-cell;
     padding-right: 2.5316456%; /* 24px / 948px */
}

现在,我们已经能够将固定宽度的列和流动宽度的列结合在一起使用了,这使得我们在保证布局灵活性的同时,不必再去担心在混合布局中引入浮动时会造成的混乱了(图2.7)。但主要内容栏在高分辨率的屏幕中显示时还是会有一些不妥之处(译者注:因为在高分辨率屏幕下主要内容栏会变得很宽,过宽的行不利于人们阅读),我们将在下一章探索媒介查询时再去解决这个问题。

对老版本IE的支持
对于很多站点来说,也许本章到此就可以结束了,因为IE 8之前的各种版本的IE正在迅速失去各自的市场份额。其实这仍然是由你的用户来决定的,让那些旧版本的IE以它们现有的方式来呈现网站也许是不够的。虽然可以显示网站的内容,但你的客户也许并不满足于这样的设计,这时你就要准备一些备用的
样式了。

条件注释可以帮你达到上面的目标,因为条件注释能让特定版本的IE浏览器使用另外的样式表。例如,我们创建一个叫做ie.css的样式表,并且规定只在IE 7及以下版本的IE中才加载它,那我们就可以使用下面这样的条件注释:

<!--[if lt IE 8]>
<link rel="stylesheet" href="/css/ie.css" media="all">
<![endif]-->

现在,任何IE 8之前版本的IE就都会加载ie.css了。这样,我们便实现了为较早版本的IE浏览器提供备选样式表的目标。


2_7

Display:table的告诫以及未来
在你变得兴奋并开始在所有项目中都使用display:table之前,这里有一些你需要意识到的潜在问题 。

第一个问题是:在一个被指定为display:table-cell的元素内,你无法精确地定位元素。如果你需要精确地定位,你就不得不在表格中插入另外一个div,或者干脆就不要使用display:table。

另一个需要牢记的一点是:相对来说,表格是更加严格的。有时浮动所具有的流动性是有利的,比如如果有些内容过长的话,那么浮动可以很容易地让超出的部分折回到下面去。

Web设计中没有银弹(译者注:银弹是指那些可以解决复杂而棘手的问题的方法或者技术手段),你会看到我在后面还会提到这句话的。所以你必须在提交任何方案之前,仔细考虑你的需求,包括使用display:table。

CSS网格布局和Flexbox是两种新的布局方法,它们可以为我们提供更多种类的控制,而且值得我们关注。但现在浏览器对它们的支持还都非常有限,这也是我们使用display:table的原因。

现在唯一的问题是Windows Phone 7也会加载这个备用样式,鉴于此,我们将在下一章中利用媒介查询来针对小屏幕修改样式表,因为我们不想在手机中让备用的样式表覆盖现有的样式。幸好我们只需在条件注释中做一处小小的修改,就可以修复这个问题了(该方法最先由Jeremy Keith提出):

<!--[if (lt IE 8) &amp; (!IEMobile)]>
<link rel="stylesheet" href="/css/ie.css" media="all">
<![endif]-->

既然我们可以在不影响手机体验的前提下提供备选样式,那么我们就先将ie.css文件中的样式变回两列浮动的流动布局:

.main {
     float: left;
     width: 65.8227848%; /* 624/948 */
}
aside {
     float: right;
     width: 31.6455696%; /* 300/948 */
}

虽然在老版本IE中达不到那些对标准支持更好的浏览器中显示时的效果,但这已经足够了。记住,站点不需要在不同设备的不同浏览器中看起来都一模一样,事实上这也是无法做到的。即便是现在这样,那些老版本IE的用户也照样可以看到一个对于他们的浏览器来说合适且良好的布局。

提示
可以访问http://implementingres-ponsivedesign.com/ex/ch2/ch2.4.html来查看实际效果。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
减少存储过程封装业务逻辑-web开发与传统软件开发的思维模式不同
本篇文章讨论并不是:不要使用存储过程,因为有些事情还是要存储过程来完成,不可能不用。而是关于:"业务逻辑是不是要封装在存储过程中实现,这样子php、java等就是调用存储过程"。   业务逻辑,通俗说就是:比如要取数据的操作,取出会员编号为x的数据,原来我们一般是封装成函数,或者直接编写sql语句查询。
1382 0
对于 Web 开发很有用的 jQuery 效果制作教程
  如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案。凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 Web 开发能力。
1137 0
【nginx+lua高性能web应用开发(二):开发评论模块(ssi+mysql)】
开发这个模块,是为了解决项目中的实际问题,思考设计的 。 本文原文连接: http://blog.csdn.net/freewebsys/article/details/16944917 转载请注明出处! 前言: 参考了下ngx_lua,Node.js,PHP三个进行的压测对比。http://bluehua.org/demo/php.node.lua.htmlngx_lua   Time p
1278 0
Normalize.css – 现代 Web 开发必备的 CSS resets
  Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式。
949 0
Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库
  SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看、与分辨率无关的矢量图形。而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操作 DOM 一样操作 SVG 资源。
1121 0
【今日推荐】移动 Web 开发的10个最佳 JavaScript 框架
  选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地达到他们的开发目标。这些预实现的组件采用优秀的设计模式和最佳实践,促进应用程序以标准化的方式开发。
1790 0
Dropwizard - 开发Java RESTful Web服务
Dropwizard是一个开源Java框架,用于开发高性能、RESTful Web服务。Dropwizard采用了成熟、稳定的库,简化了RESTful Web服务的开发。Dropwizard开箱即用,支持复杂的配置、日志等等。
1010 0
Web Services开发——RESTEasy 2.0
Web Services开发——RESTEasy 2.0 原创:chszs版权所有 RESTEasy是JBoss(RedHat)公司的开源Web Services开发框架,基于Java、基于REST架构,是JAX-RS规范的最佳实现之一。
827 0
利用JAX-WS开发Web服务
利用JAX-WS开发Web服务   本文提供了一个使用Java如何开发基于SOAP的Web Services,其客户端可以是Perl、Ruby、Python或Java等。
774 0
PHP开发Web服务
PHP开发Web服务 WSO2 WSF/PHP(WSO2 Web Services Framework/PHP,WSO2 Web服务框架) 是一个PHP扩展,允许用来创建和使用Web服务。
600 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载