应式设计最近比较火。几乎所有人都在讨论或者写作相关的内容。

那么是什么让一个网页设计方案可以做到响应不同设备？响应式设计是一种方法，可以使网页根据不同设备的浏览器分辨率做出相应的调整，以达到最佳展示效果。这样的设计理念已经存在好几年了。在2013年，响应式设计被人们广泛接受，呈指数增长的大量网站开始应用这一设计理念。

响应式网站使用media queries检测访问它们的设备以及当前使用的设备分辨率。一旦检测确定，灵活的图片，字体以及网格就会调整网页设计以适应当前屏幕。如果你想实时观察响应式设计，在浏览网站的时候请调整浏览器的大小。Mashable网站是一个很好的例子。调整将使你了解设计师创建网站的意图。

响应式设计因为市场上数量巨大的平板电脑和智能手机而变得非常流行。通过平板电脑和智能手机访问互联网的用户迅速增加，使得开发商必须考虑以不同方式（不同的分辨率）呈现内容的必要性。

所以你需要知道什么是响应式设计？本文包含响应式设计十个重要概念。

1、响应设计不仅仅是一个趋势

我们使用各种不同的设备似乎是不可能改变的。

电脑显示器的尺寸和形状不断的增加和扩展。

这些因素应该足以理解为什么响应设计是如此重要，有可能成为开发商的标准做法。每个网站都需要做好设备。无论用户使用何种设备访问网站，都期望获得一致的体验。事实上，使用响应式技术的网站数量已从2010年开始稳步增长，A List Apart是响应式设计应用的最前沿。

响应式技术，虽然有时在规划阶段非常耗时，但是从长远来看可以帮助开发人员节约时间。使用响应式技术，不需要专门为移动设备重新设计网站和重定向。这可以使网站更新变得更简单，因为一个更新就可以解决所有的设备。

响应式设计也促进一致性。无论设备大小，视觉体验是一致的。这种一致的品牌体验可以帮助网站或企业获得用户认同。

2、响应的设计不是针对移动设备的设计

响应式设计是在移动设备上渲染内容的一项伟大技术，但它不是移动设备设计。响应式设计是“整个网页设计。”

是的，响应式设计应该适应移动设备。我们甚至可以认为，设计的开始阶段就是针对移动设备，但它远远不止这些。最好的响应式网站可以在台式机上以不同的分辨率浏览，从普通的1024x768到800x600，1366x768，以及1920x1080。这些网站在平板电脑，视网膜屏以及智能手机上都能获得一致的视觉体验。

如果开发者认为响应式设计只是针对移动设备，那么保持整体视觉体验的机会就已经错过了。移动设备，虽然是与整个响应设计对话的起点。但它只是设计和规划响应式网站的惯例。许多设计师和开发者发现在此基础上扩展设计会更容易更节约开发时间。

3、一切都是灵活的

灵活性是响应式设计的关键。栅格系统是灵活的；字体是灵活的；图片也是灵活的。如果你忽视这些因素中的任何一个，你的网站设计将会遇到困难。

此外，当你考虑设计的灵活性。应对不同的浏览器大小，最好的处理方法应该包括修改，增加或删减。针对某些特别小的设备，图片和内容可以隐藏以获得更好的体验。或者你可以选择一个简单的总体设计方案，使网站具有跨设备统一的外观。

记得在开发和设计过程中保持思维的灵活性，就像你所期望的结果一样。

4、优秀的响应式设计起源于栅格系统

使用栅格系统不是一个新概念，从出版行业问世开始就已经被人们应用。 响应式栅格系统是比较新的概念。

最好的响应式项目包含一个响应式栅格系统。网站可以按照百分比或栅格进行缩放。响应式栅格可以漂亮的完成这一计划工作。

考虑用户浏览网站最常用的宽度，最有效的栅格系统包括至少三个不同版本的浏览器宽度-768像素或以上，480到768像素，320到480像素-以及平板电脑和移动设备版本。一些开发商选择大于1000像素的栅格支持宽屏显示器。虽然可以用最佳分辨率渲染一个网站，但是响应式栅格系统可以填充屏幕上的空白区域。

另一个选择是使用日益普及的fluid breakpoints，由整体设计决定而不是预定的锚点。这种更灵活的方式可以帮助普通的breakpoints方式适应市场上越来越多的不同设备。

有很多用户友好的栅格系统可以选择。Twitter的Bootstrap和切图网（qietu.com）的快切css框架是两个出色的响应式栅格范例，它们真正展现了栅格系统的能力。

5、图片的尺寸和清晰度非常重要

