[关闭]
@GivenCui 2017-03-24T20:41:57.000000Z 字数 13255 阅读 1263

所向披靡的响应式开发

响应式 Bootstrap

收获

  1. Resolution Test (测试chrome响应式插件)
  2. 用户代理字符串UA navigator.userAgent (console中测试)
  3. 建议用虚拟机进行IE的测试 虚拟机用Virtual Box ievms
  4. Xcode(苹果机)上有苹果手机的虚拟机
  5. 安装虚拟机推荐 genymotion
  6. 处理兼容性的方法

前期准备

viewport须知

有用的文件

humans.txt

humans规范
参考github的humans.txt here

robots.txt

允许爬虫爬取的配置

  1. Use-agent: *
  2. Disallow: /admin/

.editorconfig

配置说明
WebStorm直接支持, sublime可安装插件

  1. # editorconfig.org
  3. root = true
  5. [*]
  6. charset = utf-8
  7. indent_size = 2
  8. indent_style = space
  9. insert_final_newline = true
  10. trim_trailing_whitespace = true
  12. [*.md]
  13. trim_trailing_whitespace = false

.gitignore

git的忽略文件

  1. *~
  2. .DS_Store
  4. .idea
  6. node_modules
  7. dist

CHANGELOG.md

改动说明文件

README.md

项目说明文件

LICENSE.txt

版权等, 参考git上大的项目

html部分

meta标签

  1. <meta charset="utf-8" />
  2. <title>xxx</title>
  3. <meta name="description" content="" />
  4. <meta name="keywords" content="" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"  />    // minimal-ui IOS系统隐藏操作栏
  6. <meta name="HandheldFriendly" content="true">
  7. <meta name="MobileOptimized" content="width">
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  10. <meta name="apple-mobile-web-app-title" content="海涛旅游" />
  11. <meta name="applicable-device" content="mobile">
  12. <meta name="format-detection" content="telephone=no" />
  13. <meta name="apple-itunes-app" content="app-id=914881804, app-argument=https://itunes.apple.com/cn/app/hai-tao-lu-you/id914881804?mt=8"> 
  14. <meta name="screen-orientation" content="portrait">
  15. <meta name="x5-orientation" content="portrait">
  16. <meta name="full-screen" content="yes">
  17. <meta name="x5-fullscreen" content="true">
  18. <meta name="browsermode" content="application">
  19. <meta name="x5-page-mode" content="app">
  20. <meta name="msapplication-tap-highlight" content="no">

IE兼容处理

IE8不支持H5标签和媒体查询 (HTML5 elements and media queries)

1.基本写法

  1. <!--[if lt/lte/gt/gte IE 9]>      // IE与版本号之间空格
  2.     lt    <
  3.     lte   <=
  4.     gt    >
  5.     gte   >=
  6. <![endif]-->

2.用法

  1. <!--[if lt IE9]>
  2. <div class="browser_upgrade">您的浏览器版本太老, 为了正常使用功能请点击 <a href="http://browsehappy.com">这里</a>更新您的浏览器!!!</div>
  3. <![endif]-->

3.Boostrap中应用

  1. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  2. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  3. <!--[if lt IE 9]>
  4.     <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  5.     <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  6. <![endif]-->

H5标签

H5规范中, 大纲outliner中, section和artical最好有标题,nav可以没有标题, 没有标题的section用div替换

  1. <header></header>  // 头
  2. <footer></footer>  // 尾
  3. <nav></nav>     // 导航, 可以没有标题
  4. <article></article> // 最好有h标题,独立完整,有内容,语义更明确, 例如博客中的文章, 帖子
  5. <section></section>  //最好有h标题,范围广泛, 表示区块, 出现在文档大纲中, 比如广告, 联系方式, 文章中的章节等, 拿不准就用div

id,class命名规范

  1. id 驼峰命名
  3. class 用-连接,  更进一步参考 BEM(元素-块-修饰符),见css进阶,js-用于交互

图片引入的选择

  1. <img src="" alt="">
  2. 1. logo类
  3. 2. 手机中响应式图片
  4. 3. 商品展示列表中的图片
  5. 4. 后台动态添加的图片, 方便切换src
  7. background:url();
  8. 1. 装饰性的

