自適應/響應式的功課.....

Fourierr 發布于2019-08-30 14:05 / 830人閱讀

摘要：請開始清算市面上的電子產品得有百八十種的屏可以供君挑選這其實對在前端一線工作的程序員而言挺災難的自適應響應式概念解決不同終端的適配問題我們一般有兩套方案一是自適應布局二設置響應式布局所謂的自適應就是屏幕變大或是變小它的內容也要做到同步縮放到

請開始清算市面上的電子產品,得有百八十種的屏可以供君挑選....這其實對在前端一線工作的程序員而言挺災難
的....

自適應/響應式概念

解決不同終端的適配問題,我們一般有兩套方案,一是自適應布局,二設置響應式布局.

所謂的自適應就是屏幕變大或是變小,它的內容也要做到同步縮放,到某個寬度了會過于擁擠,內容展示不清,那就喊停加個min-width;
而響應式就是不同分辨率都可以私人定制一套樣式布局,大碼女孩穿xl,而紙片girl穿xs~

總而言之,就是自適應的樣式布局從一而終,可以在不同分辨率的終端上顯示同一樣式的網頁,靈活設置寬度,而響應式的樣式布局都會有或多或少的調整....

自適應的網站: https://status.heroku.com/
響應式的網站: https://www.microsoft.com/zh-cn/

(貼兩個網站,自助縮放,自行體會...)

開發工作場景

分辨率跨度太大,想要做到完美適配非常難的...正常情況下公司一般都會做兩套版本,一個應用在pc端,一個運用于移動端...

但做兩套設計一定會導致開發和維護成本較高,所以為了節約點開發時間,還是會有些追求快速開發的公司希望可以只做一套設計適配各個終端,這時候就得依賴響應式的布局了....

響應式布局的經典體驗就是bootstrap. 他自動識別屏幕的分辨率,做出相應的調整,布局和內容或多或少會有點不一樣....比如本來橫向導航條變成漢堡菜單,本來一行三圖,變成一行一圖,本來的pc上展示的模塊隱藏了...

完成一個響應式的頁面要:

需要允許網頁寬度自動調整,第一個動作就是在head里頭加一行viewpoort標簽

不可設置固定寬度,可以width的值可以設置百分比,或是auto或是rem.

字體單位最好使用em或者rem

流式布局各個區塊都是浮動的,寬度不足,自動掉下,避免出現橫向導航條....注意絕對定位要少用!

利用 media,不同寬度引入不同的css文件

css@media規則,統一css文件可以根據不同分辨率,選擇應用不同的css規則

圖片要自動縮放,即設置 max-width;100%

本篇寫于:學習了https://my.oschina.net/u/1992... 之后...

GPU云服務器云服務器自適應文本自適應文字自適應自適應沉底

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115760.html

（轉）響應式和自適應區別

摘要：于是出現了一種新的布局方式寬度自適應布局。下面再從直觀一點的來看，響應式和自適應的區別首先兩種方式解決問題的是不一樣的。響應式的概念應該覆蓋了自適應，而且涵蓋的內容更多。圖片的自適應除了布局和文本，自適應網頁設計還必須實現圖片的自動縮放。自適應的體驗http://m.ctrip.com/html5/ 響應式的體驗 http://segmentfault.com/ 整理了幾篇自適...

rockswang 2019-08-20 14:45 評論0 收藏0
（轉）響應式和自適應區別

摘要：于是出現了一種新的布局方式寬度自適應布局。下面再從直觀一點的來看，響應式和自適應的區別首先兩種方式解決問題的是不一樣的。響應式的概念應該覆蓋了自適應，而且涵蓋的內容更多。圖片的自適應除了布局和文本，自適應網頁設計還必須實現圖片的自動縮放。自適應的體驗http://m.ctrip.com/html5/ 響應式的體驗 http://segmentfault.com/ 整理了幾篇自適...

dockerclub 2019-08-30 15:53 評論0 收藏0
（轉）響應式和自適應區別

摘要：于是出現了一種新的布局方式寬度自適應布局。下面再從直觀一點的來看，響應式和自適應的區別首先兩種方式解決問題的是不一樣的。響應式的概念應該覆蓋了自適應，而且涵蓋的內容更多。圖片的自適應除了布局和文本，自適應網頁設計還必須實現圖片的自動縮放。自適應的體驗http://m.ctrip.com/html5/ 響應式的體驗 http://segmentfault.com/ 整理了幾篇自適...

Ilikewhite 2019-08-01 16:24 評論0 收藏0