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是完全免费的,无论个人还是商业使用。详见 协议。