常见屏幕参数

• 设备 分辨率 设备像素比率
• Android LDPI 320×240 0.75
• Iphone 3 & Android MDPI 320×480 1
• Android HDPI 480×800 1.5
• Iphone 4 960×640 2.0

iPhone 4的一个 CSS 像素实际上表现为一块 2×2 的像素。所以图片像是被放大2倍一样，模糊不清晰。

解决办法：

1、页面引用

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />

        国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？

简单的说：

px是：相对长度单位。像素（Pixels）。1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

em是：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem是：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。比如：我们定义如下，那么相对的font-size就是不同屏幕宽度的font-size，从而达到适配

text-overflow是一个常用的CSS属性，作用是让文本超出容器区域的部分以省略号显示。

要让它生效， 还需要配合设置其它几个css属性。示例CSS代码：

p { 
     white-space: nowrap; 
     width: 100%; /* IE6 needs any width */ 
     overflow: hidden; /* "overflow" value must be different from "visible" */ 
     -o-text-overflow: ellipsis; /* Opera 9-10 */ 
     text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */ 
}

这些三角形用图片都是可以达到一样的效果的，但当颜色和比例需要改动时，CSS只要简单的改变一下border的样式就可以了，图片可是要重新替换的，效果也没有那么容易调试，过多的图片也会对页面性能造成影响，所以还是推荐用CSS来实现喽~

 个人、商业均可自由使用

Font Awesome是完全免费的，无论个人还是商业使用。详见 协议。

 用CSS