1.將width改為max-width，來適應螢幕的變動來改變自身寬度等。其他亦然。
/***查詢，參考部分bootstarp框架*/
/*當頁面大於1200px時，大螢幕，主要顯示pc端*/
@media (min-width: 1200px){}
/*在992 和1199 畫素之間的螢幕裡，中等螢幕，解析度低的pc*/
@media (min-width: 992px) and (max-width: 1199px){}
/*在768 和991 畫素之間的螢幕裡，小螢幕，主要是pad*/
@media (min-width: 768px) and (max-width: 991px){}
/*在480 和767 畫素之間的螢幕裡，超小螢幕，主要是手機*/
@media (min-width: 480px) and (max-width: 767px){}
/*在小於480px的螢幕裡，微小螢幕，更低解析度的手機*/
@media (max-width: 479px){}
響應式網頁
做響應式網頁需要注意 1.使用百分比來代替固定長度 2.當你需要在較大解析度下得到固定寬度時，使用max width而不是width，因為他可以適應較小的解析度 3.不要忘記給替換元素 eg.img,object,video,iframe 設定乙個max width，值為100 4.背景圖鋪滿整個容...
響應式網頁設計示例
若要全方位測試你自己或別人的響應式 則需要針對每一種裝置和不同的螢幕尺寸，分別準備不同的測試系統。儘管這是最完美的辦法，但通過改變瀏覽器視窗大小其實就可以完成大多數測試。除此之外，還有很多第三方外掛程式和瀏覽器擴充套件可供選擇，通過它們可以將當前瀏覽器視窗或視口設定為指定畫素。必要時，還可以自動將當...
什麼是響應式網頁？
進入移動網際網路時代，各種不同的移動智慧型裝置層出不窮，比如說智慧型手機 平板電腦 可穿戴式裝置等。據2017年8月第40次 中國網際網路絡發展狀況統計報告 的統計結果，截至2017年6月，我國網民規模達到7.51億，其中手機網民達7.24億，佔比達96.3 較2016年底增長了1.2個百分點，與此...