網頁設計-響應式網頁設計

網頁設計-響應式網頁設計 
　　爲了適應屏幕，多數的移動浏覽器會把網頁設計HTML網頁縮放到設備屏幕的寬度。你可以使用meta標簽的viewport屬性來設置。下面的代碼告訴浏覽器使用設備屏幕寬度作爲內容的寬度，並且忽視初始的寬度設置。
　　響應式網頁設計，毫無疑問地變得越來越重要了。如果你還沒聽說過響應式設計，可以先看看我之前發的文章響應式網站。對新手來說， 響應式設計聽起來可能會有點複雜， 但事實上，它比你想象的簡單得多。爲了讓你能快速入門，通過這三個步驟，你一定可以了解響應式設計的基本原理和media query（在你有一些CSS基礎的前提下）。 
　　第一步、Meta 標簽 (查看 demo) 
HTML網頁縮放到設備屏幕的寬度。你可以使用meta標簽的viewport屬性來設置。下面的代碼告訴浏覽器使用設備屏幕寬度作爲內容的寬度，並且忽視初始的寬度設置。這段代碼寫在 裏面 
　　IE8及以下的浏覽器不支持media query。你可以使用media-queries。js 或 respond。js 。這樣IE就能支持media query了。 
　　第二步、HTML 結構 
　　這個例子裏面，有header、content、sidebar和footer等基本的網頁布局。 header 有固定的高180px，content 容器的寬是600px，sidebar的寬是300px。
　　第三步、Media Queries CSS3 media query 響應式網頁設計的關鍵。它像一個if語句，告訴浏覽器如何根據特定的屏幕寬口來加載網頁。 
　　如果屏幕窗口小于980px，下面的規則就生效。在這裏，我設置了容器的寬度爲百分比的形式而不是像素單位，這樣會更加靈活。
     人工植牙, CNC車床加工, 專利佈局,背心訂做,SEO,塑膠射出