PC端样式

CSS resets vs Normalize.css

推荐用Normalize.css
使用完整Normalize.css, 然后再main.css中覆盖, 方便后期升级
@github
normalize.css 中文版v2.1.2
CSS Normalize文件配置示例

  1. css: 
  2. 1. 让所有标签的样式看起来都一样
  3. 2. 去除了有用的样式
  5. Normalize.css
  7. 1. 保留有用的默认值，不同于许多 CSS 的重置
  8. 2. 标准化的样式，适用范围广的元素。
  9. 3. 纠正错误和常见的浏览器的不一致性。
  10. 4. 一些细微的改进，提高了易用性。
  11. 5. 使用详细的注释来解释代码。

打印样式

  1. /* ==============
  2.     打印样式
  3.    ============== */
  5. @media print {
  6.   *,
  7.   *:before,
  8.   *:after {
  9.     background: transparent !important;
  10.     color: #000!important;
  11.     box-shadow: none!important;
  12.     text-shadow: none!important;
  13.   }
  15.   a,
  16.   a:visited {
  17.     text-decoration: underline;
  18.   }
  20.   a[href]:after {
  21.     content: "(" attr(href) ")";
  22.   }
  23.   abbr[title]:after {
  24.     content: "(" attr(title) ")";
  25.   }
  27.   /*
  28.    *使用#和javascript:;的超链接不打印
  29.    */
  30.   a[href^="#"]:after,
  31.   a[href^="javascript:"]:after{
  32.     content:"";
  33.   }
  35.   /* 避免内部插入分页符 */
  36.   pre,
  37.   blockquote {
  38.     border:1px solid #999;
  39.     page-break-inside: avoid; /* Opera浏览器用 */
  40.   }
  42.   thead {
  43.     display: table-header-group;
  44.   }
  46.   tr,img {
  47.     page-break-inside: avoid;
  48.   }
  50.   img {
  51.     max-width: 100%!important;
  52.   }
  54.   /* 标题下文字不超过3行, 标题在下一页; 超过3行标题在当前页  */
  55.   p,
  56.   h2,
  57.   h3 {
  58.     orphans : 3; /* 当元素内部发生分页时, 页面底部保留的最小行数 */
  59.     widows: 3;   /* 当元素内部发生分页时, 页面顶部保留的最小行数 */
  60.   }
  61.   /* 禁止在标题后直接插入分页符 */
  62.   h2,
  63.   h3 {
  64.     page-break-after: avoid;
  65.   }
  67. }

main.css

工具样式

  1. /* ==========
  2.     工具样式 (仿 Boostrap)
  3.    ========== */
  4. .center-block {
  5.   display: block;
  6.   margin-right: auto;
  7.   margin-left: auto;
  8. }
  10. .pull-right {
  11.   float: right !important;
  12. }
  14. .pull-left {
  15.   float: left !important;
  16. }
  18. .text-right {
  19.   text-align: right !important;
  20. }
  22. .hide {
  23.   display: none !important;
  24. }
  26. .show {
  27.   display: block !important;
  28. }
  30. .invisible {
  31.   visibility: hidden;
  32. }
  34. .text-hide {
  35.   font: 0/0 a; /* a是个最短的字体名字, 客户端上不一定有, 为了符合必须写字体名称 */
  36.   color: transparent;
  37.   text-shadow: none;
  38.   background-color: transparent;
  39.   border: 0;
  40. }

清除浮动与BFC

BFC: (块格式化上下文, 触发BFC即可清除浮动)

  1. 能触发BFC的属性: 
  2. float:*;
  3. overflow:hidden/auto;
  4. display:table;
  5. display:table-cell;
  6. display:table-caption;
  7. display:inline-block;
  8. position:fixed;
  9. position:absolute;

推荐的clearfix

  1. /* :before是为了浏览器顶部空白崩溃,防止margin的叠加 */
  2. .clearfix:before, 
  3. .clearfix:after{
  4.   content:" ";
  5.   display: table;
  6. }
  7. .clearfix:after{
  8.   clear:both;
  9. }
  10. /* IE6/7 */
  11. .clearfix{
  12.   zoom:1;
  13. }

