迪麦互动每周六会进行技术/设计的分享会，这次分享的内容是关于前端切图，以下是本次分享会的内容：

分享会现场1

分享会现场2

1.什么是前端？

我们通常所说的「前端」，一般是指web前端，可以理解为网页的界面样式和视觉呈现。

所以，前端开发则是视觉设计的代码实现。

2.前端开发语言

html/css/javascript/html5/css3

有些同事拿到设计图之后切图速度奇快，页面100%的还原简直完美，但是当功能修改或者后期进行维护的时候发现，页面结构混乱,页面臃肿,可维护性差，这样的前端不是一个好前端。

下面来说说我是怎么切图的（大神勿喷），分为以下几步：

一.  从设计师那里（或者自己设计好）拿到网页的设计稿:

二.  找出整个网站样式重复的元素——如1级标题、2级标题、行高间距等

三.  写HTML代码

四.  写CSS代码，定义元素的样式（比如字体大小，div的高度或者宽度等等）

五.  保存代码，在浏览器中打开，检查和设计稿的差距，微调整代码，以达到设计稿的视觉要求

六.  重复4-6步直到100%还原设计稿

前端切图肯定会碰到各种奇葩的问题，下面我来说说切图的时候的要注意一些细节：

1. 网页设计的最小字体为12px

   谷歌或者360浏览器等不支持小于12px的字体，可识别的最小字号为12px，所以12px以下全会强制转成12px,而且网页开发基本不用12px以下字号。

  当然ie或者火狐浏览器等支持小于12px的字号，但是字太小，看得眼瞎。

2.网页设计的字体最好为偶数，不常用奇数.

   当然pc端使用奇数的也有例子，知乎就是全局字体使用的15px字体。

   移动端在选用字体大小的时候一定要选择偶数的字号，因为在开发界面的时候，  字号大小换算是要除以二的。

3.图片比例问题

   图片的宽高定为偶数，这样方便开发人员去适配，确保网站随着屏幕和设备变化的时候，图片的展示不会在页面布局的伸缩变化过程中变得奇怪和失真。

4.移动端页面使用字体的思考

   一直不知道手机端用的什么字体，只是觉得类似雅黑，直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题。

    开始接触手机项目，接到PSD稿后，发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计，于是我写页面的时候也定义 font-family 为微软雅黑，后来发到线上后，发现页面的字体不是微软雅黑。

后面才知道手机系统 ios、android 等是不支持微软雅黑字体

以下是各个系统的字体标准:

 Ios系统

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

Android 系统

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

无微软雅黑字体

Winphone 系统

 默认中文字体是Dengxian(方正等线体)

 默认英文和数字字体是Segoe

 无微软雅黑字体

结论

1.  各个手机系统有自己的默认字体，且都不支持微软雅黑

2.  如无特殊需求，手机端无需定义中文字体，使用系统默认

3.  英文字体和数字字体可使用 Helvetica ，三种系统都支持

我在移动端写代码的时候只需要这样就可以了body {font-family:Helvetica;}

什么是响应式设计？       

    我理解的响应式设计就是页面会智能地根据用户行为以及使用的设备环境进行相对应的布局，如下图

响应式网页设计的优势

   1.用户体验友好，降低网站跳出率（高端大气，动感炫酷）

   2.节省设计开发成本（电脑端与iPad基本可以共用一套设计效果图，手机端重新设计一套就可以）

   3.搜索引擎的偏爱，利于seo的优化

响应式网页设计的劣势

    1.对老版IE浏览器兼容性不友好

    2.加载变慢（会下载一些没有必要的css或者js,但不是一个大问题 ）

    3.局限性，对于响应式，局限性较大，不适合一些大型的门户网或者电商网站, 一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度。

不同屏幕上的页面,前端是如何来做适配的？

    下面参考一下Bootstrap中文网的栅格系统是怎么来做的, 通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

  /* 超小屏幕（手机，小于 768px） */ 

   没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的*/

  /* 小屏幕（平板，大于等于 768px） */

   @media (min-width: @screen-sm-min) { ... }

  /* 中等屏幕（桌面显示器，大于等于 992px） */

   @media (min-width: @screen-md-min) { ... }

   /* 大屏幕（大桌面显示器，大于等于 1200px） */

   @media (min-width: @screen-lg-min) { ... }

   有了这些代码，相信我们已经对整个项目成熟在胸。

  总之，切图，不解释！

最后声明，本文由迪麦互动前端开发-Gavin原创撰稿，转载请注明出处，违者必究。