质量低劣的图片在任何尺寸下都不会好看。图片质量比图片数量更重要。同样重要是图片的加载时间。考虑移动设备用户时，需要特别考虑有限的网络带宽。

在图片质量和加载时间之间取得平衡。确保优化图片适应网页；避免加载完整图片以及使用CSS属性缩放图片。在上传之前裁切图片，在保证质量的前提下以最小尺寸保存每一张图片。

在响应式布局中使用图片，有几个选项：使用有限数量的图片，在移动设备框架中限制图片，使用多个版本或允许图片在移动设备下隐藏。这些选项都可以很好的工作，尽管一些开发商由于用户必须加载图片而不能隐藏，即使他们是看不见的。

6、字体必须具备足够的识别性

使用一种尺寸的字体无法适应所有情况。24p的Helvetica字体在桌面上很漂亮，但是在移动设备上却难以辨认。字体也应该遵循响应式设计的准则。

响应式字体的核心概念是行宽。眼睛每次只能处理有限的字母。为保证可读性，应该根据屏幕宽度进行优化。对于网站而言，每行50-75个字母被认为是理想的，对于移动设备是每行35-50个字母。如何选择字体的大小取决于可读性。

考虑到垂直方向的文字段落更容易阅读，很多时候采用滚动模式。行距会影响眼睛的疲劳度。很多网站使用140p行距。对于较小的屏幕，可以考虑添加额外的空间来提高可读性。

最后，考虑使用字体的类型。Novelty typefaces，dramatic lettering和衬线字体，在大屏幕上看起来很好但不适合小尺寸屏幕。可以调整这些字体的间距和行距，使用他们的艺术风格元素，或考虑换一个不同的字体。在小尺寸屏幕最容易阅读的字体类型是regular sans serif styles。

7、响应式设计促进SEO

响应式设计会提高搜索引擎权重。这会促进网站的品牌和销售，更多接触用户的机会，这一好处使开发者有足够的理由考虑采用响应式设计方案。

因为一个响应式网页设计只有一个URL，而不是多个页面指向移动设备，链接是简单的。不要远离主网站和广告区域（比如使用谷歌的AdWords）都指向一个位置。

网站有一组标准的语言，元数据和关键词也很重要。在更新的时候就不需要担心链接重定向错误的问题。

另一个优点是有利于分析和数据收集，你不需要跟踪多个URLs重定向到主站或URL。响应式网页可以收集分析数据，无论用户使用何种设备。

8、无需害怕media queries

对于某些人，响应式设计最害怕的一部分是media queries。无需害怕media queries。

media queries通过CSS可以确定不同设备的功能和提供不同的风格适应设备。media queries扩展media属性，帮助网页设计师使用相同的HTML设置多个布局以适应用户的设备。你可以在确定屏幕大小或设备特征后使用正确的布局。

使用media queries定义breakpoints，你可能需要使用栅格系统。常见的宽度包括320,480,600,768,900和1200像素。

使用media queries的另一个优势（通常以百分比来调整大小），他们可以创建额外的灵活性，在不同尺寸的设备上更人性化。

9、导航是关键

下拉菜单的时代可能被终结。简单的导航将成为响应式网站的一个重要特征。

下拉菜单在触摸屏上很难操作。导航必须方便用户操作。较大的导航元素越来越受欢迎。再次，触摸设备驱动这种趋势，因为44x44像素的最小尺寸最适合用户在移动设备上点击。

在思考和设计导航时，需要考虑最小尺寸和最大尺寸。记住，额外的导航元素可以添加，并且尺寸可以更大。

隐藏滑动风格的导航日益普及。通常在屏幕上方通过单击或点击一个图标打开一个菜单。这个风格可以有更广泛的应用。一个很好的例子，Chris Coyier的CSS技巧文章：在小尺寸屏幕下将简单导航转换为下拉菜单。

保持设计简单，在任何尺寸下都容易被理解是导航设计的关键。用户必须能够快速了解如何加以有效的使用网站。

10、响应式设计将会演变

响应式设计目前还不是一个完美的解决方案；它是一个不断发展的解决过程中的一部分。随着技术和用户习惯的改变和新设备投放市场，网页使用和开发的规则都会被调整。

互联网用户已经开始使用各种设备浏览网站。不考虑浏览器尺寸，最流行的8个设备拥有6种不同的宽度：

• iPhone 4S，iPhone 5 – 640 像素

• iPad 1，iPad2??– 1024 像素

• iPad3 – 2048 像素

• Samsung Galaxy Note – 1280 像素

• Microsoft Surface – 1366 像素