a标签的设置

参照lvha (:link, :visited, :hover, :active)
实际设置 a, a:hover,a:active

  1. a {
  2.   color: #666;
  3.   text-decoration: none;
  4. }
  6. a:hover, a:active {
  7.   color: #0ae;
  8.   text-decoration: underline;
  9. }

chrome浏览器中文字号12px下限问题

  1. /* 问题: 针对中文line-height:3rem (是36px而不是30px) */
  2. html{
  3.     font-size:62.5%;  (10px < 12px, chrome最小支持12px, 所以3rem是36px, 而不是我们想要的30px)
  4. }
  6. /* 解决 */
  7. html{
  8.     font-size:125%;  (20px)
  9. }

相邻选择符 E+F用法

  1. /* 选中除第一个之外的li 支持IE7+ */
  2. header .top li+li {
  3.   border-left:1px solid #999;
  4.   margin-left:-3px;
  5. }

移动端样式

媒体查询

chrome调试工具的使用

1.show media queries和 show rulers
2. 可以直接输入宽度, 也可以↑↓(1px步距)和ctrl+↑↓(10px步距)

图片.png-67.3kB

设计思路

  1. 两种设计理念

    　渐进增强: 移动端到PC端, 移动优先 (添加元素)
    优雅降级: PC端到移动端, 新版浏览器 --> 老浏览器

  2. 由大到小和由小到大的媒体查询是不一样的

