现代 CSS

Responsive

响应式设计:响应图像

这是《Understanding Responsive Web Design》系列教程中的第五篇。本文中,我将展示当一个web开发人员在创建响应式网站时都会遇到的典型问题:对图像的处理。或许你已知道,移动终端开发者面临的挑战是多不胜数的,使得图像适应多种屏幕尺寸无疑是最大的困难之一。现在有三种方案可供开发人员去选择开发响应式图像:与浏览器‘对抗’、放弃它、或者依赖服务器。接下来,我们去了解每种方案的优点与缺点。

响应式设计:自定义网格布局

在前面的文章中,我已介绍了“流布局”的特性和描述了如何使用响应式字体。在本文中,我将介绍一种应用广泛及非常著名的网格布局。网格系统其实早已应用在印刷媒体上,只是在web和mobile上的应用才发展一段时间。

如何制作自己的网页字体图标

网页字体图标到现在来说并不是一个新话题,大家都知道是通过@font-face来实现的。虽然有很多地方介绍如何制作属于自己的网页字体图标,但大部分都还是需要收费。让你我们这等屌丝无法接受。除了这些之外,其实还有一些制作矢量图的软件可以实现自己的图标。在这篇译文中,就详细介绍了如何使用Inkscape软件制作出自己的网页字体图标。

响应式设计:流体布局

两篇文章中关注响应式web设计的清晰概念如何响应式地使用字体之后,让我们来深人研究一下流布局。在此文中,我将演示当下是真正需要流布局的,以及当你可以选择不一定是响应式的不同解决方案。让我们接下来学习一些特定技术与应用。理解灵活的布局对你的项目很有帮助,理解和考虑到其他可行的解决方案是否是一种很好的选择。事实上,只有深入了解每种方案的优缺点,你才能有效地选择某种布局方案。布局类型有4种:固定宽度布局流体布局弹性布局混合布局,一起来逐个分析吧。

Web中内嵌内容实现响应式效果

在响应式设计的网页布局中有一些元素没有发挥好,直接损坏响应式设计的布局。其中之一就是iframe元素,因为有时候你需要在页面中嵌入外部资源,比如说YouTobe的视频,这个时候就需要用到iframe元素。在这篇文章中,我将会向您介绍如何使用CSS将嵌套进来的内容具有响应式的效果,比如说视频、日历等能随着浏览器的视窗自动调整。那于在网站上嵌入外部视频,而你又不想添加额外的标签,我们也将会介绍如何使用JavaScript来替代CSS,让其在响应式设计的网站中能自动调整。

响应式设计:概念与运用

一些读者或许好奇的是,人们为什么对“响应式web设计”(RWD)的关注度快速提高,开发人员都把此技术作为自己必备的技能之一,深入去学习理解这项新技术。这名称也常常作为前沿移动终端技术被提起。我们不会空谈概念,会把定义说清楚,并使用代码例子演示这项技术。如果你花一些时间来测试和了解真实的现代网络和移动技术,你就会体会到响应式web设计的好处在哪了,实现一个响应式设计可能比你想象的还要简单。现在我们都感受到Internet的变化是如此之快,促使这变化正是不断涌现的各种移动终端设备。有最近的研究表明,在未来3到5年内,通过接入网络的移动设备将超越桌面电脑设备。要适应这么快速转化也给开发人员面临巨大压力与挑战,对能力有了新的要求。

响应式设计:使用响应式字体

排版是响应式Web设计最重要的内容之一,如果你想内容能在所有尺寸屏幕上友好地显示,那就绝对有必要地为移动设备优化字体。幸运的是,实现弹性字体的过程并不是那么困难。当我讨论弹性(在这种情况下,是一种指导原则),我们不能忽视指定字体来适应我们响应式网站。我们可能使用不用单位标准来实现这个目标,包括pixel(像素),em,rem或者是百分比。那么选择一个正确的标准对设计一个可塑的,响应式的交互界面是至关重要的。在这关于响应式Web设计的系列中,我将讲解如何响应式地管理动态字体,也会逐个分析上面所提到的每个单位标准,对比各自的优缺点。

响应式设计、移动端网站与原生应用的优点和缺点

移动端的优化最近成了一个时髦的话题,将来也会有更多关于这方面的讨论。根据Mashable在2013年8月份发布的统计,可以得知,全球所有网站流量的17.4%都是通过移动设备来的,而这个数字在2014年将会继续增长。所以,你如果不想失去一杯羹的话,是时候步入移动端的领域了。

响应式网页字体图标

响应式设计中主要面对的问题之一是如何缩放图标来适应用户界面,不仅仅是针对于物理尺寸,而且还需要根据屏幕的尺寸和每英寸的像素比例来显示。一般情况之下,都是通过内联块元素<img>标签来添加图标。另一种常见的技术是依赖于网格图标和状态——CSS Sprites,并将其保存为.gif.png文件。然而,更糟糕的是图片根据响应式内容不断的放大,对于位图图像会产生锯齿,而且会越明显。更糟糕的是,CSS Sprites(雪碧图)制作的图标更无法轻意的缩放。

Flexible Images

玩过响应式设计的同学或多或少都会在一些媒体上纠结,比如说图片,视频等自适应问题。而且有关于这方面的解决方案各有各的说法,似乎是没有一种方案是绝佳的,这样一来让人倍感头痛。这或许就是前端的烦恼吧。我也一样,虽然整响应式设计蛮久的了,但对于图片方面的自适应处理还真没有找到一个好的方案,这回痛下决心,仔细找了一些相关教程阅读了一回。那么今天将整理一下,网络上有关于图片自适应(此处我称之为弹性图片)解决方案,希望这篇文章能帮助大家解决图片在响应式设计中给大家带来的烦恼。

页面

返回顶部