響應式網頁設計基礎

標籤：san   font   不同   mic   圖片   斷點   size   適應   sof   

http://wf.uisdc.com/cn/getting-started/your-first-multi-screen-site/responsive.html 添加一個視窗：視窗的配置只會出現在head標籤當中，並且只需要聲明一次。  <meta name="viewport" content="width=device-width, initial-scale=1.0">　　使用元視口值 width=device-width 控制頁面適應不同解析度的螢幕寬度。無論是手機的小螢幕或案頭顯示器，頁面將會根據不同的螢幕尺寸重新對內容進行排版。 　  一些瀏覽器在使用者旋轉為橫向瀏覽的時候僅僅是保持頁面寬度不變並縮放網頁內容而不是對螢幕內容進行重新排版。加入屬性 initial-scale=1使頁面無論在什麼情況下都將CSS像素與螢幕像素的比例保持在1:1，並允許頁面優先採用全尺寸螢幕寬度。

　　initial-scale屬性控制頁面最初載入時的縮放等級。maximum-scale、minimum-scale及user-scalable屬性控制允許使用者以怎樣的方式放大或縮小頁面。

 相關文章：https://www.w3schools.com/css/css_rwd_viewport.asp

               https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag

  background-size: cover;  // 使該元素會在保持原比例上自由展開。  設定斷點裝置查詢技術(Media Queries)@media (min-width: 600px) { } 

在我們的產品頁面當中，看起來我們需要做：

• 限制最大寬度。
• 修改元素的內邊距以及縮小字碼。
• 使表格與標題內容浮動對齊。
• 使視頻始終浮動在內容周圍。
• 縮小圖片大小並且讓他們出現在更好的格局裡面。

 這個容器會包含一個簡單的 div 在下面的表格當中:<div class="container">...</div>.container {  margin: auto;  max-width: 800px;  }           

響應式網頁設計基礎