什么是响应式网页
?
什么是響應式網頁
?2000: 塞班、黑莓，GPRS，2.5G，可以瀏覽WML網頁
?2008: iOS/Linux，3G，Safari，可以瀏覽HTML網頁
? Android/Linux，Chrome，可以瀏覽HTML網頁
?Responsive Web Page 響應式/自適應網頁，一個頁面，可以在PC、平板、手機下正常/愉快的瀏覽。編寫響應式應該在3方面加以注意：
? (1)采用流式布局
? (2)自適應的圖片和文字大小
? (3)CSS3媒體查詢技術
?
如何測試響應式網頁
? 三種測試方法：
? (1)使用真實的物理設備來測試
? 優點：測試結果真實可靠
? 不足：測試工作量太大
? (2)使用模擬軟件來測試
優點：物理設備減少
不足：效率偏低，部分功能無法測試，測試結果有待進一步驗證
? (3)使用Chrome自帶的設備模擬器來測試
? 優點：功能豐富(模擬多種設備、網速、經緯度、加速度....)
不足：測試結果有待進一步驗證
?
| 2010年之前，所有的HTML網頁都是為PC編寫，iOS中瀏覽這樣的網頁，只能把所有的內容縮放到剛剛好可以在手機屏幕中觀看——文字、圖片縮放的很小近乎無法觀看。 iOS最先提出了viewport的概念，寬和高可以指定為任意大，從而可以在一個較小手機屏幕下不經縮放的瀏覽一個很大的網頁——副作用是：用戶可能不得不左右滑動屏幕。Android系統后來也采用了此概念。 ? |
?
7.如何編寫響應式網頁——重點
? (1)聲明viewport元標簽——只對iOS和Android
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
避免用戶左右滑動屏幕的問題，初始時不進行縮放，且不允許用戶縮放
? (2)尺寸和大小不要使用絕對單位（如px），而用相對單位，如%、auto、em
? (3)采用流式布局
? (4)使用自適應/響應式圖片
img {
max-width: 100%; /*指定占父元素的百分比，且不能超過自身原始大小，防止無限放大*/
}
? (5)根據當前瀏覽設備的不同，有選擇性的執行不同的CSS代碼——CSS3 Media Query——實現響應式網頁最最重要的技術！
?
8.CSS3媒體查詢技術
? Media：瀏覽網頁的設備，如screen、print、tv、projection、tty、braille.....
? Media Query：CSS3中提供的一門技術，可以自動查詢出當前瀏覽設備的種類、寬高、分辨率、色彩位深、方向(portrait、landscape)等物理特性，有選擇性的執行不同的CSS代碼。
? 具體有兩種用法：
? (1)有選擇的執行不同的外部CSS文件
<link media="screen and (min-width:768px) and (max-width:992px)" rel="stylesheet" href="xx.css">
? 缺陷：不論當前的瀏覽設備什么類型，所有link的css文件都會被加載，但有可能不會被執行。
? (2)有選擇性的執行某個CSS文件中的部分內容
在一個CSS文件中，編寫：
@media screen and (min-width:768px) and (max-width:992px) {
body { ... }
.box { ...}
}
?
?
愛卡（深圳）管理有限公司
? ? ? ?分享每一刻精彩
? ? ?微信：iCafeYOJOY
? ? 微博：http://weibo.com/iCafeYOJOY
? ? 官網：www.icafe.im
轉載于:https://www.cnblogs.com/iCafe/p/5753820.html
總結
- 上一篇： linux 内核驱动的名字,Linux内
- 下一篇： 思源黑体（魅族）、方正兰亭（小米）、冬青