hwyzw 发表于 2024-12-20 11:55:02

深入解析响应式Web设计实战技巧与HTML5 CSS3应用

    本书的定位不是API手册,而是实用技巧。给我的感觉和《无可挑剔的网页设计》的定位很相似,也和《DOM编程的艺术》的风格很相似,全书都用了一个实际的案例。虽然这本书的主标题是《响应式网页设计》,但整本书不仅仅是关于响应式设计的。它的主线是响应式设计,但穿插的是大量的HTML5标签和CSS3知识,没有任何JS知识。因此,作者的身份更像是国内的CSS重构工程师。

    我们挑一些印象深刻的点,结合我自己的想法来分析一下:

    1)响应式设计有两个基本条件。第一个是设置-width,第二个是媒体查询。这是响应式布局的基础,就像css的道理一样——知道了这一点,响应式布局就成功了一半。

    媒体查询可以用来确定当前设备的窗口宽度、高度、横竖屏,相当于用CSS为当前设备写if、else。媒体查询的使用详细介绍可以在这里找到:

    值得注意的是@url("xxx.css")和(min-width:xxx px)的写法。因为如果将不同分辨率下的样式写在单独的文件中,并且采用动态加载的方式,如果一个文件对应一个link标签,就需要添加很多模块。而如果这些分散的模块包含在主css文件中,则只需要动态加载一个模块,最好不要暴露脏东西。

    2)响应式布局需要找到几个主流分辨率作为临界点,针对主流分辨率制作几个不同的版本。

    这些主流分辨率来自于你需要支持的终端:台式机、笔记本、iPad、手机、pad、黑莓等。首先确定你要支持哪些终端,然后收集相关数据,看看这些终端的分辨率和市场占有率,并最终确定支持名单。这个支持列表应该一直维护,也许不那么频繁,但是应该没有时间停下来——移动终端的碎片化问题,你知道,只要一个就够了,更何况这么多设备。这个成本比固定宽度布局要高得多。

    确定了这个支持列表后,你需要把这些数据交给设计师来设计几种不同的布局。这个过程必须需要前端工程师和设计师之间频繁的沟通,以评估设计的可能性和成本效益。这个成本比传统的固定宽度布局要高很多。

    设计图制作完成后,前端需要将CSS布局分为两层。最底层是各个分辨率的公共部分,上面需要写多个分支,对应不同的分辨率。开发和维护成本翻倍。

    前面说过,响应式布局从设计到开发各方面的成本都比固定宽度布局高很多。产品开发时间会比原来开发固定宽度的网站要长很多,设计师和工程师的工作量也会大很多。在实际操作中,这件事只能在公司内部从上到下推。我想大多数工程师都不想为自己找这样的苦差事。即使工程师热衷于响应式布局这个新玩意,设计老师们也未必会喜欢。而这不是工程师能够单独完成的事情。

    3)流体布局。

    https://img2.baidu.com/it/u=2062440022,1604979383&fm=253&fmt=JPEG&app=120&f=JPEG?w=800&h=500

    流体布局最早是在《None》中被引入的,但由于没有强劲的市场需求,流体布局的概念只在前端圈流行了很短一段时间。如果不是移动互联网的到来,流体布局几乎已经被遗忘了。流体布局是响应式布局的必备组件,所以这次复活了。

    实际上有两种类型的流体布局。一是固定一侧,让另一侧适应。这种前几年流行的负边距布局很容易实现;另一种是双方适应,按比例进行。同时放大和缩小比较麻烦。 《指环》一书介绍了后者。具体来说,它使用百分比单位来使所有元素的宽度和高度自适应,包括字体大小,而不是简单地让长文本换行。

    就我个人而言,我不太同意“”的推荐,尤其是当我看到所有单位都必须经过除法才能得到最终结果值,并且结果值仍然是像“-right:”这样的BT值时2.%;" ,光是想想就让人头晕。以后做布局的时候,一定要打开计算器。 。 。反正我是受不了了。

    我在做响应式布局的时候,会使用负边距布局的思想,固定一侧的宽度并适应另一侧,然后所有的单元仍然使用px。不同的主流分辨率分支下,可以设置不同的尺寸,但单位必须是px。但到了CSS3时代,已经不再需要使用复杂的负边距布局来实现“适配”了。 CSS3的盒子布局可以轻松实现自适应功能。

    4) 网络字体。

    @font-face我很早就听说了,但是@font-face一遇到中文T_T就哭了。在英文字体中,字符只是几个abcd和常见的符号,但中文则不同。汉字不是用字母拼出来的。起来,所以中文字体文件会特别大。所以之前看到网上的字体的时候,我总觉得对于中国的国情就应该忽略它们。

    《Ring》介绍了@font-face的另一种用法,让我眼前一亮。这时候我才意识到@font-face在中文环境下还是个宝——可以用网络字体让字母看起来像图标!小图标不再需要使用图片,甚至更好,因为它实际上只是一个字体,你可以通过font-size轻松改变它的大小,它是矢量!话不多说,看看这个网站,你就会知道我在说什么:

    另外,需要注意的是,使用@font-face时,字体可能会显得模糊,可以通过设置font-来解决。

    5)使用线性渐变和径向渐变来生成背景图案。

    对于单独使用线性渐变或单独径向渐变作为背景,没有太多可说的。但如果你将两者结合起来,使用 -- 你可以生成非常漂亮的复杂背景!这些背景甚至可以取代一些平铺图像。令人惊奇的创意:

    6) 表格 2.0 的验证。

    https://img0.baidu.com/it/u=3028658317,1970963632&fm=253&fmt=JPEG&app=138&f=JPEG?w=500&h=646

    《Ring》的作者很高兴HTML5 Form 2.0可以在不使用JS的情况下完成表单验证工作。但我对此表示怀疑。首先,表单不一定是通过方法提交,可以通过ajax或者来提交;第二,验证失败后的提示不能自行定制。浏览器提供相同的UI,类似于title属性的UI。显示无法定制;第三,表单验证似乎不太准确。我去年做过一个相关的demo:

    7)响应式布局案例网站——CSS工程师和设计师的灵感来源。

    网站重构刚兴起的时候,为了展示CSS布局的可能性,有一个叫Zen 的网站,收集了各种CSS作品,向外界展示CSS的强大。它针对的是 CSS 工程师。有一个类似的响应式布局网站,收集了一系列响应式布局案例。响应式设计是一个新概念。与CSS布局不同,CSS布局对于工程师来说只是一场技术革命,它影响着前端工程师和设计师。设计师还需要灵感来了解在何处以及如何处理它们,以便同一组图像能够以最低的成本适应各种分辨率,同时保持明确的优先级和内容优先级。

    该网站使工程师和设计师可以轻松找到灵感。在大家都在摸索的这个阶段,拥有这样一个网站就显得尤为重要。

    8)响应式布局不一定是答案。

    正如作者在书中提到的,有很多人对响应式布局持怀疑态度。包括我自己,我也对响应式布局持怀疑态度,因为它的沟通、开发和维护成本确实不低。响应式布局不一定是答案,至少不是唯一的答案。比如我做的这个项目就没有使用响应式布局,我认为这个项目不使用响应式布局的利大于弊。正如作者所说,使用HTML5还是不使用响应式设计要看情况。

    无论你使用与否,了解这个方法总是有必要的。手中多一件武器,就意味着多一种选择。

    看完之后和看《无》的感觉一样,感觉技术又要更新了。当年,CSS2布局取代了表格布局,引起了业界的学习热潮和朝代更迭。不愿意跟进的学生几年后就会被淘汰。现在CSS3和移动互联网带来了新的变化。很多事情都和以前不一样了。不愿意跟进的同学,不久的将来就会像坚持使用表格布局的同学一样被时代淘汰。历史总是惊人的相似,时代的变迁不以人的意志为转移。要么跟进,要么被淘汰。加入IT海盗船的孩子们,不要再挣扎了,要学习了。出色地。 。 。
页: [1]
查看完整版本: 深入解析响应式Web设计实战技巧与HTML5 CSS3应用