[RWD]如何使用 Mac 上的 Safari 開發者工具,偵錯或微調 iPhone 行動版的網頁

設計 RWD 響應式行動網站,在完成第一階段的設計後,免不了的要直接在手機上測試,看看有沒有任何問題,可是如果要偵錯或是微調,改一個小東西,就得來來回回的在桌面上改寫存檔,再用手機 Refresh 瀏覽器一次重新查看,沒改好,再來一次....讓整個工作過程都充滿了火氣 XD  
難道在行動版的網頁,就不能像桌面版的頁面一樣,可以直接用瀏覽器提供的『開發者工具』,立即同步的來 Debug嗎? ...full story ››

[CSS]網頁用的尺寸單位:PX 跟 EM 怎麼區分呀?等等,還有一個 REM...

CSS的語法中,常用的尺寸單位計有:PX(就是我們最熟悉的像素了)、PT、EM、REM、%(百分比)、CM(公分)、IN(英吋)...  
早期CSS還沒有很成熟的時候,字型單位比較常用的是 PT(Point),就像在 Word 裡面設定字體的級數,9級字、12級字這樣,9級字就是 9pt, 12級字就是 12 pt;  
不過 PT 這個單位近幾年就很少用到,幾乎是消失在江湖上了。  
另外像是公分、英吋等這類型的單位,主要是用來列印到紙張,所以也逐漸退出江湖(愛地球於是大家都少列印了)。  
所以這次的主題,就放在另外幾個 PX, EM, REM 上 ...full story ››

[CSS3:Word-Break]用CSS來設置中英文的文字斷行樣式

如果要運用CSS來設置文字斷行的規則,對應的語法就是: word-break。  
這個語法很好記憶,語法直接就是語意:文字斷行,  
Word-Break 在用法上,有三個屬性,分別是:Normal、Keep-All、Break-All。  
下面我們分別來聊一下這三種屬性各有哪些不同 ...full story ››

[CSS]如何讓別人無法列印你的網頁,簡單一行CSS搞定

有些時候,我們會希望某些網頁甚至整個網站,  
都不要讓別人可以列印出來,  
那要如何讓別人無法列印你的網頁呢?  
 
這個方法相當簡單,就用短短一行 CSS 就可以做到,  
例如說,  
如果我們是希望某個單一頁面無法被列印,  
那麼就直接在那個頁面中任何地方(當然最好是檔頭 <head></head>標籤內),  
加入下面的CSS碼 ...full story ››

[RWD]用Javascript來偵測是否為行動裝置最簡單的方法

在進行響應式網站開發(RWD)的時候,  
有時候最麻煩的,還不是CSS的部分(這個部分相對是最簡單的),  
稍微熟悉CSS語法的朋友們,  
只要透過『響應式網頁設計(Responsive Web Design,RWD)』技術,就可以很有效率的以CSS原生模式,解決不同平台間的樣式問題。  
不過有些功能,縱使再強大的CSS,也還是有一些鞭長莫及的地方,  
必須要個別建立行動裝置或是一般裝置不同的程式碼。  
 
那要如何使用偵測使用者是用什麼樣的裝置上網呢?  
 
基本上偵測的方法還蠻多的,像是一般多以 Javascript 去偵測裝置的類型,好比下面這樣的原始碼 ...full story ››

[CSS]Clippy:快速幫你製作 CSS Clip-Path 圖片變形的雲端工具

習慣使用 CSS 來設計網頁後,  
基本上很自然的就會希望,  
可不可以任何的設計想法,都直接以純CSS的語法來完成呢?  
 
其實並不確定是不是真的可以把『每一個』腦海中想要完成的技法,  
都用純CSS的方法完成,  
雖然CSS語法是真的很強大(而且是越來越強大),  
但是設計師的在創意上的天馬行空,  
感覺可是要更勝一籌,總有些技術追不上想像的地方,是吧? ...full story ››

[RWD]在設計行動版網站時,如何避免點選表單欄位時自動放大

在我們進行行動版網站設計的時候,  
不管是留言板或是訂單等等,頁面總是不免會出現一些表單欄位,  
當然,  
透過CSS的一些技巧,絕大多數的表單欄位、下拉選單等等都不會是問題,  
不過有很多朋友們發現,如果在手機版的網站中,  
一旦點擊了文字欄位或是下拉選單,  
那麼 iPhone 就會自動放大整個頁面(Zoom in),  
雖然這似乎是美意一樁,可以讓網友們打字時更便利,  
但問題是放大之後,就算離開這個欄位,  
頁面也不會自動還原為原來的大小,這樣就讓人苦惱了 ...full story ››

[CSS]Font Awesome 真的算是網頁設計師的救世主

網頁設計,免不了的就是要有一些小圖示,  
特別是像設群分享網站的圖示(臉書、Google+、twitter、IG...),又好比下載啦、留言或是一些箭頭、指標等。  
做這些小圖示雖然不麻煩(經常作的朋友們一般都有範本了),  
不過面對現在不同的裝置螢幕尺寸,  
要不就是有時客戶有意見(或是自己看不順眼),想換換顏色跟大小,三不五時就要改圖,  
更討厭的是經常都要一個小圖做好幾個尺寸,再下CSS Code來配置,也是夠麻煩的。  
 
今天跟大家分享一個猶如救世主角色的工具,有了祂,那麼小圖示的問題不僅不麻煩,還可以在設計上更多選擇與彈性,  
這個工具就是:Font Awesome ...full story ››

[CSS]驗證一下,看網站是否已經行動最佳化了嗎?

從好幾年前開始,  
就不斷的有各個網路專家宣稱行動時代開始了,  
印象中已經有好幾個年,都被稱為所謂的行動元年,  
喊久了,似乎也就漸漸無感。  
 
專家們喊的趨勢是一回事,不管時間上準不準,方向是絕對錯不了的,  
而從流量分析上看起來,  
這兩年中,  
由行動裝置瀏覽的比例的確是很明顯的大幅增加,甚至已經完全超過50%以上了(依據我們自家的流量),  
除此外,  
Google 也多次聲明,會將一個網站行動化的好壞,也放入檢索排名的參考因素之一 ...full story ››