• Google Nexus 7 – 2560 像素

  
  

当你采用响应式网页设计，它将你的网站更加直观，在不同设备上提供一致的体验，即使新的设备发布。

不同的设备仍然可以提供非常不同的经历，即使没有响应式设计（例如点击或缩放功能）。即使把大量时间花费在网站上，仍然取决于用户使用何种设备。需要考虑用户在不同设备上如何使用网站。虽然它还不是一个完美的解决方案，但是，响应式设计将继续发展。尽管目前响应式设计有其局限性，从现在它开始变得越来越重要。数据表明，用户使用其他设备访问网络的数量将持续增长。通过应用响应式设计，你可以保证网站在任何环境中都是可用的。

切图网（qietu.com）最早将psd to html服务模式带入国内，也是最早提供响应式布局服务的公司。

于初学者php程序员来说，其实函数参考"那部分不必全看，但是日期与时间、文件系统、其它基本扩展、Session、变量与类型 这几部分建议一定要翻一下，里面介绍了很多常用的函数和类。这些函数不必都记住，只要有个印象就行，以后用到时再回来翻，用的多了自然就记住了。先从留言本做起，再做个个人博客，然后再做个复杂点儿的CMS，或者小OA，所谓经验，其实就是解决问题的方法，从项目中不断思考，就能不断收获！

P.S：自学非常重要，实际项目经验也很重要。不要以为计算机基础不重要，学习计算机基础对学习编程语言非常有用。只要对自己狠一点，多下功夫，没有攻不破的东西。

php初级程序员如何规划学习路线：

第一重点：把LNMP搞熟练（核心是安装配置基本操作）

第二目标：能够完成基本的LNMP系统安装，简单配置维护；能够做基本的简单系统的PHP开发；能够在PHP中型系统中支持某个PHP功能模块的开发。

基本语法数组、字符串、数据库、XML、Socket、GD/ImageMgk图片处理等等；熟悉各种跟MySQL操作链接的api（mysql/mysqli/PDO)，知道各种编码问题的解决；知道常规熟练使用的PHP框架（ThinkPHP、Zendframework、Yii、Yaf等）；了解基本MVC的运行机制和为什么这么做，稍微知道不同的PHP框架之间的区别；能够快速学习一个MVC框架。能够知道开发工程中的文件目录组织，有基本的良好的代码结构和风格，能够完成小系统的开发和中型系统中某个模块的开发工作。

最紧要实战：

（2周）3个站（至少20个美工页面）psd to html 切制练习。

（1周）jquery实战演习

（1月）用zf框架，开发模块，达到灵活掌握

必须掌握的知识点：

数据库必须熟练掌握 mysql & sqlserver，同时必须熟练zendstdio的操作。

熟练进行phpmyadmin的操作。

adodb（数据库接口）+javascript+xml+ajax（异步JavaScript和XML）+jquery（JS框架），

熟悉OOP编程，学习thinkphp,zf框架，学习smarty模板引擎，pear （PHP扩展与应用库），prototype（设计模式）。

对apache也应该买本管理员手册好好看看。

同时大致了解一下linux等等。以及服务器管理等操作。

首先要清楚自己选择的方向：

第一：要静下心来

一般初级PHP程序员工作都比较浮躁，选择适合自己的学习方向和方式去着手。

第二：要有目标性，

做php编程，没有目标是不行的，以后是想做程序员，软件工程师，系统分析，项目经理。给自己定一个规矩向着这个目标一步一步的进前。

P.S：没目标是不行的！ 基础很重要，不要眼高手低！

其实作为一个PHP程序员有些是一定要求自己会的：

首先是前端工程师：

1. 基础：HTML教程, CSS教程 2. 进阶：Javascript，jQuery

3. 高级：AJAX 教程，JSON 教程，XML 教程

4. 框架扩展学习：Bootstrap 教程，jQuery UI 教程，jQuery EasyUI 教程，jQuery ，Mobile 教程

5. 调试工具：Firebug 教程

6. 开发工具：Dreamweaver，Notepad++，Photoshop

其次PHP工程师：

1. 基础：HTML教程，PHP 教程 2. 进阶：SQL 教程，MySQL 教程

3. 高级：正则表达式教程，Mongodb教程， AJAX 教程，JSON 教程，XML 教程， 4. 开发工具：Notepad++，phpMyAdmin，EasyEclipse for PHP

总结：其实精通无非就是在某个技术上用的精力多，花的时间长，做出的产品质量高。技术出身，至少先会一种编译型语言，一种解释型语言，再学一点脚本语言。无论是什么语言都是实现逻辑思维的一种手段而已。

