上一篇我們介紹了 Responsive Web Design 之後，這次要來詳細介紹 CSS3 Media Queries 了。在上一篇中，我們提到 Responsive Web Design
的實作方式有大半都是利用 CSS3 Media Queries 來達成。而顧名思義 Media Queries 就是要在支援 CSS3
的瀏覽器中才能正常工作，IE8 以下不支援。而 Media Queries 的套用方法千變萬化，要套用在什麼樣的裝置中，都可以自己來定義。 ##
關於 Media Queries
到底什麼是 Media Queries ？一般我們在開發 HTML + CSS 網頁中，都會有一份 CSS
來控制網頁的樣式表。而隨著各式各樣不同大小、長寬與解析度的裝置的興起，我們在開發網頁只考慮到自己的螢幕顯示的如何，是多麼的膚淺哪。So，在開發者
的螢幕看到的網頁或許很漂亮，那，其他人的螢幕呢？所以，我們需要的是能夠控制不同大小的螢幕（裝置），在其上所顯示出來的樣式，讓各式各樣來自不同地方
的 User 都能夠有最佳的瀏覽體驗。
2014年6月20日 星期五
[jquery]&& 和 || 運算子的功能
在 jquery v1.10.2 裡面的第 153行寫到:
context && context.nodeType ? context.ownerDocument || context : document,
它的實際意義是
如果 context 不存在 或者 context 沒有 nodeType 屬性時，傳回 document
如果 context 存在，而且 context 具有 nodeType 屬性時，嘗試傳回 context.ownerDocument ，如果 context.ownerDocument 不存在就改成傳回 context
context && context.nodeType ? context.ownerDocument || context : document,
它的實際意義是
如果 context 不存在 或者 context 沒有 nodeType 屬性時，傳回 document
如果 context 存在，而且 context 具有 nodeType 屬性時，嘗試傳回 context.ownerDocument ，如果 context.ownerDocument 不存在就改成傳回 context
2014年6月6日 星期五
[JQuery] jQuery ready vs load
在使用Javascript操作HTML DOM時，記得要養成網頁載入後才動手的好習慣，不然會有可怕的事發生… (可參考邊做邊學 jQeury 系列 3-jQuery 常用的 Javascript 技巧教學影片，在5分02秒的示範)
在jQuery中，要做到"等網頁載入後再執行"，我們有兩種選擇:
在jQuery中，要做到"等網頁載入後再執行"，我們有兩種選擇:
$(document).ready(fn)與$(window).load(fn)二者的差別在於$(document).ready(fn)發生在"網頁本身的HTML"載入後就觸發，
2014年5月14日 星期三
[PHP]self和$this的差異
(1).self是參照到目前的class，$this是參照到目前的object
( 已經被宣告的實體上 )
(2).self 可使用在static上，$this不行
static method 因為沒有物件的實體，所以需要注意不可以使用 $this ，要用self::
可以直接存取 static method ( 如self::method() )，但是無法直接存取 static property 中的預先宣告的值
(2).self 可使用在static上，$this不行
static method 因為沒有物件的實體，所以需要注意不可以使用 $this ，要用self::
可以直接存取 static method ( 如self::method() )，但是無法直接存取 static property 中的預先宣告的值
2014年5月9日 星期五
PHP性能測試工具XHProf使用詳解
一，什麼是XHProfXHProf是一個分層PHP性能分析工具。它報告函數級別的請求次數和各種指標，包括阻塞時間，CPU時間和內存使用情況。一個函數的開銷，可細分成調用者和被調用者的開銷，XHProf數據收集階段，它記錄調用次數的追踪和包容性的指標弧在動態callgraph的一個程序。它獨有的數據計算的報告/後處理階段。在數據收集時，XHProfd通過檢測循環來處理遞歸的函數調用，並通過給遞歸調用中每個深度的調用一個有用的命名來避開死循環。 XHProf分析報告有助於理解被執行的代碼的結構，它有一個簡單的HTML的用戶界面（ PHP寫成的）。基於瀏覽器的性能分析用戶界面能更容易查看，或是與同行們分享成果。也能繪製調用關係圖。
2014年4月22日 星期二
[HTML]TIPS-Get 100% Height in XHTML
TIPS-Get 100% Height in XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Height Test</title></head><body><div style="background-color:Gray; height:100%;">AAA</div></body></html>
height:100%的寫法過去明明用得好好，昨是今非，為什麼?
XHTML!
2014年3月17日 星期一
[eclipse]中文亂碼問題解決方案
eclipse之所以會出現亂碼問題是因為eclipse編輯器選擇的編碼規則是可變的。一般默認都是UTF-8或者GBK，當從外部導入的一個工程時，如果該工程的編碼方式與eclipse中設置的編碼方式不同，就會產生中文的亂碼問題，這其中還有幾種情況。
如果導入的整個工程的編碼方式與eclipse的編碼方式有衝突，那麼這個工程裡所有的中文都是亂碼;如果所有工程的編碼方式與eclipse工作空間的編碼方式有衝突，那麼所有的工程裡的中文都有可能是亂碼。對於eclipse工作空間，eclipse會把你改的設置保存在工作空間的設置文件中，對於單個工程的編碼方式進行修改，那麼eclipse會把編碼方式保存在該工程的.setting文件包裡。
所以，要避免中文亂碼問題有兩個原則：（1）避免頻繁更換工作空間，最好項目從一開始就在一個工作空間中進行，並且最好設置工作空間的編碼方式為你平時最經常使用的或者是公司規定的項目編碼方式，這樣工程就會使用工作空間的編碼方式，避免出現編碼不一致的情形；（2）相同類型的文件盡量使用相同的編碼方式，可以保證相同類型的文件都能使用一致的編碼設置；
解決中文亂碼問題可以有以下設置方案：
如果導入的整個工程的編碼方式與eclipse的編碼方式有衝突，那麼這個工程裡所有的中文都是亂碼;如果所有工程的編碼方式與eclipse工作空間的編碼方式有衝突，那麼所有的工程裡的中文都有可能是亂碼。對於eclipse工作空間，eclipse會把你改的設置保存在工作空間的設置文件中，對於單個工程的編碼方式進行修改，那麼eclipse會把編碼方式保存在該工程的.setting文件包裡。
所以，要避免中文亂碼問題有兩個原則：（1）避免頻繁更換工作空間，最好項目從一開始就在一個工作空間中進行，並且最好設置工作空間的編碼方式為你平時最經常使用的或者是公司規定的項目編碼方式，這樣工程就會使用工作空間的編碼方式，避免出現編碼不一致的情形；（2）相同類型的文件盡量使用相同的編碼方式，可以保證相同類型的文件都能使用一致的編碼設置；
解決中文亂碼問題可以有以下設置方案：
2014年1月14日 星期二
[PHP] PHP Profiling 效能分析追蹤工具 (APD)
當程式寫完後, 發現整頁跑起來速度有點慢, 要追蹤分析是哪邊是造成速度慢的主因, 通常最簡單的方法, 是用 microtime() (可見此文: PHP 測量程式執行時間)來把每個 Function 包起來, 分別看執行時間.
如果太多要追蹤, 懶得這樣子包來包去, 另外一種就是用 PHP Profiling 的工具(APD)來做, 詳可見下述:
不過, 太久沒用這工具, 沒想到 APD 從 2008年到現在(2011), 都沒有新版, 使用 Pecl 安裝, 也無法直接安裝完成, 在此順便把解法紀錄於此.
如果太多要追蹤, 懶得這樣子包來包去, 另外一種就是用 PHP Profiling 的工具(APD)來做, 詳可見下述:
不過, 太久沒用這工具, 沒想到 APD 從 2008年到現在(2011), 都沒有新版, 使用 Pecl 安裝, 也無法直接安裝完成, 在此順便把解法紀錄於此.
2014年1月6日 星期一
[中文分詞]百度算法中怎麼進行中文切詞分詞
導讀：百度作為中文搜索引擎的先驅，它的核心地位可以說在短時期是沒有任何搜索引擎可以超越的，百度的卓越成就在於它對博大精深的中國文化的領悟和對中文分詞的的超強功底。百度受歡迎的主要原因除了用戶習慣的原因，在較大程度上得益於百度算法的精准率，搜索結果值更貼近用戶的想獲得的資訊。用一句廣告詞“正是我想要的”來形容百度最恰當不過了。
2014年1月3日 星期五
[linux]cut,sed,awk 字串處理
cut 教學:
cut -b 10- filename //刪除該列的前10個字元
cut -d(分界字元) filename //指定欄位的分界字元
sed 教學:
sed -e '3d' //刪除第3列
sed -e '2,5d' //刪除第2~5列
sed -e '4,$d' //刪除第4列，但第4列是最後一列；錢字號『 $ 』代表最後一行！
sed -e "/${var}/"d //在shell中，用變數代替
sed 's/^...//' //刪除該列的前3個字元
sed 's/...$//' //刪除該列的最後3個字元
sed '/Hello/d' dataf3 //刪除Hello該列
sed -i “s/\r//”FILENAME //刪除檔案中的^M字元
sed 教學:
sed -e '3d' //刪除第3列
sed -e '2,5d' //刪除第2~5列
sed -e '4,$d' //刪除第4列，但第4列是最後一列；錢字號『 $ 』代表最後一行！
sed -e "/${var}/"d //在shell中，用變數代替
sed 's/^...//' //刪除該列的前3個字元
sed 's/...$//' //刪除該列的最後3個字元
sed '/Hello/d' dataf3 //刪除Hello該列
sed -i “s/\r//”FILENAME //刪除檔案中的^M字元
訂閱：
文章 (Atom)