標籤：區塊 作用 border web 意思 自適應 ice 瀏覽器 螢幕尺寸
1.什麼是響應式 Web 設計?友好的使用者體驗是網頁可以在任何裝置上展示和操作，裝置包括案頭系統裝置，平板電腦，iPhone等手機等。
網頁應該根據裝置的大小自動調整內容。
頁面的設計與開發根據使用者行為以及裝置環境(系統平台、螢幕尺寸、螢幕定向等)進行相應的響應和調整稱之為響應式 Web 設計。
3.自適應設計或者響應式設計的方法（1）使用@media，條件（min-width: 768px）判斷當瀏覽器的寬度小於768px值時，改變樣式。
@media (min-width: 768px) { .main { width: 25%; float: left; }}
通過媒體查詢選擇性載入css，意思是自動探測螢幕寬度，然後載入相應的CSS檔案。
<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)"href="tinyScreen.css" />
上面的代碼意思是，如果螢幕寬度小於400像素（max-device-width: 400px），就載入tinyScreen.css檔案。
link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)"href="smallScreen.css" />
上面的代碼意思是：如果螢幕寬度在400像素到600像素之間，則載入smallScreen.css檔案。
（2）寬度使用百分比，盡量少使用絕對值寬度。
由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
例如：
不能使用一下css代碼：
div{width：xxx px}
在響應式中，應該這麼使用：
div{ width:100%; //或者 width:auto;}
（3）字型的設定相對大小
移動端字型也不能使用絕對大小（px），而只能使用相對大小（em）或者高清方案（rem）,rem不局限於字型大小，前面的寬度width也可以使用，代替百分比
body{ font: normal 100% Helvetica, Arial, sans-serif;//設定字型大小為預設大小，16像素}
移動端設定字型大小：
在移動端上，設定字型為24px，則24/16=1.5，p的大小是預設大小的1.5倍，即24像素（24/16=1.5）。
p{font-size: 1.5em}
（4）流動布局（fluid grid）
“流動布局”的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.leftDiv{ float: left; width: 70%;}.rightDiv { float: right; width: 25%;} 4.具體理解
在網頁上，寫一個普通的網頁效果
<!DOCTYPE html><html><head><title>測試</title><meta charset="utf-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> --></head><style type="text/css">p{border: 1px solid black;}</style><body><div><p>響應式原理</p></div></body></html>
類比手機上看到的樣式，字型很小，看不清，是因為按照電腦上的像素對字型進行設定的，解析度不一樣。
加上代碼後的樣式：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
移動端和pc端，響應式設計布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