P.S：php不需要啥经验，多写代码，多做项目，独立做完整个项目。想进大公司的话，就好好研究基础知识，学好数据结构跟算法（虽然很长时间然并卵）。然后这种事急不了，一步一脚印，慢慢积累就好了

个人建议：

想进小公司当全能打杂就不太需要理太过基础的东西了，前端、后端、服务器管理、手机端。说起来好像很屌的样子，但是碰到个啥问题还是很多时候在网上爬资料。从长远来看肯定是打好基础，走大公司发展之路更好，要精通就要多钻研；如果是多拿工资可以进小公司，不过就是需要各方面都会前端设计、后台开发、APP等等全方位的就没那么精通了。我有个习惯，就是很喜欢写方便自己工作的一些工具，一点一点积累，很有意思

P.S：想快速提高就是多做项目，研究优秀的开原项目或者框架代码，看牛人博客，无他，唯手熟尔。

更多精彩内容请关注 ? 微信公众号“houdunit”

看完不要跑记得出来吐吐槽！╰(￣▽￣)╮

面设计是一个很宏大的概念，就业方向非常广，比如网页设计、包装设计等等，因此需要需要大量的素材收集渠道。以下是康石石对自己常用网站的一些总结，在此之外，一些对大家有所帮助的书籍康石石也列入其中，为大家提供一个更多选择：

一、必备设计理论与软件基础

1. 设计理论书籍推荐

任何行业刚开始进入时，最重要的就是打好设计基础，而对于很多已经从业的设计师而言，回归到理论书籍上，其实可以为自己带来更多的设计思路：

1）史论类

• 《世界现代设计史》
• 《世界平面设计史》

2）设计师通则类

• 《写给大家看的设计书》
• 《设计中的设计》
• 《设计的觉醒》
• 《设计心理学》

3）平面基础类

• 《点线面》
• 《艺术·设计的平面构成》
• 《色彩构成》
• 《设计基础原理》
• 《美国视觉传达完全教程》
• 《版式设计原理》

2. 软件基础

工欲善其事，必先利其器——先把软件工具学好，不然你有再好的想法都无法实现。除了要掌握PS、AI等设计软件，大家还可以找到各种资源，包括：教程网站、笔刷、动作、字体、滤镜等插件来方便我们的设计。

• 教程网站

1）envatotuts +是一个高品质的软件教程网站，内含有ps、ai、id等主流设计软件教程，而且支持语言切换：

https://design.tutsplus.com

2）站酷是目前国内最知名的平面设计教程网站之一：

http://www.zcool.com.cn/

• 插件

1）Brusheezy为广大平面设计师提供了大量的免费Photoshop笔刷插件资源：

https://www.brusheezy.com/

当然，大家也可以在这里找到很多可供下载的动作插件：

https://www.brusheezy.com/actions

2）ON1 Effects为Photoshop增加了Instagram风格的滤镜功能。包括像“时髦”、“电影”等常用滤镜，同时还提供了大量可以增强图像色彩和色调的滤镜资源。

https://www.on1.com/products/effects10/

3）作为设计师，电脑里自带的字体当然是远远不够的，DaFont拥有全球最大的免费字体库之一，里面会有很多你需要的字体素材：

https://www.dafont.com/

二、 平面设计专业技能

1. Logo设计

logo是企业形象或者产品形象的符号化体现。logo最重要的一个功能就是识别性，便于消费群体或受众将不同企业的同类产品，或同一行业的不同企业区别开来。

1）BrandNew收录了世界各行各业的顶尖logo设计，并给出了专业的设计点评：

http://www.underconsideration.com/brandnew/

2）logoinspirations是一个标志策划平台，他们的Instagram页面拥有570K +粉丝：

https://logoinspirations.co/

2. 字体设计

虽然现在有很多字体可以下载，但是不乏一些是受到版权保护的，不能随随便便的使用。而且为了有针对性地强化大众对企业或对商品的印象，我们往往需要亲自进行字体设计。

1）想知道20世纪70年代十大专辑封面字体或是十大怪诞字体吗，来看typewolf就对了。

https://www.typewolf.com/recommendations

2）《西文字体设计方法核心课程》让更多的未来设计师可以打破传统认知框架，真正学习到字体设计规则，探究字体的无限可能：

https://ke.qq.com/course/255626

3）字体设计书籍推荐：

• 《The Elements of Typographic Style》
• 《Helvetica》
• 《西文字体的故事》
• 《中国字体设计人——一字一生》

3. 色彩搭配

