Whisper_a的专栏

转载 http://mydevice.io/devices/ 各个机型的视口宽度表

http://mydevice.io/devices/

转载 移动端H5页面之iphone6的适配

iphone6 及 iphone 6 plus 已经出来一段时间了。很多移动端网站，以前写死body 为320px的，现在估计也忙着做适配了。大屏幕手机其实一直有，只是以前大家没怎么重视，移动端的H5页面大部分都以320px为基准宽度进行布局，那些大屏屌丝android用户也懒得去理，而现在iphone也搞起多屏幕，老板们重视程度就不一样了。回归正题，兼容iphone各版本机型最佳

转载 理解AngularJS的作用域Scope

概叙：AngularJS中，子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法。但有一个例外：在directive中使用scope: { ... }，这种方式创建的作用域是一个独立的"Isolate"作用域，它也有父作用域，但父作用域不在其原型链上，不会对父作用域进行原型继承。这种方式定义作用域通常用于构造可复用的directive组件。作用域的原型

转载 AngularJS数据双向绑定揭秘

AngularJS数据双向绑定揭秘AngularJS在$scope变量中使用脏值检查来实现了数据双向绑定。和Ember.js数据双向绑定中动态设施setter和getter不同，脏治检查允许AngularJS监视那些存在或者不存在的变量。$scope.$watch$scope.$watch( watchExp, listener, objectEquality );

转载 【grunt整合版】30分钟学会使用grunt打包前端代码

【grunt整合版】30分钟学会使用grunt打包前端代码grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：① 压缩文件② 合并文件③ 简单语法检查对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件，初学，有误请包涵准备阶段1、nodeJs环境因为grunt是基于nodeJs的，所以首先各位需要安装

转载 前端性能优化（CSS动画篇）

正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~小广告：更多内容可以看 我的博客最近拜读了一下 html5rocks 上几位大神写的一篇关于CSS3动画性能优化的文章，学到了很多，在这里记录一下，其中的知识都是来源于这俩篇文章，我只是截取了其中比较关注的内容出来，原文地址 High Performance Animations 及 Accelera

原创 background-position百分比的问题

百分比的计算方法：x=(容器宽度-背景图片宽度)*百分数y=(容器高度-背景图片高度)*百分数差值可正可负例如：.b4x=(300-600)*(-20%)=60pxy=(300-600)*(-20%)=60px所以.b4也可以写为{background-position:60px 60px;}

原创 一次无聊的尝试...

转载 是否在当前页面api

页面可见性API属性和事件目前页面可见性API有两个属性，一个事件，如下：document.hidden: Boolean值，表示当前页面可见还是不可见document.visibilityState: 返回当前页面的可见状态。“hidden““visible““prerender” 这个表示纳尼呢~~恩，我也不确定，字面意思是“预渲染”。莫非指的是啪啪啪一下子开了很多个选

转载 如何区分javascript设计模式中的中介者模式(Mediator Pattern)与观察者模式(Observer Pattern)?

首先聊聊观察者模式(Observer Pattern)，这个非常好理解在GoF的原文中是这样描述观察者模式的：One or more observers are interested in the state of a subject and register their interest with the subject by attaching themselves. When s

转载 CSS “渐进增强”在web制作中常见应用举例

CSS “渐进增强”在web制作中常见应用举例by zhangxinxu from http://www.zhangxinxu.com本文地址： http://www.zhangxinxu.com/wordpress/?p=788一、“渐进增强”简述“渐进增强”是对”Progressive Enhancement”一词的译文，我觉得翻译的很是得体。所谓“渐进增强”，有点

转载 media媒体查询的用法

