Facebook 推出的Social Plugin 蠻多客戶都在使用,但隨著RWD響應式網頁(Responsive web design)的崛起,越來越多客戶反映網站嵌入的Social Plugin,不是被截掉,就是無法100%滿版,如果在手機上看的話更慘不忍睹...。

尤其是最多人使用的fb-like-box plugin,Facebook上面只能設定絕對的寬度(data-width),如果你有嘗試設定100%,到了RWD響應式網頁上面,依然還是無法作用!下圖就是還尚未使用特殊的CSS語法來解決。

fb-like1

, , , , , , ,

英傑銳數位設計 發表在 痞客邦 PIXNET 留言(1) 人氣()

我們常常在網頁設計的時候,會需要使用到Table表格來排版,有時候多少需要加一點顏色來美化

今天要教大家的是僅透過簡單的CSS語法,來讓Table表格達到奇偶底色相間,整個語法不需要用到任何javascript,但是,僅限使用在IE7版本以上,若IE7以下恐怕還是不支援(不過這年頭IE7以下直接可以捨棄掉了),但即使是如此,還是不影響整個程式上的運作,頂多也只是美觀上的問題而已。

首先,很簡單,僅需要加上以下兩行CSS語法,就可以達到Table的奇偶底色相間:

, , , ,

英傑銳數位設計 發表在 痞客邦 PIXNET 留言(3) 人氣()

  ScreenShot00005  

我們都知道蘋果iPhone6即將於9/26在台灣正式開賣,這次Apple發表的iPhone6總共有兩種尺寸的規格,一種是4.7吋的iPhone6,另一款則是5.5吋大螢幕的iPhone6 Plus;小編身邊的朋友已經不少人指定要購買iPhone6 Plus的機型了,因為不外乎是喜歡”螢幕尺寸越大越好”。

其實從智慧型手機問世以來,他所帶來的影響不僅僅是手機產業的革命與變動,就連周遭一些配件商也跟著影響與帶動,例如可自行更換離電池的賣家越來越難賣了,因為現在智慧型手機幾乎都無法自行拆換電池,或是我們以往常聽到”全配座充”或”簡配旅充”。再來就是帶動手機殼這龐大的商機,甚至推出可自行設計&列印的客製手機殼,導致以往手機需全機包膜的需求者,現在正在逐漸轉型。

, , ,

英傑銳數位設計 發表在 痞客邦 PIXNET 留言(1) 人氣()

2014-08-25_112644  

Font Awesome 一行語法,輕鬆在網頁加入ICON圖示

以往在網頁製作的時候,有時候要考慮到美編的內容,所以會在網頁中加入一些小ICON的圖示,一方面最主要用來增加網站的美觀;另外一方面則是用來讓瀏覽者好辨識該按鈕的內容,也就是我們俗稱的UI(User Interface - 使用者介面)

只不過以往的方法,對於網頁設計師人員相當麻煩,因為在網站設計的過程中,他們必須自行去網路蒐集或請美編人員設計這樣的ICON,再者,這些圖示ICON都還只是圖片檔,所以無形之中會造成以下幾點的缺點:

, , , , , ,

英傑銳數位設計 發表在 痞客邦 PIXNET 留言(0) 人氣()

Responsive Web Design 響應式網站的實用工具

今天要帶大家介紹的是一個很不錯的工具,它叫做 Responsive Inspector

這工具是讓你用來快速判斷、並分析您所瀏覽的網站是否能符合多裝置不同螢幕尺寸大小

簡單講,就是快速讓您了解這網站是否有RWD自適應的功能!

, , , , , , , ,

英傑銳數位設計 發表在 痞客邦 PIXNET 留言(0) 人氣()

1

國外 Responsive Web Design 的欣賞網站

目前國外普遍接受RWD的網站,因為對於一個網站的管理者來說,RWD這樣的製作方式,省去了不少的維護時間,所以就讓我們一起來欣賞國外人家製做過的作品吧!

以下要介紹的這個網站是Media Queries,他們蒐集了超過400多種的RWD網站提供參考,其中有些非常的漂亮,非常值得設計師們參考!

, , , ,

英傑銳數位設計 發表在 痞客邦 PIXNET 留言(0) 人氣()

Responsive_Design  

RWD(Responsive Web Design)自適應網站的製作方式

首先,你必須先在網站開始的地方加上以下meta語法,用於規定裝置的的結構規則:

     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    

其次,需將所有有圖片的地方,加上以下CSS語法,方便圖片按照螢幕寬度的自動縮放:

     img {
          height: auto;
          max-width: 100%;
      }
    

最後在CSS的地方加上以下規則(通常最少我們都分3個尺寸),讓不同寬度大小,給予新的不同CSS規則,就完成了:

, , , , ,

英傑銳數位設計 發表在 痞客邦 PIXNET 留言(1) 人氣()

01

什麼是Responsive Web Design (RWD)?

RWD英文全名為:Responsive Web Design
中文名稱為:自適應網頁設計、響應式網頁設計。

簡單的來說,就是讓一個網頁在電腦、智慧型手機、平板上都可以有很好的瀏覽效果。

, , , ,

英傑銳數位設計 發表在 痞客邦 PIXNET 留言(0) 人氣()

2014-04-16_230146.png  

 

HTML5語法在手機版網站上撥打電話或簡訊的超鏈結

在手機版的網站上,我們常常為了要方便讓消費者可以更快速的聯絡到商家,所以我們會需要在網站上增加撥打電話、或是直接發簡訊的超鏈結,這時候,我們只要增加支持HTML5新技術、新語法就可以輕鬆搞定!使用方式如下:

, , , , , ,

英傑銳數位設計 發表在 痞客邦 PIXNET 留言(0) 人氣()

ie-logos.png  

 

X-UA-Compatible設置IE兼容模式

強制瀏覽器呈現為特定的版本的標準。它不支持IE7及以下:

, , ,

英傑銳數位設計 發表在 痞客邦 PIXNET 留言(0) 人氣()