随笔分类 -  前端

-webkit-min-device-pixel-ratio的常见值对照
摘要：-webkit-min-device-pixel-ratio为1.0所有非Retina的Mac所有非Retina的iOS设备Acer Iconia A500Samsung Galaxy Tab 10.1Samsung Galaxy S-webkit-min-device-pixel-ratio为1.... 阅读全文
posted @ 2015-06-02 17:43 Ada zheng 阅读(918) 评论(0) 推荐(0)
兼容IE与firefox的css 线性渐变（linear-gradient）
摘要：IE系列filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');参数：startColorStr起始颜色 endColorSt... 阅读全文
posted @ 2015-05-19 15:50 Ada zheng 阅读(1282) 评论(0) 推荐(0)
让IE8支持HTML5及canvas功能！
摘要：微软出的IE9支持HTML5，但因为不支持XP系统，暂时我还用不了。即使能用，现阶段如果开发HTML5页面，并考虑到兼容性问题的话，恐怕也得让自己的界面支持IE6-8吧。首先，需要让IE支持HTML5标签。这个简单，随便在网上搜一下就能找到。下载一个html5.js，并拷贝到自己的目录里就可以了。现... 阅读全文
posted @ 2015-05-19 15:38 Ada zheng 阅读(11813) 评论(1) 推荐(2)
Jquery中使用setInterval和setTimeout会提示缺少对象的错误，解决方法如下：
摘要：直接在ready中调用其他方法，会提示缺少对象的错误，解决方法如下：方法1. 应用jQuery的扩展可以解决这个问题。$(document).ready(function(){$.extend({show:function(){alert("ready");}});setInterval("show... 阅读全文
posted @ 2015-03-16 21:34 Ada zheng 阅读(817) 评论(0) 推荐(0)
7 天打造前端性能监控系统(转)
摘要：引言前阵子在w3ctech的走进名企 - 百度前端 FEX 专场上曾“夸下海口”说听完讲座后七天就可以打造自己的前端性能监控系统，既然说出去了也不能食言。从前一篇文章前端数据之美相信大家对前端数据有了一定的了解，下面就针对其中的性能数据及其监控进行详细阐述。开始行动本文中的性能主要指 web 页面加... 阅读全文
posted @ 2015-03-06 17:23 Ada zheng 阅读(572) 评论(0) 推荐(0)
HTML head 头标签(转)
摘要：HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签... 阅读全文
posted @ 2015-03-06 15:45 Ada zheng 阅读(307) 评论(0) 推荐(0)
页面重绘和回流以及优化
摘要：在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。1. 浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1... 阅读全文
posted @ 2015-03-04 16:36 Ada zheng 阅读(348) 评论(0) 推荐(0)
闭合浮动 与 清除浮动 的区别
摘要：http://www.iyunlu.com/view/css-xhtml/55.htmlhttp://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html 阅读全文
posted @ 2015-03-02 17:20 Ada zheng 阅读(304) 评论(0) 推荐(0)
image-set实现Retina屏幕下图片显示详细介绍
摘要：支持image-set：如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像；Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。上面... 阅读全文
posted @ 2015-03-02 16:47 Ada zheng 阅读(712) 评论(0) 推荐(0)
什么是web标准、可用性、可访问性
摘要：前言：大家不难发现，只要是招聘UED相关的岗位，如前端开发工程师、交互设计师、用户研究员甚至视觉设计师，一般都对web标准、可用性和可访问性的理解有要求。那么到底什么是web标准、可用性、可访问性呢？一、web标准简单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标... 阅读全文
posted @ 2015-03-02 14:07 Ada zheng 阅读(1809) 评论(0) 推荐(0)
不同内核浏览器的差异以及浏览器渲染简介(转)
摘要：一、简单介绍一下什么是浏览器内核。浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，... 阅读全文
posted @ 2015-03-02 13:47 Ada zheng 阅读(11707) 评论(0) 推荐(12)
WebKit最新特性srcset简介(转)
摘要：WebKit内核最新新增了对srcset属性的支持（参考：https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/）,这是首个宣布支持... 阅读全文
posted @ 2015-02-28 15:49 Ada zheng 阅读(393) 评论(0) 推荐(0)
利用media query让背景图适应不同分辨率的设备
摘要：随着上网方式的多样化，用户选择上网的工具不再仅是PC，而可以是手机，或者平板电脑。随之而来的问题是如何让网页适应不同分辨率，这给前端工程师们带来了新的挑战，其中重要的一点是如何让图片能在不同的分辨率下都能给用户带来良好的用户体验？方法概述CSS3中的media query属性让我们可以根据浏览器的高... 阅读全文
posted @ 2015-02-28 14:37 Ada zheng 阅读(292) 评论(0) 推荐(0)
“按需加载”的应用(转)
摘要：按需加载是前端性能优化中的一项重要措施，按需加载是如何定义的呢？顾名思义，指的是当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，包括但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更改等。加载的文件，可以是JS、图片、CSS、HTML等。后面将会详细... 阅读全文
posted @ 2015-02-28 14:22 Ada zheng 阅读(257) 评论(0) 推荐(0)
html css float left与 float right的使用说明(转)
摘要：点评：CSS中很多时候会用到浮动来布局，也就是经常见到的float:left或者float:right，简单点来说，前者是左浮动(往左侧向前边的非浮动元素飘，全是飘得元素的话，就按照流式来浮动从左到右，放不下则换行)，后者是右浮（往右飘）动。但仅仅是如此吗？详细出处参考：http://www.jb5... 阅读全文
posted @ 2015-02-27 18:02 Ada zheng 阅读(416) 评论(0) 推荐(0)
纯css制作带三角(兼容所有浏览器)
摘要：如何用 border 来制作三角。html 代码如下：代码如下: css 代码如下：代码如下:.arrow-up {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;... 阅读全文
posted @ 2015-02-20 17:46 Ada zheng 阅读(477) 评论(0) 推荐(0)