@media规则@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：@media screen{p.test {font-f

原创 利用cssText

ali.style.cssText = 'height:100px;width:100px;background:red';==ali.style.height+ali.style,width+a

转载 jsonp

前言　　由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。　　当然了，通过调用强大的PhoneGap插件然后打包，你可以实现100%的Socket通讯和本地数据库功能，又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能，但这两种方式都有其局限性，前者需要PhoneGap支持，后者要求用户设备必须

转载 什么是FOUC？你如何来避免FOUC？

一般指IE在加载网页的时候，出现短暂的CSS样式失效。 问题一：什么时候出现呢？IE浏览器IE的临时文件夹没有缓存过页面的css文件页面head标签里面没有任何link和script标签页面引用样式的方式是采用@import外在因素（比如网速等）问题二：咋解决？在head里面加入一个link或者script标签

转载 如何压缩网页中的图片

优先用 png 而不是 gif压缩 png去掉 jpg 的 metadata压缩 gif 动画尝试使用 png8避免使用 AlphaImageLoader压缩动态生成的图像使 favicon 更小 可缓存使用 CSS Sprites

原创 通过id名可以直接获取父节点

demo            var getParents=function(id){        var dom=id.parentNode;        while(dom.tagName!=null){            document.write(dom.tagName);            dom=dom.

转载 为什么<img>标签下面有空白

要理解这个问题，首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline，这是一个西文排版才有的概念：可以看到，出现在baseline下面的是 p 啊，q 啊, g 啊这些字母下面的那个尾巴。对比一下 vertical-align 的另外两个常见值，top 和 bott

原创 var a = "abc def ghi";首字母大写的两种方法

1 var a = "abc def ghi"; var array1 = a.split(" "); for(var i = 0 ; i<array1.length; i++){ var temp = array1[i].split(''); temp.unshift(temp.shift().toUpperCase()) array1[i] = temp;

原创 利用JSONP解决AJAX跨域问题的原理

受同源策略的影响，页面中的javascript无法访问其他页面的数据。

转载 JavaScript 作用域和作用域链

1 全局作用域

原创 (总结)css hack

.div1{padding:0px;padding:0px\9 /*ALL IE*/padding}

转载 display:none和visibility:hidden的关系

display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用 visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。”这样的解释。但是我觉得并不够，所以就想了一下关

原创 设置垂直居中的方式

1  使用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px;，这里有个技巧是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中。2

原创 （总结）css优先级

1.  内联样式表的权值最高 1000；2.  ID 选择器的权值为 1003.  Class 类选择器的权值为 104.  HTML 标签选择器的权值为 1CSS 优先级法则：A  选择器都有一个权值，权值越大越优先；B  当权值相等时，后出现的样式表设置要优于先出现的样式表设置；C  创作者的规则高于浏览者

原创 一个css选择器的小问题

element elementdiv p选择 元素内部的所有 元素。1element 选择器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background-color:transparent">element>elementdiv>p选择父元素为

原创 link与@import的区别

1 link属于XHTML的标签 @import是css提供的一个方法

原创 使用iframe的优缺点

一、使用iframe的优缺点优点:1.程序调入静态页面比较方便;2.页面和程序分离;缺点：

原创 一个js 回调函数

如何写回调函数？  如果自己在写一个方法或函数，你有可能会遇到需要一个回调函数。下面就是一个简单的常见回调函数例子：function mySandwich(param1, param2, callback) { alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);

原创 HTML离线存储

...

原创 img标签中alt与titile的区别

alt本意是替换的意思，用在图片无法

原创 HTML与XHTML的区别

1 XTHML标签必须被正确的嵌套2

转载 DOCTYPE都有哪几种模式？

定义和用法 声明必须是 HTML 文档的第一行，位于 标签之前。 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD

原创 DOCTYPE 严格模式与混杂模式

在过去的旧式浏览器中，css渲染

原创 (总结)行内元素和块元素都有哪些

常用块级元素：

原创 (总结)什么是HTML语义化

定义：HTML语义化就是利用html标签，

原创 jquery阻止事件冒泡的两种方法

原则1：为了提供跨浏览器的一致性，jquery始终会在事件模型的冒泡阶段注册事件处理程序。因此，我们总是可以假定最具体的元素会首先获得响应事件的机会。原则2：IE浏览器失踪

转载 css3新单位

单位含义em相对于父元素的字体大小ex相对于小写字母"x"的高度gd一般用在东亚字体排版上，这个与英文并无关系rem相对于根元素字体大小vw相对于视窗的宽度：视窗宽度是100vwvh相对于视窗的高度：视窗高度是100vhvm

转载 css命名规范

全局：global.css全局样式为全站公用，为页面样式基础，页面中必须包含。结构：layout.css页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。私有：style.css独立页面所使用的样式文件，页面中必须包含。模块 module.css产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。主

原创 css3 模块汇总（更新）

1 选择器2 框模型3 背景和边框文本效果2D/3D 转换动画多列布局用户界面