自製input 的 radio button 和 checkbox 之前常見的做法是，在input旁邊加入:not(old)的選擇器，如下所例 (以下寫法為SCSS格式)

input[type="radio"]:not(old){

width:28px;

margin:0;

padding:0;

@include opacity(0);

}

input[type="radio"]:not(old) + label{

display: inline-block;

margin-left: -28px;

padding-left: 18px;

background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;

width:auto;

line-height: 12px;

}

input[type="radio"]:not(old):checked + label{

background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;

width:auto;

}

但是chrome的新版本(39版)後開始，不能直接在input旁邊加:not(old)，這段語法，點擊後，會無法正常顯示，所以解決的方法有兩個
1. 要使用:not(old)這段語法，不能在input旁邊加，必須是在他的外層上加，如下所例

.r-btn:not(old){

    input[type="radio"]{

     width:28px;

     margin:0;

     padding:0;

     @include opacity(0);

    }

    input[type="radio"] + label{

     display: inline-block;

     margin-left: -28px;

     padding-left: 18px;

     background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;

     width:auto;

     line-height: 12px;

    }

    input[type="radio"]:checked + label{

     background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;

     width:auto;

    }

}

2. 不使用:not(old)，改用:not(:checked)寫法，Selectors 4也建議使用此語法，如下所例

input[type="radio"]:not(:checked), input[type="radio"]:checked {

    position: absolute;

    left: -9999px;

}

input[type="radio"]:not(checked) + label{

display: inline-block;

margin-left: 4px;

padding-left: 18px;

background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;

width:auto;

line-height: 12px;

}

input[type="radio"]:checked + label{

background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;

width:auto;

}

 

使用CSS Media Query可以實現響應式網頁設計（Responsive Web Design）
但是在眾多瀏覽器中唯有IE這個萬惡瀏覽器到 IE9 及之後的版本才支援 CSS Media Query，不過有辦法可以讓 IE6 到 IE8 支援 Media Query 語法，那就是 Respond.js。

要注意的地方是：respond.js要放在css下面(順序有關係)
例：

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<script type="text/javascript" src="js/respond.min.js"></script>

Demo

下載地址：Respond.js
 

1. 名詞解釋

DPI - dots per inch (每英寸點密度)
PPI - pixels per inch (每英寸像素密度)

簡單來說，DPI是邏輯解析度，PPI是實體解析度(各家手機的螢幕解析度)

以圖像顯示或字型來說：MAC螢幕預設常用DPI為72、windows系統則是96或120；印刷用的DPI常用為300


2. Device Pixel Ratio(裝置像素比)

以 iPhone 為例
http://www.paintcodeapp.com/news/iphone-6-screens-demystified

視網膜解析度與css背景圖
http://weedygarden.net/2010/10/retina-display-and-css-background-images/

字型光柵化
http://zh.wikipedia.org/wiki/%E5%AD%97%E4%BD%93%E5%85%89%E6%A0%85%E5%8C%96

以下網站可測試此螢幕的裝置像素比
http://www.devicepixelratio.com/


3. 利用css media query 針對不同像素比顯示不同的排版

測試該瀏覽器能使用media query的功能語法
http://cssmediaqueries.com/overview.html