[轉貼] CSS3 Media Queries 詳細介紹與使用方法，Responsive Web Design 必備技術

上一篇我們介紹了 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 都能夠有最佳的瀏覽體驗。

[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

[JQuery] jQuery ready vs load

在使用Javascript操作HTML DOM時，記得要養成網頁載入後才動手的好習慣，不然會有可怕的事發生… (可參考邊做邊學 jQeury 系列 3-jQuery 常用的 Javascript 技巧教學影片，在5分02秒的示範)
在jQuery中，要做到"等網頁載入後再執行"，我們有兩種選擇:

$(document).ready(fn)與$(window).load(fn)

二者的差別在於$(document).ready(fn)發生在"網頁本身的HTML"載入後就觸發，