響應式 Web 設計 - Viewport

標籤：htm   flow   example   解決   寬度   背景   blog   方式   不同   

1.user-scalable：使用者是否可以手動縮放。

2.box-sizing 屬性允許你以某種方式定義某些元素，以適應指定地區。指定寬度和高度的框，並把邊框和內邊距放入框中。

[email protected] 可以針對不同的螢幕尺寸設定不同的樣式

4.如果文檔寬度小於 300 像素則修改背景示範(background-color):

@media screen and (max-width: 300px) {    body {         margin: 0px; padding: 0px; color: rgb(170, 17, 17);">lightblue;    }}

5.img,width 屬性設定為 100%，圖片會根據上下範圍實現響應式功能,圖片會比它的原始圖片大。我們可以使用 max-width 屬性很好的解決這個問題　　

img {    max-width: 100%;    height: auto;}

6.HTML5 的 <picture> 元素可以設定多張圖片。

<picture>  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">  <source srcset="img_flowers.jpg">  <img src="img_flowers.jpg" alt="Flowers"></picture>

　　

　　

響應式 Web 設計 - Viewport