@陈子木 响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念，随后席卷前端和设计领域，成为了如今网页设计的大趋势。正如同Ethan所说：“响应式网站设计提供了一种全新的选择，这种基于栅格布局和CSS3的流动性网页设计，可以让网页随着屏幕变化而响应。这是一种更为统一，更加全面的设计技巧，一种打破网页固有型态和限制的灵活设计方法。”
这种兼顾多屏幕多场景的灵活设计，这就是响应式设计令 人着迷的所在。这一点和编程开发领域所追求的“一次编写，到处运行”有着异曲同工之妙。所以它在短短几年内迅速火起来，然后成为大趋势，可以说是意料之 中，水到渠成。响应式设计的网页现在已经很多了，而相关的教程也是数不胜数。国外的设计博客Pixel77搜集了15篇优秀的响应式网页设计的教程，让喜 欢钻研的你来学习。
更多关于响应式网站的文章：
《紧跟潮流！30个新鲜的响应式网站欣赏》
《最热门工具推荐！为响应式网站而生的40款栅格神器》
《干货！如何在响应式网页中安置和处理图片及视频》
现在先简单介绍一下这15个教程，随后优设会挑选其中比较突出的文章单独翻译出来。现在，大家就先睹为快吧！
1、响应式网页设计：它是什么以及如何使用（作者Kayla Knight）
设计师必读的15个响应式网页设计教程Kayla Knight的这篇文章是非常不错的入门基础教程。Knight会引导你了解响应式设计的基础知识，让你明白它的基本原理。如果你想着手设计响应式网页，这篇文章会告诉你应该从何处下手。
2、响应式网站导航（作者 Thoriq Firdaus）
设计师必读的15个响应式网页设计教程响应式网站中，导航栏是非常重要的组成部分，如何设计出优质的响应式导航栏就显得特别重要了。所以我们专门挑出这篇一流的响应式网站导航设计的教程，供大家参考学习。
3、使用CSS构建基础的响应式站点（作者 Jason Michael）
设计师必读的15个响应式网页设计教程这又是一篇响应式网站设计领域重量级的入门教程。这篇文章不仅仅为你讲述了响应式网站基本的CSS设计方法，Micheal还会帮你解答一系列设计响应式网站时常见的问题和迷思。
4、如何将任何网站转化为响应式网站（作者 Rochester Oliveira）
设计师必读的15个响应式网页设计教程这篇教程同样是从响应式设计的基础概念开始，作者熟练地分析解读了常见的标签，在文中后半段还传授了一项极有价值的技能：教你如何将现有的网站转化成为一个响应式的站点。所以，这篇文章一定不能错过！
5、使用响应式栅格系统设计网站（作者 Graham Miller）
设计师必读的15个响应式网页设计教程响应式栅格系统并非框架，深入理解栅格系统是非常有意义的。如果你想深入了解这个概念，那么还有什么方式比阅读这个概念的提出者Graham Miller的文章来的更有效呢？这篇教程会教你使用栅格系统1小时快速创建响应式网站！
6、教你使用FlowType.JS制作响应式web排版（作者 JD Graffam）
设计师必读的15个响应式网页设计教程众所周知，排版是Web的未来。所以，学会响应式排版并不是一种额外的优势，而是必备的技能。因此，JD的这篇排版的教程就是帮你解决这方面问题的。
7、如何制作响应式排版（作者Val Head）
设计师必读的15个响应式网页设计教程这是另外一篇关于排版的教程。Val Head 详细地解释了为什么一个尺寸无法应付所有的场景，并且详细介绍了如何让图片和布局能随着尺寸改变而响应。
8、响应式设计三部曲（作者Nick La）
设计师必读的15个响应式网页设计教程这篇教程详细讲述了如何正确使用Meta标签、HTML结构和媒体查询来制作响应式网站。这是最基础的入门教程之一，写的非常不错。如果你对这些东西掌握得不够好的话，不妨读读这篇文章！
9、CSS：响应式导航栏菜单（作者Nick La）
设计师必读的15个响应式网页设计教程这是Nick La 的另外一篇文章，写的也是如何使用CSS来写响应式导航栏的。这篇文章写的简洁明了，值得一读。
10 、响应式网站设计中的可扩展导航模型（作者 Michael Mesker）
设计师必读的15个响应式网页设计教程这篇教程可以帮你创造易于配置、体验良好的响应式网站模板。这篇文章是源自于作者Mesker的经验总结，在此之前，他曾参与过一个大型的响应式网站开发项目。
11、基于现有网站的响应式改造（作者 Matt Stow）
设计师必读的15个响应式网页设计教程作者Matt Stow通过这篇网站手把手地教你如何将你的现有网站转化为一个足够出色的现代响应式站点。强烈推荐需要改造网站的同学阅读一下这篇文章。
12、如何让导航栏在小屏幕上转化为下拉框（作者 Chris Coyier）
设计师必读的15个响应式网页设计教程如何让导航栏在小屏幕上转化为下拉框？这篇优秀的教程可以帮你解决这一小问题。当你处理移动端的页面布局的时候，有时候会有这一的需求，有了这篇教程，你就再也不用担心这个问题了！
13、响应式图片：尝试让图片感知环境自适应（作者 Scott Jehl）
设计师必读的15个响应式网页设计教程这篇教程会教你如何正确控制响应式网站中的图片，让它们能随着屏幕尺寸的变化而自适应。作者Scott Jehl思路清晰，言简意赅，值得阅读。
14、响应式水平布局（作者 Mary Lou）
设计师必读的15个响应式网页设计教程这篇教程会教你如何创建一个具几个水平滚动面板的响应式布局。这种设计的技巧在于，当屏幕空间够大的时候，面板会水平铺开，当空间不足的时候，它们会合并到一起，以选项卡的形式存在。
15、视差流态特效的CSS3幻灯片响应式网站设计（作者 Ring Wing）
设计师必读的15个响应式网页设计教程视差滚动式网页也是目前网页设计的趋势，如何将响应式网站中的幻灯片使用CSS3制作成视差滚动的效果，就是这篇教程要叫你做的事情。
上面基本就是Pixel77所推荐的15篇教程了。有哪些是你们非常想中文化的，请在下方留言，我会有限翻译呼声最高的文章。谢谢！
特别说一下，如果你还从来木有用手机访问过优设网，不妨现在试试，会有惊喜哟→http://www.uisdc.com/
原文：http://www.uisdc.com/15-responsive-web-design-tutorials
相关推荐
内容概要：本文详细介绍了基于TMS320F系列芯片的C2000串口读写方案及其编程器——FlashPro2000的功能特点和支持的接口模式。文中不仅涵盖了硬件连接的具体步骤，还提供了代码实例来展示Flash擦除操作，并对比了JTAG和SCI-BOOT两种模式的优缺点。此外，针对不同型号的C2000系列芯片，给出了详细的适配指导以及避免烧录过程中可能出现的问题的方法。 适合人群：从事DSP开发的技术人员，尤其是对TI公司C2000系列芯片有一定了解并希望深入了解其编程和烧录细节的人群。 使用场景及目标：适用于实验室环境下的程序调试阶段，以及生产线上的批量烧录任务。主要目的是帮助开发者选择合适的编程工具和技术手段，提高工作效率，减少因误操作导致设备损坏的风险。 其他说明：文中提供的代码片段和命令行指令可以直接用于实际项目中，同时附带了一些实用技巧，如防止芯片变砖的小贴士和自动化重试脚本，有助于解决常见的烧录难题。
汉字字库存储芯片扩展实验 # 汉字字库存储芯片扩展实验 ## 实验目的 1. 了解汉字字库的存储原理和结构 2. 掌握存储芯片扩展技术 3. 学习如何通过硬件扩展实现大容量汉字字库存储 ## 实验原理 ### 汉字字库存储基础 - 汉字通常采用点阵方式存储(如16×16、24×24、32×32点阵) - 每个汉字需要占用32字节(16×16)到128字节(32×32)不等的存储空间 - 国标GB2312-80包含6763个汉字，需要较大存储容量 ### 存储芯片扩展方法 1. **位扩展**：增加数据总线宽度 2. **字扩展**：增加存储单元数量 3. **混合扩展**：同时进行位扩展和字扩展 ## 实验设备 - 单片机开发板(如STC89C52) - 存储芯片(如27C256、29C040等) - 逻辑门电路芯片(如74HC138、74HC373等) - 示波器、万用表等测试设备 - 连接线若干 ## 实验步骤 ### 1. 单芯片汉字存储实验 1. 连接27C256 EPROM芯片到单片机系统 2. 将16×16点阵汉字字库写入芯片 3. 编写程序读取并显示汉字 ### 2. 存储芯片字扩展实验 1. 使用地址译码器(如74HC138)扩展多片27C256 2. 将完整GB2312字库分布到各芯片中 3. 编写程序实现跨芯片汉字读取 ### 3. 存储芯片位扩展实验 1. 连接两片27C256实现16位数据总线扩展 2. 优化字库存储结构，提高读取速度 3. 测试并比较扩展前后的性能差异 ## 实验代码示例(单片机部分) ```c #include <reg52.h> #include <intrins.h> // 定义存储芯片控制引脚 sbit CE = P2^7; // 片选 sbit OE = P2^6; // 输出使能 sbit
测控装备干扰源快速侦测系统设计研究.pdf
嵌入式八股文面试题库资料知识宝典-【开发】嵌入式开源项目&库&资料.zip
嵌入式八股文面试题库资料知识宝典-百度2022年嵌入式面试题.zip
少儿编程scratch项目源代码文件案例素材-空间站.zip
基于关联规则的商业银行个性化产品推荐.pdf
嵌入式八股文面试题库资料知识宝典-Linux基础使用.zip
内容概要：本文详细介绍了利用MATLAB进行轴棱锥生成贝塞尔高斯光束及环形光束光强图像的仿真研究。首先阐述了实验的背景与目标，强调了MATLAB在光学和计算科学领域的广泛应用。接着，具体描述了实验的方法与步骤，包括材料准备、仿真过程中的参数设定和光束生成代码编写。最后，对实验结果进行了深入分析，展示了贝塞尔高斯光束和环形光束的光强分布特点，验证了其光学性能的预期表现。文章还对未来的研究方向和技术改进提出了展望。 适合人群：从事光学、物理学及相关领域研究的专业人士，特别是对光束生成和光学性能分析感兴趣的科研工作者。 使用场景及目标：适用于需要进行光束生成和性能分析的实验室环境，旨在帮助研究人员更好地理解和优化光束特性和传播行为。 其他说明：本文不仅提供了详细的实验方法和步骤，还附有丰富的实验结果和数据分析，为后续研究提供了宝贵的参考资料。
内容概要：本文探讨了三电平NPC型有源电力滤波器（APF）的模型预测控制（MPC）中存在的开关频率过高问题及其解决方案。传统MPC方法会导致极高的开关频率，增加了系统的能耗和热量。通过引入滞环控制模块，可以在不大幅牺牲性能的情况下有效降低开关频率。具体来说，滞环控制通过在价值函数计算后增加一个判断条件，对状态切换进行惩罚，从而减少不必要的开关动作。实验结果显示，开关频率从4392Hz降至3242Hz，降幅达26.2%，虽然电流总谐波畸变率（THD）略有上升，但仍符合国家标准。此外，文中还提出了动态调整滞环宽度的方法，以进一步优化不同负载条件下的表现。 适合人群：从事电力电子、电力系统控制领域的研究人员和技术人员，特别是关注APF和MPC技术的人群。 使用场景及目标：适用于需要优化APF系统开关频率的研究和工程项目，旨在提高系统效率并降低成本。目标是在不影响系统性能的前提下，显著降低开关频率，减少能量损失和热管理难度。 其他说明：文章不仅提供了理论分析，还包括具体的实现代码片段，有助于读者理解和实践。同时，强调了在实际应用中需要注意的问题，如中点电位漂移等。
内容概要：本文介绍了三维POD DMD程序在处理原网格数据方面的独特优势和技术细节。首先阐述了该程序能读取结构化和非结构化网格数据及其拓扑关系，在生成模态数据过程中保持原始网格形态而不需要进行网格插值操作。接着展示了简化版本的Python代码片段，揭示了读取网格数据和生成模态数据的核心逻辑。最后提到提供的辅助学习资料如代码、视频教程、Word教程和实例数据，帮助用户深入理解并掌握该程序的应用。 适合人群：从事计算流体力学领域的研究人员和技术爱好者，尤其是那些希望提高数据处理效率的人群。 使用场景及目标：适用于需要处理复杂网格数据的研究项目，旨在简化数据处理流程，提升工作效率，同时保持数据的原始特性。 其他说明：文中不仅提供了理论性的讲解，还有具体的代码示例和丰富的学习资源，使读者可以边学边练，快速上手。
融合双向路由注意力的多尺度X光违禁品检测.pdf
嵌入式八股文面试题库资料知识宝典-Linux_Shell基础使用.zip
嵌入式八股文面试题库资料知识宝典-联发科2021武汉嵌入式软件开发.zip
基于有限体积法Godunov格式的管道泄漏检测模型研究.pdf
嵌入式八股文面试题库资料知识宝典-ARM常见面试题目.zip
基于LWR问题的无证书全同态加密方案.pdf
嵌入式八股文面试题库资料知识宝典-符坤面试经验.zip
内容概要：本文详细探讨了三电平逆变器在带不平衡负载条件下的仿真研究。主要内容包括仿真环境的搭建、不同拓扑结构的选择（如T型、I型NPC和ANPC）、延时相消法（DSC）和双二阶广义积分器（DSOGI）的正负序分离控制策略、SVPWM或SPWM调制技术的应用、双闭环PI控制以及直流均压控制。文中通过具体的参数设置（交流电压220V，直流侧电压750V）进行了详细的仿真实验，并展示了各个控制策略的效果。最终，通过仿真实验验证了所提出方法的有效性，确保了交流侧三相电压波形的对称性和电流波形的自适应调节。 适合人群：从事电力电子、电机驱动、新能源发电等领域研究的技术人员和研究人员。 使用场景及目标：适用于需要理解和掌握三电平逆变器在复杂负载条件下控制策略的研究人员和技术人员。目标是提高对三电平逆变器及其控制策略的理解，优化实际应用中的性能。 其他说明：本文不仅提供了理论分析，还包含了具体的仿真步骤和代码实现，有助于读者更好地理解和应用相关技术。
内容概要：本文介绍了如何使用Matlab/Simulink软件构建一个14自由度的四轮驱动-四轮转向（4WID-4WIS）整车动力学模型。该模型涵盖了整车纵向、横向、横摆、车身俯仰、侧倾、垂向跳动及四轮旋转和垂向自由度等多个方面，旨在全面反映车辆在不同工况下的动态行为。文中详细描述了各子系统的建模方法，包括转向系统、整车系统、悬架系统、魔术轮胎pac2002、车轮系统和PI驾驶员模块。同时，提供了Simulink源码文件、建模说明文档及相关参考资料，便于用户理解和应用。 适用人群：主要面向汽车工程师、研究人员以及对汽车动力学和Simulink建模感兴趣的学习者。 使用场景及目标：①帮助用户深入了解车辆在各种工况下的动态行为；②为车辆控制策略的制定提供理论支持和技术手段；③作为学习和研究整车动力学建模的有效工具。 其他说明：该模型采用模块化建模方法，提高了模型的清晰度和可维护性，同时也提升了建模效率。