link有效範圍放大

測試環境
測試瀏覽器	Chrome36.0,Firefox31.0

是的!!今天要來介紹HTML中Link這個Tag
link標籤有什麼好介紹的呢?
相信大家一定都有遇到過在手機上點選link但是卻一直點不到或是無法開啟連結的情況出現
要把link轉成botton或是用JQuery另外去進行控制，其實也不是一件很方便的事情
今天就要跟大家分享一個純粹用CSS的解決方案
好~讓我們開始進入今天的主題吧!!GOGOGO~

首先我們先用ul建立出一個模擬的Menu選單，請參考下面的Code

<ul>
  <li>
    <a href="http://engmeter.blogspot.tw/" id="web">一般網頁連結有效範圍</a>
  </li>
  <li>
    <a href="http://engmeter.blogspot.tw/" id="phone">網頁連結有效範圍擴大</a>
  </li>
</ul>

接下來設定CSS樣式，這部分請參考下面的Code

a{
  /*清除連結底線*/
  text-decoration: none;
}
a:hover{
  /*滑鼠滑過連結時背景色為紅色*/
  background:#F00;
}
#phone{
  /*
    為了讓效果更明顯設定a Link內距上下左右各30象素
    實際要設多少請自行評估
  */
  padding:30px;
  /*為了讓家清楚看到效果多設定一個邊界樣式*/
  border:1px solid #000;
  /*將a設為區塊，這點很重要，沒設定的話會跑版唷~!*/
  display:block;
}
ul{
  /*清除ul小項目*/
  list-style:none;
}
ul li{
  /*li向左浮動*/
  float:left;
}

Dome

See the Pen 連結區塊大小控制方案 by jen (@jen_huang) on CodePen.

我們透過上面的Dome可以清楚的看到，有對a設內距跟沒有設內距它們的Link有效範圍是有差的
透過這種方式也可以增加手機上link的感應範圍，就不會讓User再出現點不到連結的冏境了
至於跟Button還有JQuery比起來哪一種比較好，就見仁見智了
以我個人觀點來看的話用CSS控制是比較好的選擇，因為只要設定一次就可以讓所有的a Link產生效果
用Button需要再去另外做link
用JQuery也要在設定href路徑或Click動作
所以我個人比較喜歡這個CSS的方案
P.S. 當然若是平常都用DW之類的軟體拉元件的的方式做網頁，那..你可能就要節哀順變了，因為這種方式的網頁CSS大多都是用嵌入法寫在HTML中，要改起來真是令人頭皮發麻(抖抖抖~)