最近的文章列表

响应式布局@media only screen and 设备像素比率(-webkit-min-device-pixel-ratio)

常见屏幕参数

  • 设备 分辨率 设备像素比率
  • 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" />
2016/2/27 Comments:
css2和css3中长度单位px和em,rem的定义与区别

css中单位px和em,rem的区别

        国内的设计师大都喜欢用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,从而达到适配

2015/3/18 Comments:
移动端浏览器 省略号 text-overflow: ellipsis 的兼容性

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 */
}
2015/3/15 Comments:
画纯CSS三角(border-left-color、Unicode符号、CSS3的transform)

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

2014/10/27 Comments:
Bootstrap好搭档 - Font Awesome 完美的CSS图标字体库

 个人、商业均可自由使用

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

 用CSS