資訊專欄INFORMATION COLUMN
摘要：雖然兼容性方案的體驗不如常規(guī)方案，但保證了功能可用性移動優(yōu)先的響應式布局采用的是漸進增強原則，制作響應式網(wǎng)站時，先搞定手機版，然后再去為更大設備去設計和開發(fā)更復雜的功能。
隨著移動互聯(lián)網(wǎng)的興起，不同設備的分辨率相差較大，如果在不同的設置上顯示同一個頁面，則用戶體驗差。響應式網(wǎng)頁設計是一種方法，使得一個網(wǎng)站能夠兼容多個終端，而不用為每個終端制作特定的版本。它使得一個網(wǎng)站可以在任何類型的屏幕上，都可以被輕松地瀏覽和使用。采用響應式設計，在不同設備中，網(wǎng)站會重新排列，展現(xiàn)出不同的設計風格，以完美的適配任何尺寸的屏幕
關于響應式設計，有漸進增加和優(yōu)雅降級兩個設計原則
漸進增強(progressive enhancement)，是指基本需求得到滿足、實現(xiàn)，再根據(jù)不同瀏覽器及不同分辨率設備的特點，利用高級瀏覽器下的新特性提供更好的體驗。比如，圓角、陰影、動畫等
優(yōu)雅降級(graceful degradation)則正好相反，現(xiàn)有功能已經(jīng)開發(fā)完備，但需要向下兼容版本和不支持該功能的瀏覽器。雖然兼容性方案的體驗不如常規(guī)方案，但保證了功能可用性
移動優(yōu)先的響應式布局采用的是漸進增強原則，制作響應式網(wǎng)站時，先搞定手機版，然后再去為更大設備去設計和開發(fā)更復雜的功能。特征是使用min-width匹配頁面寬度。從上到下書寫樣式時，首先考慮的是移動設備的使用場景，默認查詢的是最窄的情況，再依次考慮設備屏幕逐漸變寬的情況
由簡入繁易，由繁入簡難。如果是桌面優(yōu)先，布局端是桌面端代碼，只有在media中，才是手機端代碼，加載了多余的桌面端代碼。如果是圖片文件，則下載的無用資源更多
無論從界面設計還是代碼執(zhí)行效率的角度而言，移動優(yōu)先都有明顯優(yōu)勢
響應式設計包括三個要素：彈性布局、媒體查詢和彈性圖片
彈性布局和媒體查詢已經(jīng)在其他博客中詳細介紹，下面來重點介紹下彈性圖片
彈性圖片，也稱為響應式圖片，是指圖片能夠跟隨父容器寬度變化而變化，同時寬度受限于父容器，不可按照圖片原始尺寸展現(xiàn)
因此，最簡單的響應式圖片設置max-width為100%即可
img{ max-width: 100%; }
只有一張圖片的情況下，采用上面代碼即可。如果提供了高清圖，要根據(jù)設備大小加載不同的圖片，則需要額外的處理。有如下幾種處理方式
1、采用picture元素，IE瀏覽器、android4.4.4-瀏覽器不兼容
"(min-width:50em)" srcset="img/l.jpg"> "(min-width:30em)" srcset="img/m.jpg"> "img/s.jpg" alt="#">
2、采用img元素的srcset和sizes屬性，IE瀏覽器、android4.4.4-瀏覽器不兼容
<img src="img/480.png" srcset="img/480.png 480w,img/800.png 800w, img/1600.png 1600w" sizes="(min-width:800px) 800px,100vw" />
3、采用js，根據(jù)window的resize事件，修改圖片的路徑
function makeImageResponsive(){ var width = $(window).width(); var img = $(.content img); if(width <=480){ img.attr(src,img/480.png); }else if(width <=800){ img.attr(src,img/800.png); }else{ img.attr(src,img/1600.png); } } $(window).on(resize load,makeImageResponsive);
4、后端配置，前端傳遞給后端當前設備的一些特征，后端通過這些特征決定做怎樣的響應。但目錄兩個后端響應式解決方案Responsive_Images和Adaptive-Images都不再維護
【優(yōu)點】
1、減少工作量，網(wǎng)站、設計、代碼、內(nèi)容都只需要一份
2、節(jié)省時間
3、解決了設備之間的差異化展示
4、搜索優(yōu)化
5、更好的用戶體驗
【缺點】
1、需要加載更多的樣式和腳本資源，加載速度受到影響
2、設計比較難精確定位和控制
3、老版本瀏覽器兼容不好
下面介紹四種響應模式
【Column Drop 列下沉】
手機上每一個大塊多帶帶占據(jù)一行，隨著屏幕尺寸拉伸會在同一行上形成多個 column 列
【Mostly Fulid 基本流體式】
基本上跟 Column Drop 一樣，但是有一點點“固定布局“的特點：當?shù)竭_一定寬度后，主體內(nèi)容部分不再變寬，成為固定寬度
【Layout Shifter 變換式】
變換式，也就是不必遵循原有內(nèi)容順序，可以根據(jù)最佳展示需要來調(diào)整大塊順序
【Off Canvas 抽屜式】
抽屜式，屏幕不夠?qū)挼臅r候，隱藏，通過按鈕呼出。足夠?qū)挼钠聊簧希冀K顯示
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/2262.html
摘要：接下來做端一般都寫手機最大也就先隱藏手機菜單和按鈕優(yōu)先級問題解決方法直接使用用谷歌開發(fā)者工具查看優(yōu)先級里面的垂直居中再把寫成布局只要改成里面的子項目就變成一行了菜單導航導航導航導航導航到航導航導航導航導航方法切換元素的可見狀態(tài)。 CSS5:移動端頁面(響應式) 如果手機端和PC端頁面差別很大,就不要寫響應式,不要寫@media 就直接將兩個頁面拆開成兩個文件就可以了.關于判斷是手機端你...
摘要：概念響應式網(wǎng)頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發(fā)方案設計應該做到根據(jù)不同設備環(huán)境自動響應及調(diào)整。預計到年，移動互聯(lián)網(wǎng)的數(shù)據(jù)流量將超越端的流量。 概念 響應式網(wǎng)頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發(fā)方案？Web設計應該做到根據(jù)不同設備環(huán)境自動響應及調(diào)整。當然響應式Web設計不僅僅是...
摘要：概念響應式網(wǎng)頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發(fā)方案設計應該做到根據(jù)不同設備環(huán)境自動響應及調(diào)整。預計到年，移動互聯(lián)網(wǎng)的數(shù)據(jù)流量將超越端的流量。 概念 響應式網(wǎng)頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發(fā)方案？Web設計應該做到根據(jù)不同設備環(huán)境自動響應及調(diào)整。當然響應式Web設計不僅僅是...
摘要：我們推薦使用作為字體單位默認情況下我們標簽的為，我們可以利用媒體查詢，設置在不同設備下的字體大小百分比布局用過的同學都知道，它里面有個柵格系統(tǒng)，說白了就是利用百分比來定義我們元素寬高，而不直接使用。 曾幾何時我認為使用了媒體查詢就是響應式布局，這種理解實在是太淺薄了，今天就讓我們重新來認識下什么是響應式布局 查看demo 查看源碼，歡迎star 什么是響應式布局 前幾年風靡一時Boot...
閱讀 769·2023-04-25 19:43
閱讀 4021·2021-11-30 14:52
閱讀 3855·2021-11-30 14:52
閱讀 3909·2021-11-29 11:00
閱讀 3838·2021-11-29 11:00
閱讀 3949·2021-11-29 11:00
閱讀 3613·2021-11-29 11:00
閱讀 6310·2021-11-29 11:00
