网站设计技术
css过渡和媒体查询
埃利奥特周杰伦股票提供洞察到css媒体查询和css过渡相结合 。其基本前提是：您使用媒体查询设计，在布局调整根据浏览器的宽度响应网站，和你不断调整大小您的浏览器的网站的性能，但每一次查询踢在，存在的一个之间的恶劣的跳跃第一个样式和第二。为什么不使用一些简单的css过渡，顺利通过调整大小的动画跳 ？一个很好的案例研究 。
敏感的数据表
克里斯coyier和斯科特jehl正在尝试与响应，显示数据表的设计技术。默认情况下，数据表可以相当广泛，未必如此。你可以放大，看到整个表，但然后会太小，无法阅读的文本大小。可以放大，使其可读的，但你不得不滚动纵向和横向（悲伤的脸）浏览表。一种解决方案是重新格式化更好的可读性表。另一种是从数据显示的饼图。然而，另一种是窄屏幕（而不是全表时显示的内容与干扰）改编成一个小型的图形表 。
响应的导航菜单：转换为小屏幕上的菜单的
下拉式克里斯coyier描述转换成一个下拉菜单的联系定期行，当浏览器窗口很窄的另一项技术。当用户在小屏幕上，点击下拉，他们将获得一个界面，选择一个选项是好的，大，容易选择 。显然比显示一个微小的环节更好。
css媒体查询和使用可用空间
一个从css技巧教程，讨论了如何与媒体查询以及如何使用在一个单一的样式表的媒体查询微妙的变化 。举例来说，如果你有一个流体宽度设计在侧边栏的页面宽度的35％，这取决于浏览器窗口的宽度，你可以说，“如果浏览器是真正缩小，做到这一点。如果它的更广泛的，做到这一点。如果它真的很宽，做到这一点。“在这篇文章中，您将学习如何修改根据浏览器的视口的链接列表。
响应的图片，视频响应
流体图片
流体的图像是一个负责任的设计的中心环节。这种由ethan marcotte的文章给出了img {最大宽度：100％;?}代码片段，以及细节让你开始创造他们采用了经典的彻底的概述。
响应形象：环境感知的浆纱图像
试验由长丝集团的另一种方法流体图像 。这种技术可以让设计人员能够创建响应布局，在不同的分辨率不同的图像大小为 。实际上，它允许设计师创建小屏幕的移动优化的图像，然后为更高分辨率的版本，以更大的屏幕 。长丝集团已开发出这种技术的使用。htaccess文件和javascript来提供不同大小的图像，根据屏幕宽度 。另一种方法是使用像工具tinysrc允许你只是一个tinysrc url前缀在源 代码中的所有大型图像，工具，没有休息 。
响应图像和环境感知的图像
大小克雷格罗素已开发出一种技术，使用一个服务器端脚本（php）为几个不同的分辨率的图像。我们的想法是，在php脚本中，使用嵌套数组，列出了图像文件和它们的相对百分比尺度 。在html中，图像的?src?属性将设置为请求的图像的id，但没有形成规模指定。javascript的计算图像的宽度的百分比相对容器的最大宽度，这个数字是再追加到年底的?src属性为尺度参数 。在文章的评论包含一些很好的想法和建议，就如何可以改进的技术 。
响应图片现在
哈里罗伯茨“的思想是，以较小的两个图像，图像，你想移动用户下载使用img元素。你也有一个含有格套用到通过css背景图像的大版本 。您的img，然后隐藏桌面用户，并显示他们大css背景，并隐藏背景图像从手机用户，只是为他们服务的较小的内联图像 。
使用css3的响应
图像萨科加拉格尔的方法依赖于使用@传媒查询，对css3生成的内容和css3的扩展attr（?）函数 。与css3延伸至相结合的内容属性attr（?），你可以指定属性的值应该是作为url的一部分解释url（?）表达 。在这种情况下，这意味着你将能够取代一个形象的内容与目标url的图像，存储在一个自定义的html?数据*属性。
使用cookie的响应
图像基思克拉克建议使用cookie来为移动用户服务较小的图像 。每当浏览器从服务器请求一个文件，它会自动将随请求一起任何cookie数据。如果我们使用javascript来填充与当前屏幕的尺寸的cookie，浏览器的所有后续请求将这个数据传递到服务器。换句话说，服务器会知道文件要求的设备，屏幕尺寸。
约翰福尔兹与expressionengine响应的图像提供了一个响应图像的技术，从上面介绍的技术是不同的。它涉及到查询以确定它是否是移动设备的用户代理字符串，然后设置一个全局变量，然后可以在模板用于修改图像输出的大小 。基本上，只有一个图像被发送到浏览器，但图像是不同的，取决于是否您正在查看的页面上移动或台式设备 。
css：弹性视频
尼克香格里拉适用于最大宽度：100％;片段，视频和显示技术，使得html5的视频和对象和iframe嵌入视频响应。对于后者，关键是非常简单的。只要嵌入代码包装在一个分区容器，并指定了50％至60％的填充，底部 。然后，指定的子元素（iframe对象嵌入）和一个100％的宽度和100％的高度，绝对定位 。这将迫使嵌入式元素自动扩大全宽。最初发现蒂埃里koblentz。
resizeable图像（全分辨率！）
从css的技巧上调整大小的图像的快速教程，同时保持了决议。
响应电子邮件通讯
为移动设备优化你的电子邮件
与宽的电子邮件通常需要水平滚动的媒体查询，尤其是当有一个大的图像。这项运动监控的情况下研究解释了如何电子邮件可以优化移动设备使用媒体查询，并提供了几个有用的技术和马上要使用的片段。
响应电子邮件的设计，最大的移动
受众另一个有趣的案例研究表明青苗背后的开发团队如何应用屏幕大小的特定媒体查询到目标样式，和什么设计决策，使移动电子邮件体验更好。
媒体查询html邮件
本文介绍了使用媒体查询，针对特定的移动电子邮件客户。
指南中的css
设计呈现一贯在主要的电子邮件客户端的html?电子邮件，电子邮件支持，可费时。甚至简单的css支持客户端之间的差异很大，甚至同一个客户端的不同版本 。运动监视器放在一起为指导，以节省您的盘算自己的时间和挫折。拥有24种不同的电子邮件客户端的测试，它涵盖了所有流行的应用程序跨桌面，web和移动电子邮件 。
网站设计的工具
您可以从头开始构建一个负责任的设计，或者你可以使用下面列出的工具，以加快和顺利进行的过程。
respond.js
斯科特jehl的快，重量轻polyfill?的最小宽度和最大宽度css3媒体查询（ie 6日至8多）。css3 mediaqueries -?js是另一个脚本，使ie 5 + 2时，safari和firefox 1 +?透明的分析，测试和应用的css3媒体查询 。
webputty：科技进步css编辑
这个工具是一个基于web的css编辑器自动保存功能和您的网站实时预览 。webputty也有css选择突出和“能力标准说明”支持（sass和以下），以及指南针支持。要使用该工具，只需嵌入在您的网站的链接标签头标记。
调试css媒体查询
响应性的web设计，我们正在与不同的国家，宽度和视口的大小。约翰布鲁克股快速提示为说明纯css媒体查询踢英寸文章还提供了一个开发人员使用萨斯的混入。也可作为一个演示。
响应设计测试
这个工具，是每个人都需要一个快速简便的方法来测试他们的网站设计在多个屏幕宽度。defaulturl变量的responsive.js文件的顶部更改自己的网站，浏览您的网站内帧 。
响应容器：选择查询
由安迪休谟此javascript，可以让你添加选择的查询和响应容器设计 。从本质上讲，你可以申请不同阶级的价值观，基于它的宽度为html元素 。
如果您需要您的浏览器，在一定的窗口大小显示的内容，这就是你一直在寻找，调整我的浏览器。只需点击你需要的大小，并检查了你的大小看起来 。在chrome和opera不工作，由于“resizeto”事件的问题 。
媒体查询小书签
，显示您正是大小视口和媒体查询刚刚发射的一个方便的工具 。将它拖到你的书签栏，并准备好需要的时候 。
responsivepx
使用这个小玩意儿在你的媒体查询信息提供了创建响应的设计 。
protofluid
一个响应设计的快速原型工具 。您可以原型多种流行的设备的大小，方向和浏览器的css，他们的手机（黑莓火炬，谷歌nexus one，iphone手机，摩托罗拉droid），片剂（黑莓playbook，ipad，三星galaxy tab，戴尔streak） ，监视器或电视（720p，1080p）。你可以预览在浏览器中的设计和使用类似firebug的开发工具 。您可能要检查一个替代的工具screenfly，以及 。
流体电网计算器
哈里罗伯茨已经开发了一个计算器，为您的反应设计液电网和发电机。只要提供的列数，宽度一列和水槽的宽度，该工具将生成一个css中的流体为您的网格系统。得心应手！
免费html5/css3 wordpress的3.1 +响应布局的主题：
洋子洋子是一个现代化的，灵活的wordpress主题。基于响应布局的css3媒体查询，主题调整到不同的屏幕尺寸。桌面大屏幕，平板电脑和小型智能手机屏幕进行了优化设计。为了使您的博客个人，您可以使用后的新格式（如画廊，预留或报价），选择自己的徽标和标题图片，自定义背景和链接的