網站圖片在retina螢幕

img標籤

<img class="hires" alt="" src="search.png" width="100" height="100" />

<script type="text/javascript">

$(function () {

if (window.devicePixelRatio == 2) {

          var images = $("img.hires");

          // loop through the images and make them hi-res

          for(var i = 0; i < images.length; i++) {

            // create new image name

            var imageType = images[i].src.substr(-4);

            var imageName = images[i].src.substr(0, images[i].src.length - 4);

            imageName += "@2x" + imageType;

            //rename image

            images[i].src = imageName;

          }

     }

});

</script>

css background

.repeatingPattern {

     background: url(../images/bgPattern.png) repeat;

     background-size: 100px 100px;

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

     .repeatingPattern {

          background: url(../images/bgPattern@2x.png) repeat;

     }

}

參考網址www.kylejlarson.com

[CSS]隱藏標籤文字

以前常常使用text-indent:9999px;

可以改成使用

.hide-text {

text-indent: 100%;

white-space: nowrap;

overflow: hidden;

}

[CSS]inline-block in IE7

解決inline-block在IE7無法水平排列問題~

 display: inline-block;
 *display: inline;
 zoom: 1;

[jQuery]easing type Tool

常常使用jQuery easeing這個外掛時候，查詢easing比較麻煩，今天找到一個不錯的網站，已經都幫你整理好easeing type了。 Easing函數速查表 非常方便!

[CSS]Mobile element 100% Width

img, iframe, object, embed { max-width: 100%; }

[CSS]1px 表格製作

.table{
border-spacing:0px; /*doesn't work in IE*/ 
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}