07 2016 档案
摘要：Sass中的Map长什么样 Sass 的 map 常常被称为数据地图，也有人称其为数组，因为他总是以 key:value 成对的出现， Sass 的 map 长得与 JSON 极其相似。 json: Sass中的map 如何定义map 首先有一个类似于 Sass 的变量一样，用个 $ 加上命名空间来
阅读全文
摘要：字符串函数 To-upper-case() 函数将字符串小写字母转换成大写字母 To-lower-case() 函数 与 To-upper-case() 刚好相反，将字符串转换成小写字母 数字函数 Sass 中的数字函数提要针对数字方面提供一系列的函数功能： percentage($value)：将
阅读全文
摘要：为sublime text 添加LESS语法高亮 功能：LESS高亮插件 下载 https://packagecontrol.io/packages/LESS 简介：用LESS的同学都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们 使用：打开.less文件或者设置为less
阅读全文
摘要：一、@if 指令： @if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。 编译出来的CSS: 二、@for 循环 在
阅读全文
摘要：初学者都常常纠结于这个问题“什么时候用混合宏，什么时候用继承，什么时候使用占位符？”其实他们各有各的优点与缺点，先来看看他们使用效果： a) Sass 中的混合宏使用 编译出来的 CSS 见右侧结果窗口。 总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同
阅读全文
摘要：常常有人会问，使用 Sass 进行开发，那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢？ 那么这里告诉大家，在项目中还是引用“.css”文件，Sass 只不过是做为一个预处理工具，提前帮你做事情，只有你需要时候，他才有攻效。 这样一来，也就有了这章需要介绍的内容—— Sa
阅读全文
摘要：gulp是基于流的自动化构建工具官方网址：http://www.gulpjs.com.cn/ 一、安装需要的模块 1、新建package.json,输入下面的内容 2、命令npm install 二、配置gulp 插件安装完毕后，我们需要新建一个gulpfile.js文件来指定gulp需要为我们完成
阅读全文
摘要：1切换到root用户[linux@localhost ~]$ su root密码：[root@localhost ~]# 2查看/etc/sudoers文件权限，如果只读权限，修改为可写权限 [root@localhost ~]# ll /etc/sudoers-r--r . 1 root root
阅读全文
摘要：你可以通过运行以下命令。 现在可以使用yum命令安装Node.js了。 因为在开发过程中我需要管理节点包，我还要安装新公共管理的软件包管理器，使用以下命令。
阅读全文
摘要：安装 Node.js 和 npm 自行百度吧，我 Node.js 安装好久了, 最好还是看官方文档 。 安装 Yeoman 我这里很多时候都需要使用 sudo 身份运行 。 windows用户无需输入 sudo 直接输入 npm install -g yo 下面的也是同样不需要输入 sudo 检查是
阅读全文
摘要：本文假设你之前没有用过任何任务脚本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其实很简单，我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。 第一步：安装Node 首先，最基本也最重要的是，我们需要搭建node环境。访问http://nodejs.
阅读全文
摘要：gulp 真正“流程”化工具 我记得实习刚刚进公司看到grunt，还是有点蒙，之前一直是本地开发，游览器F5，没想到前端也需要“编译工具”。所以grunt一直给我的感觉是“编译工具”，你写的很多代码还不能直接“执行”，需要这一个工具去“编译”才能上线。它去自动化了很多东西，我之后也写过一个公司用的g
阅读全文
摘要：1. Grunt -> Gulp 早些年提到构建工具，难免会让人联想到历史比较悠久的Make，Ant，以及后来为了更方便的构建结构类似的Java项目而出现的Maven。Node催生了一批自动化工具，像Bower，Yeoman，Grunt等。而如今前端提到构建工具会自然想起Grunt。Java世界里的
阅读全文
摘要：npm install express --registry=https://registry.npm.taobao.org Mark一下 原文国内优秀npm镜像推荐及使用 Mark一下 原文国内优秀npm镜像推荐及使用 npm全称Node Package Manager，是node.js的模块依赖
阅读全文
摘要：认识SASS/Compass SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 SASS与Compass的安装说明 SASS在Windows操作系统内依赖于Ruby环境，因此在安装SASS之前： 1、需要先安装Ruby。Ruby现阶段
阅读全文
摘要：原文：http://www.grycheng.com/?p=472 承接上文《玩转HTML5移动页面（动效篇）》，上次说的是让页面动起来的一些小技巧。而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和方向，熟悉掌握一些方法论还是会对页面开发大大提高效率的，并且也能防止疏忽缺漏。
阅读全文
摘要：原文：http://www.grycheng.com/?p=458 作为一名前端，在拿到设计稿时你有两种选择： 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？ 这次就来谈谈一些动画设计的小技巧，能在
阅读全文
摘要：原文地址：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时
阅读全文
摘要：function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; } }
阅读全文
摘要：一、手机上的触摸事件 基本事件： touchstart //手指刚接触屏幕时触发touchmove //手指在屏幕上移动时触发touchend //手指从屏幕上移开时触发 下面这个比较少用：touchcancel //触摸过程被系统取消时触发 每个事件都有以下列表，比如touchend的target
阅读全文
摘要：除非你的应用程序限定了只在移动设备直立状态或水平状态下使用，一般情况下，你需要调整一些设定。即便你设计的布局流畅时尚，你可能需要改变某些编程代码。通常有以下一些小的策略用于检测移动设备方向的改变。 orientationchange事件 你等待一个移动API，一个简单的窗口orientationch
阅读全文
摘要：js判断屏幕横竖屏： ipad： 90 或 -90 横屏 ipad： 0 或180 竖屏 Andriod：0 或180 横屏 Andriod： 90 或 -90 竖屏 iphone 、ipad禁止横竖屏切换、强制横竖屏
阅读全文
摘要：横竖屏切换检测 移动端Web开发如何处理横竖屏
阅读全文
摘要：今天在某个群里面闲逛，看见一个童鞋分享了一个携程的移动端的页面。地址这里我也分享下吧：http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标，用的比较多就是用字体图标来代替，有些图标不多的时候就自己单个的切出来控制了。 看了下携程的手机端的网站这些图标是用了雪碧图来合
阅读全文
摘要：很多前端工程师在开发手机页面的时候，发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计，于是写页面的时候也定义 font-family 为微软雅黑，后来发到线上后，细心的产品经理发现页面的字体不是微软雅黑，要求马上修改，于是就惊呆了，还跟产品争执一番。实际上手机系统 ios、android 等是不支
阅读全文
摘要：原文：http://www.grycheng.com/?p=2411 微信 webview 内置了调整字体大小的功能，对于网页的可用性来说是一个很实用的功能。一些网页的字体设置过小导致用户看不清文字，调整字体大小即可解决这个问题。 但是对于一些追求显示效果的移动端页面来说，字体大小的调整可能会导致部
阅读全文
摘要：原文地址：http://www.grycheng.com/?p=2188 在做h5移动页面，相信大家一定碰到过页面已经打开，但是里面的图片还未加载出来的情况，这种问题虽然不影响页面的功能，但是不利于用户体验。抛开网速的原因，解决这个问题有多方面的思路：最基本的，要从http请求合并，缓存管理，图片压
阅读全文
摘要：什么是rem 参照 详解移动端rem变革 在我看来，rem就是1rem单位就等于html节点fontsize的像素值。所以改变html节点的fontsize是最为关键的一步。根据手机宽度改变相对大小就可以实现自适应了，就不用什么媒体查询那些的。 我们的设计图往往宽度是640或者其他尺寸的，不过我建议
阅读全文
摘要：研究移动端页面已经有许久了，一直执着于rem来开发，不谈性能怎么样，单从工作效率上看影响了不少，首先要固定设计稿的宽度，一般都是固定在640px，然后在根据根目录的字体大小来计算出每个元素的rem的值，无疑在开发中切图，每个元素都要去计算一边，是不是感觉很麻烦，有没有一种方法，像切PC端页面一样，切
阅读全文
摘要：做移动web开发免不了用微信扫描页面来进行调试，android版微信浏览器一直都默认缓存html静态资源，每次静态资源变化甚至新内容发布的时候在微信浏览器上都极有可能不能更新，很多时候要清理微信缓存才能看到效果，很是烦人。部分客户装了QQ浏览器，微信实际调用的是QQ浏览器，有时候甚至光清理微信缓存都
阅读全文
摘要：移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto) 原文：http://www.grycheng.com/?p=1869 废话不多说，先让大家看一下案例效果： DEMO1，加载底部 DEMO2，加载顶部、底部 DEMO3，固定布局，加载顶部、底部 使用方法 引用css
阅读全文
摘要：1. rem单位方式，用法当前像素除以100。 2. px单位方式，以640px设计图比例实现。 3.px单位方式，以设计图640除以2实现。 4.px单位方式及media媒体查询方式实现，判断最大、最小方式实现，设计图还是640标准。 注，第一种、二种方式是现在比较好用的
阅读全文
摘要：Yeoman帮助我们创建项目，提供更好的工具来使我们的项目更多样化。 Yeoman提供generator系统，一个generator是一个插件，在我们在一个完整的项目上使用‘yo’命令时，会运行该generator。通过这些官方的Generators，推出了Yeoman工作流，工作流是一个健壮、有自
阅读全文
摘要：一、jQuery插件的类型 1. jQuery方法 很大一部分的jQuery插件都是这种类型，由于此类插件是将对象方法封装起来，在jQuery选择器获取jQuery对象过程中进行操作，从而发挥jQuery强大的选择器优势。 2. 全局函数法 可以把自定义的功能函数独立附加到jQuery命名空间下，从
阅读全文
浙公网安备 33010602011771号