由大到小的方法

  1. 方案: 书写在要改变元素的下面
  3. /* 最大屏幕的样式 */
  4. /* px为断点单位 */
  5. @media only screen and (max-width: 800px){
  6.     /* 中等屏幕 样式 */
  7. }
  9. @media only screen and (min-width: 481px) and (max-width: 800px){
  10.     /* Tablet 样式 */
  11. }
  12. @media only screen and (max-width: 480px){
  13.     /* mobile 样式 */
  14. }
  16. /* rem为断点单位,1rem = 16px (浏览器的默认设置) */
  18. @media only screen and (max-width: 50rem { /* 800/16px=50rem */
  19.     /* 中等屏幕 样式 */
  20. }
  22. @media only screen and (min-width: 30.0625rem) and (max-width: 50rem){
  23.     /* Tablet 样式 */
  24. }
  25. @media only screen and (max-width: 30rem){
  26.     /* mobile 样式 */
  27. }

媒体查询断点的单位选择

放缩是对字体的放缩, 相当于改变了html的font-size值
本例采用相对单位作为断点单位
总结: 选择px或em (代替rem)

  1. 断点单位可设置px或rem或em
  2. 1. px
  3.   根据设备宽度有功能的区分时必须用px, 
  4. eg: 在pad下没有购买按钮, 在iphone下有购买按钮 (功能)
  6. 2. rem (同em)
  7.  媒体查询仅改变样式时, rem能让用户体验变得更好
  9. 3. em 兼容性更好, 其余同rem, 因为都是相对浏览器的默认字体大小16px;

媒体查询单位为rem的坑 (用em代替)

媒体查询相对不是html的font-size, 而是浏览器的默认字体大小16px;
最终用em代替, 兼容性更好

  1. /* 80rem <==> 80 * 16px = 1280px  (不是800px) */
  2. @media screen and (max-width: 80rem) {
  4. }

css3选择器的总结

css参考手册

兄弟选择器的妙用

  1. /* css */
  2. ul li + li {
  3.     /* 第一个li被排除 */
  4. }
  5. /* html */
  6.  <ul>
  7.   <li></li>
  8.   <li></li>
  9.   <li></li>
  10.   <li></li>
  11.   <li></li>
  12. </ul>

属性选择器

属性值如果符合标准命名可以省略"", 否则不能省略

  1. /* 属性选择器 */
  2. E[attr]
  3. E[attr="value"]
  4. E[attr*="value"]    // 包含..
  5. /* 以下不常用 */
  6. E[attr^="value"]    // 以..开头
  7. E[attr$="value"]    // 以..结尾
  8. E[attr~="value"]    // 包含..,且..是以空格隔开的
  9. E[attr|="value"]    // 以..为属性 或 ..-开头的   
  11. ---
  12. Eg.
  14. a[herf^="http://"]      /* 双引号不能省 */
  15. img[src$=".png"]
  16. a[title~="hello"] a[title~="world"] 都可选择 <a title="hello world"></a>
  17. div[class|="a"]   选择 <div class="a"> 或 <div class="a-**">

伪类和伪元素

  1. 1.常用   :link, :visited, :hover, :active, :focus
  2. 2.表单   :enabled, :disabled, checked
  3. 3. 
  4.     /* p:nth-child(2) 1. p类型, 第2个索引上的 */
  5.     :first-child, :last-child
  6.     :nth-child(even/odd/2n+1/2n), :nth-last-child()         /* 表达式值从1开始 */
  8.     /* p:nth-of-type(2) 1. p类型, 在该类型中的第2个 */
  9.     :first-of-type, :last-of-type
  10.     :nth-of-type(), :nth-last-of-type()
  12.     :only-child      // 只有1个元素, 且元素类型为指定类型
  13.     :only-of-type    // 可以有多个元素, 但只有一个该类型元素
  15.     :empty     //可以有注释, 不包含文本节点(包括空格)和元素节点 (注释不算文本节点)
  16.     :not()
  18.     :first-line
  19.     :first-letter
  21.     :before
  22.     :after
  24.     // 在新标准中要求伪元素用::, ::before, ::after
  25.     // 但是:before和:after在css2.0就实现了
  26.     // 最终为了兼容性用:before和:after
  27.     // 其余的伪元素比如::selection必须写::
  28.     ---
  30.     <div>
  31.         <p></p>
  32.         <h2></h2>
  33.         <p></p>  /* 选中 */
  34.         <p></p>
  35.         <p></p>
  36.     </div>
  38.     /* 此时下面两种写法等价 */
  39.     div p:nth-child(3) {}
  40.     div p:nth-of-type(2) {}

响应式图片

  1. 图片的排版和布局自适应
  2. 根据设备的大小加载不同的图片

1. js或服务端 (命令式的实现)

(a) js中设置

原理: 根据window的resize事件改编src的路径

  1. $(function () {
  2.   function makeImageResponsive() {
  3.     var width = $(window).width();
  4.     var img = $('.content img');
  5.     if (width <= 480) {
  6.       img.attr('src', 'img/480.png');
  7.     } else if (width <= 800) {
  8.       img.attr('src', 'img/800.png');
  9.     } else {
  10.       img.attr('src', 'img/1600.png');
  11.     }
  12.   }
  14.   $(window).on('resize load', makeImageResponsive);
  15. });
  17.   /*
  18.   原生: 
  19.         window.onresize = function(){};
  20.         window.onload = function(){};
  21.    */

(b) 服务器端设置

设备信息写入cookie, 获取图片时在服务器端返回响应图片

2. srcset和sizes (声明式的实现)

MDN
响应式图片srcset全新释义sizes属性w描述符

-> srcset是img的特性, 支持该特性的浏览器会自动根据屏幕宽度改变
-> sizes是阈值的参照, 默认100vw(100% viewport width),而不是父级的尺寸
-> 如果浏览器中缓存过最大尺寸图片, 则任何尺寸下都用该图
-> radio放缩比为2时, 响应断点不是简单的图片宽度/放缩比, 而比该值大,浏览器的内部实现逻辑综合考虑了radio,网速,设备等因素, 所以不用理会

[注意]: srcset有新老两种规范, 新规范中没有w修饰符 

  1. <img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w" > <!-- 默认sizes是100vw (100% of viewport width) -->
  3. <!-- 媒体查询大于800px时, size是800px;  其余时100% -->
  4. <img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"  sizes="(min-width:800px) 800px, 100vw"> 
  6. <!-- 媒体查询大于800px时, size是cal(100vw - 30px);  其余时100% -->
  7. <img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"  sizes="(min-width:800px) cal(100vw - 30px), 100vw">

3. picture

如何使用 HTML5 的picture元素处理响应式图片
MDN

  1. <!-- 简单demo -->
  2. <picture>
  3.     <source srcset="smaller.jpg" media="(max-width: 768px)">
  4.     <source srcset="default.jpg">
  5.     <img srcset="default.jpg" alt="My default image">
  6. </picture>
  8. <!-- 复杂demo -->
  9. <picture>
  10.     <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
  11.     <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
  12.     <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
  13.     <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
  14.     <img srcset="default_landscape.jpg" alt="My default image">
  15. </picture>

4. svg(支持矢量图)

5. polyfill (浏览器兼容性的"腻子")

github
HOME

技巧总结

inline巧用伪类换行

巧妙换行

  1.   /* 为了清除浮动, 达到换行的效果 */
  2.   .product h2 em {
  3.     display: inline;  /* 属性值为inline-block则不换行 */
  4.   }
  5.   .product h2 em:first-child:before {
  6.     content: " ";
  7.     display: table;
  8.   }

兼容性的处理方法

Browser hacks

Browser Hacks

Polyfill或shiv

通过旧浏览器的API来模拟新浏览器功能的兼容库

html5shiv

html5shiv
让IE6-9,Safari 4.x (and iPhone 3.x), and Firefox 3.x.等支持html标签(header,nav,footer,section等)

  1. <!--[if lt IE 9]>
  2.     <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
  3. <![endif]-->

respond.js (polyfill)

respond
for min/max-width CSS3 Media Queries (for IE 6-8, and more)

  1. /* 仅实现支持一下css3媒体查询功能 */ 
  2. @media screen and (min-width: 480px) and (max-width: 800px) {
  3.     /** ... **/
  4. }

modernizr

  1. Modernizr
  2. Modernizr.js入门教程
  3. It tells you what HTML,CSS and JavaScript features the user's browser has to offer.
  4. 官网可以定制检测那些属性
  5. 防御型编程, 主动检测属性的支持

Modernizr帮助我们检测浏览器是否实现了某个feature，如果实现了那么开发人员就可以充分利用这个feature做一些工作，反之没有实现开发人员也好提供一个fallback。所以，我们要明白的是Modernizr只是帮我们检测feature是否被支持，它并不能够给浏览器添加那些本来不支持的feature。

CSS方面

当我们引入了Modernizr.js类库后， <html> 标签的class属性就会被相应的赋值，以显示浏览器是否支持某类CSS属性。以SVG举例 : 如果浏览器不支持SVG特性，那么在 <html> 标签中就会出现 no-svg 类，我们可以做一些fallback的工作;如果支持，则生成svg类。

  1. .svg .logo{
  2.     bgackground-image:url(img/logo.svg);
  3. }
  4. .no-svg .logo{
  5.     bgackground-image:url(img/logo.png);    /* fallback */
  6. }

JS方面

详见官方文档

Can I use

HOME

后期工作

BrowserSync多设备调试

BrowerSync

命令行中

  1. npm install browser-sync -g全局安装
  2. browser-sync start --server "src" --files "src"

gulp中

npm用yarn代替

npm与yarn命令对比
yarn-CLI
yarn依赖的类型

  1. npm install -g yarn

http-server

node.js的包
github

打包发布

压缩,合并,增加版本号

打包工具

  1. grunt 自动化构建工具
  2. gulp 自动化构建工具
  3. Webpack 静态资源打包工具

gulp

  1. HOME
  2. gulp插件查询
  3. www.npmjs.com/search?q=查询内容
  4. demo

安装包和依赖

  1. yarn init
  2. /* yarn不用安装全局gulp */
  3. yarn add gulp --dev/-D   // <=> npm install gulp --save-dev
  4. yarn add gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso -D
  5. cd.>gulpfile.js          // 创建空gulpfile.js

gulpfile.js

  1. /* gulpfile.js */
  2. var gulp = require('gulp');
  3. var rev = require('gulp-rev');  // 改变哈希码更新版本, 解决客户端浏览器缓存问题而引用旧文件(index.html排除)
  4. var revReplace = require('gulp-rev-replace');  // 更新html中的引用
  5. var useref = require('gulp-useref');  // html写注释来配置css,js的合并
  6. var filter = require('gulp-filter');  // 过滤器: 1.筛选 2.恢复
  7. var uglify = require('gulp-uglify');  // 压缩js插件
  8. var csso = require('gulp-csso');      // 压缩css插件
  10. gulp.task('default', function () {
  11.   var jsFilter = filter('**/*.js',{restore: true});
  12.   var cssFilter = filter('**/*.css',{restore:true});
  13.   var indexHtmlFilter = filter(['**/*','!**/index.html'],{restore:true});
  15. /*
  16.     流程: 
  17.     gulp.src('src/index.html')
  18.     --useref()--> 分析html中的注释选出要合并的css,js 
  19.     --jsFilter--> 过滤出js 
  20.     --uglify()--> 压缩js
  21.     --jsFilter.restore--> 恢复js
  22.     --cssFilter--> 过滤出css
  23.     --csso()--> 压缩css
  24.     --cssFilter.restore--> 恢复css
  25.     --indexHtmlFilter--> 排除index.html
  26.     --rev()-->  css,js哈希码重命名
  27.     --indexHtmlFilter.restore--> 恢复index.html
  28.     --revReplace()--> 更新html引用链接
  29.     --gulp.dest()--> 输出
  30. */
  31.   return gulp.src('src/index.html')
  32.     .pipe(useref())
  33.     .pipe(jsFilter)
  34.     .pipe(uglify())
  35.     .pipe(jsFilter.restore)
  36.     .pipe(cssFilter)
  37.     .pipe(csso())
  38.     .pipe(cssFilter.restore)
  39.     .pipe(indexHtmlFilter)
  40.     .pipe(rev())
  41.     .pipe(indexHtmlFilter.restore)
  42.     .pipe(revReplace())
  43.     .pipe(gulp.dest('dist'));
  44. });

gulp插件说明

gulp-useref

合并css,js文件

  1. <html>
  2. <head>
  3.     <!-- build:css css/combined.css -->
  4.     <link href="css/one.css" rel="stylesheet">
  5.     <link href="css/two.css" rel="stylesheet">
  6.     <!-- endbuild -->
  7. </head>
  8. <body>
  9.     <!-- build:js scripts/combined.js -->
  10.     <script type="text/javascript" src="scripts/one.js"></script> 
  11.     <script type="text/javascript" src="scripts/two.js"></script> 
  12.     <!-- endbuild -->
  13. </body>
  14. </html>

压缩

gulp-uglify, gulp-csso

  1. /*! ....*/  这种注释不会被压缩, 其余注释都会移除

哈希字符串版本号

gulp-rev
原理: 根据文件内容通过算法计算出哈希值, 相同内容文件对应同一个哈希值 (牛逼!)
验证: 改动一处编译, 再改回来编译
tips: 老版本文件应保留一段时间再删除, 防止有正在访问网站的用户体验不好

webpack

webpack更适合模块化开发(require.js/sea.js等),有时webpack和gulp结合使用
详细内容见webpack教程

流行的响应式框架

优点: 适合个人/创业团队, 稳定
缺点: 体积大,而重; 不好修改; 样式类似, 不灵活
适用场景: 后端管理系统; demo; 快速第一版搭建

Bootstrap

中文 Home
Eng Home

Foundation

中文 Home
Eng Home

文档很详细

Semantic UI

中文 Home
Eng Home

语义化,自然语法的方式
样式很漂亮,更丰富

  1. <div class="ui three buttons">
  2.   <button class="ui active button">第一个</button>
  3.   <button class="ui button">第二个</button>
  4.   <button class="ui button">第三个</button>
  5. </div>

PureCSS

Eng Home
中文 Home

产品经理和原型设计

  1. 纸和笔
  2. axure RP 和 axure RP中文网 (收费)(快)
  3. Sketch (苹果) (原型/UI/矢量图)

交互设计

  1. flinto (Mac)
  2. principle (Mac) 牛逼
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注