除了要了解色相、明度、饱和度等基础概念，学会利用不同的色彩搭配，去给人营造特定的氛围需求也是十分重要的，配色不是玄学而是一门科学。

1）网页设计师配色最佳之选，Adobe的官方配色网站：

http://color.adobe.com/zh/create/color-wheel/

2）找不到完美的配色方案？在Coolors，你可以探索由其用户群所生产的数千个配色方案：

https://coolors.co/

3）当你将鼠标在屏幕上移动到您喜欢的颜色时，您的整个浏览器窗口实际上就像一个颜色选择器。网站的极简主义设计方法令人耳目一新：

https://color.hailpixel.com/

4. 图形素材

1）Pixeden有大量高品质的图形资源，psd模型和矢量图标/图形应有尽有，这些资源可供个人和商业用途的免费使用：

https://www.pixeden.com/

2）Freebiesbug拥有免费的高品质图形设计资源，如PSD文件、HTML网站模板、字体和其他很酷的东西：

https://freebiesbug.com/

3）想要试验一些模型？Graphic Burger为你提供从名片到路牌等各种模板及背景纹理。但它只有部分免费资源，通过会员账户可以访问并下载全部资源：

https://graphicburger.com/

5. Icon素材

1）这个网站拥有超过68,000个免费平面图标资源，这里几乎有你所有需要的icon：

https://icons8.com/

2）Icons for everying可让你访问超过100,000个各种主题的图标：

https://thenounproject.com/

3）又是一个庞大的icon库资源网站推荐：

https://www.iconfinder.com/

6. 版式设计

版式设计通俗点说就是把画面中的元素（图形、图像、文字、色彩）合理安排起来的一种手段。我们得考虑构图、平衡、点线面、主次、层次等这些因素。让受众更加快速、直观、明显的捕捉到我们画面需要传递的主题和信息。

对于版式设计，多看就会对你有很大的帮助，下面这些案例网站的版式设计令人叫绝：

1.http://mambomambo.ca/

2.http://vincefrost.com/

3.http://www.anotherpony.com/

4.http://hwaiw.de/

5.http://brightmedia.pl/?lang=en&site=attitude

6.http://thisisarc.com/what-we-do

7.http://kylereadsays.com/

8.https://index-std.com/

9.http://www.paulineosmont.com/

10.http://taostudiodesign.com/

版式设计书籍推荐：

《版式设计原理》

《版式设计原理与应用》

《形式至上》

《网格设计》

7. 图片素材

1）Free Stock Textures，一个专业的纹理素材库：

https://freestocktextures.com/

2）被描述为“拥有最好的免费照片的地方”的网站，Pexels每天新增五张新的高品质照片 ，无版权并可用于商业用途：

https://www.pexels.com/

3）另一个很棒的网站Unsplash，每10天添加10张新照片。从肖像、风景到建筑，这将成为设计师必不可少的图片素材网站：

https://unsplash.com/

8. 手绘教程

数码绘画——数位板“入门”核心技法：

https://ke.qq.com/course/231029

三、 设计灵感

设计灵感无处不在，每一次外出呼吸新鲜空气，走过一条宁静的小路，甚至看到一个陌生的面孔，都有可能邂逅灵感，当然更高效的办法是看看别人的设计，这里我们就不再推荐pinerest、behance这样的大名鼎鼎的网站了。

1. 网站推荐

1）Creative Bloq为创意人士提供每日灵感和新的设计思维：

https://www.creativebloq.com/

2）Dribbble一个面向创作家、艺术工作者、设计师等人群，D站有一个非常棒的功能叫bucket，大家可以把自己看到的好作品按照喜好分类放进不同的bucket里：

https://www.dribbble.com

3）Niice是一个私人灵感空间，该网站旨在帮助你激发下一个重大创意：

https://niice.co/

2. 博客与微博

1）nuschool的博客不仅布局醒目，而且对各行各业的设计师都有着重要的价值。通过挖掘设计业务的各个方面，你将学习如何让自己的设计更加出色。

http://thenuschool.com/nublog/

2）知名设计美学博主，微博签约自媒体——你丫才美工，提供众多设计干货技法及资源。

https://weibo.com/honghaier555?is_hot=1

3. 书籍推荐

优质的设计书籍可以启迪新的思路、理论、创意和观点。在下面这份书单里，无论你的兴趣如何，相信都会有能启迪你灵感和让你觉得有趣的内容。

• 《食之以目》
• 《视废为宝》
• 《平面设计调查》
• 《表面之下》
• 《设计师的艺术》
• 《查尔斯和唯·伊姆斯夫妇的世界》
• 《啥都有》