<form id="bbz97"><th id="bbz97"></th></form>
<address id="bbz97"></address>
<noframes id="bbz97"><noframes id="bbz97"><address id="bbz97"></address>
<address id="bbz97"></address>

<address id="bbz97"></address>

    <noframes id="bbz97">

     
    7×24小時咨詢熱線
    028-85581858
    當前位置:
    我要咨詢
    聯系我們
    響應式網頁設計
    來源: | 作者:scppdl | 時間:2018-07-27 | 2093 次瀏覽 | 分享到:
    響應式網站設計是一種網絡頁面設計布局,其理念是:集中創建頁面的圖片排版大小,可以智能地根據用戶行為以及使用的設備環境進行相對應的布局。
    中文名 響應式網頁設計 外文名 Responsive Web design 理    念 相對應的布局 技術手段 一切彈性化

    設計理念編輯
    響應式網站設計(Responsive Web design)的理念是:
    頁面的設計與開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等,以適應不同設備;換句話說,頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣,我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
    提出編輯
    Ethan Marcotte曾經在A List Apart發表過一篇文章"Responsive Web Design",文中援引了響應式建筑設計的概念:現出現了一門新興的學科——"響應式架構(responsive architecture)"——提出,物理空間應該可以根據存在于其中的人的情況進行響應。結合嵌入式機器人技術以及可拉伸材料的應用,建筑師們正在嘗試建造一種可以根據周圍人群的情況進行彎曲、伸縮和擴展的墻體結構;還可以使用運動傳感器配合氣候控制系統,調整室內的溫度及環境光。已經有公司在生產"智能玻璃":當室內人數達到一定的閾值時,這種玻璃可以自動變為不透明,確保隱私。
    將這個思路延伸到Web設計的領域,我們就得到了一個全新的概念。為什么一定要為每個用戶群各自打造一套設計和開發方案?和響應式建筑相似,Web設計同樣應該做到根據不同設備環境自動響應及調整。
    顯然,我們無法也無需使用運動傳感器或是機器人技術,響應式Web設計更多需要的是抽象思維。好在,一些相關的概念已經得到了實踐,比如液態布局、幫助頁面重新格式化的media queries和腳本等。但是響應式Web設計不僅僅是關于屏幕分辨率自適應以及自動縮放的圖片等等,它更像是一種對于設計的全新思維模式。
    技術手段編輯
    一切彈性化:
    我們通過響應式的設計和開發思路讓頁面更加"彈性"了。圖片的尺寸可以被自動調整,頁面
    液態圖片技術
    液態圖片技術
    布局再不會被破壞。雖然永遠沒有最完美的解決方案,但它給了我們更多選擇。無論用戶切換設備的屏幕定向方式,還是從臺式機屏幕轉到iPad上瀏覽,頁面都會真正的富有彈性。
    通過液態網格和液態圖片技術,并且在正確的地方使用了正確的HTML標記。
    響應式圖片:
    響應式圖片技術思想:不僅要同比的縮放圖片,還要在小設備上降低圖片自身的分辨率。這個技術的實現需要使用幾個相關文件,我們可以在Github上獲取。包括一個JavaScript文件(rwd-images.js),一個.htaccess文件,以及一些范例資源文件。大致的原理是,rwd-images.js會檢測當前設備的屏幕分辨率,如果是大屏幕設備,則向頁面head部分中添加BASE標記,并將后續的圖片、腳本和樣式表加載請求定向到一個虛擬路徑"/rwd-router"。當這些請求到達服務器端,.htacces文件會決定這些請求所需要的是原始圖片還是小尺寸的"響應式圖片",并進行相應的反饋輸出。對于小屏幕的移動設備,原始尺寸的大圖片永遠不會被用到。
    趨勢編輯
    響應式設計在2012年被提的比較多,但是響應式設計仍然在不斷變化,不斷創新。比如,新的設備不斷出來(iPad Mini),這讓以前的設計想法土崩瓦解。而各種Web的響應式設計也獲得了越來越多的注意,“讓人們忘記設備尺寸”的理念將更快地驅動響應式設計,所以Web設計也將迎來更多的響應式設計元素。
    UIKit
    UIkit 是一個輕量級、模塊化的前端框架,可快速構建強大的web前端界面。它根據不同的屏幕分辨率與上網設備,會自動做出響應,提供一致的體驗。
    Bootstrap
    由兩個Twitter員工開發并開源的前端框架,目前已經更新到了v4.1.2版本,在Github上非?;鸨?,在國內也有很多粉絲,值得一試。
    Adobe Edge Inspect
    對移動開發者尤其有用的工具,其前身是 Adobe Shadow,用于幫助設計師和開發者同時在多個移動設備上預覽應用設計,發現和解決跨平臺問題。
    Responsive Web Design Sketch Sheets
    如果你還在用紙和筆來創建你的實體模型,你可以用這些現有的草圖來設計你的交互網站了。
    Foundation
    號稱是世界上最先進的響應式前端框架。
    SimpleGrid
    輕量級的響應式 CSS 網格系統,讓你可以快速創建適應于手機和平板電腦的網站。
    Responsive Testing
    這個工具可以讓你預覽你設計網頁在不同設備上的效果,只需要訪問它的網站并輸入你網站的地址就可以看到了。
    十大開發框架編輯
    Gumby Framework
    Gumby 2是建立在Sass基礎上的。Sass是一款非常強大的CSS 預處理器,允許用戶自主快速的開發擴展Gumby,同時提供很多新的工具來自定義和擴展Gumby框架。Gumby 2是一個非常棒的響應式CSS框架。
    Get UI Kit
    Get UI Kit是一款輕量級、模塊化的前端框架,可快速構建強大的web前端界面,而且,它是一款開源的前端UI界面的框架,可以無任何限制的使用UIKit 來創建自己的風格。
    Foundation
    Foundation是一個易用、強大而且靈活的框架,用于構建基于任何設備上的Web應用。提供多種Web上的UI 組件,如表單、按鈕、 標簽等。
    Semantic
    UI是Web的靈魂!Semantic是為工程師而制作的可復用的開源前端框架。提供各種UI組件,使得開發更加直觀、易于理解。
    52Framework
    52 Framework主要用于優化HTML5和CSS3的跨瀏覽器兼容性的框架,可在所有主流瀏覽器上運行。
    PureCSS
    Pure是一組小的、響應式CSS模塊,可用于任意Web項目中。它可作為每個網站或Web應用的起步工具,幫助開發者處理應用程序所需的所有CSS工作,同時不會讓每個應用千篇一律。
    Responsablecss
    Responsable使用最少的Sass,帶給你最完美的響應式框架。
    TukTuk
    TukTuk支持代碼重用功能,提供更加快速、高效的樣式列表,易于添加與維護。
    Kube
    Kube是全球最為流行、最靈活的CSS框架之一。其帶給你最強大的功能選擇,極具創意性與美觀性。
    Ivory
    Ivory是一款強大、靈活、易用的響應式框架。 Ivory基于12列的響應式網格布局,包含表格,按鈕,表格,分頁,撥動開關,工具提示,手風琴,選項卡等網站中常用的組件和樣式。  
    應用到瀏覽器編輯
    1. 測試主流表格因素和瀏覽器
    如今客戶不僅僅使用iPhone和筆記本,而且使用iMac的27英寸顯示器,10英寸的Kindle和很多平板設備。這些設備可能會使用不同的瀏覽器,并且每種表格因素和瀏覽器的組合都可能導致不同的頁面渲染。并且這些行為可能在每個版本上都不太一樣。
    好消息是瀏覽器是免費的。如果你使用Windows平臺,可以很容易地安裝主流瀏覽器—Internet Explorer、Chrome、Firefox—然后可以使用免費工具,比如Browsershots,或者付費工具,比如CrossBrowserTesting,來檢查網頁在Safari上的外觀。如果你使用的是Mac,可以安裝除了Internet Explorer(IE)之外的所有瀏覽器 -- 但是可以從Modern.ie上下載IE特定的虛擬機,從而輕松得到幾乎所有版本的IE。
    這時,“測試”工作主要是去查看網頁是否渲染正確,瀏覽所有的可選項,驗證動態內容是否能正常加載,看上去是否奇怪,并且執行并驗證程序主邏輯。如果是房屋抵押應用程序,那么就去嘗試新建一個抵押。如果是文字處理程序,就嘗試創建一個文檔——并且在測試過程中檢查用戶界面。
    我們也提到了平臺。需要找出軟件主要的使用者是誰。對于內部軟件,用戶很可能會使用筆記本,手機(Android和iOS),或者平板。建議購買每種主要類型的機器作為測試機型,這些費用相比整體開發成本而言應該非常小。當測試團隊等待所需的特定移動設備時,開發團隊很可能愿意分享他們的手機和平板。
    最后,考慮是否需要支持舊的瀏覽器,可能是為了公司客戶,并且在這些設備上做程序主邏輯測試。
    在此期間,可能會發現可用性問題,第一個圖片顯示的地方不合適,或者頁面“感覺”很奇怪。將這些發現分享給團隊。這可能不是個bug,但也可能是。
    2. 改變瀏覽器大小
    基于“響應式內容”的本質,頁面應該在任何合理屏幕大小的設備上看上去都很舒服,從300*300的手機到2550*1600像素的顯示器。最快最方便的評估響應式功能的方式是大幅改變瀏覽器的大小,檢查顯示情況。
    對于這類測試不需要任何搭建時間。只需要打開網頁,點擊瀏覽器的右上角,拖拽到所需的大小。文本是否在你認為應該在的位置,是否仍然可讀?圖像是否能合理伸縮?控件是否還在頁面上——按鈕,文本輸入框,日期控件和其他的——是否仍然可用?它們有沒有遮蓋掉其他重要的內容?
    危險之處是你發現了一個bug,可能很難重現,產品經理會說“沒有人會這么快地改變瀏覽器尺寸,把它拖拽到整個顯示器上,如果他們真這么做了,那么應該告訴他們不要這么做?!蹦憧赡軙l現一堆bug,卻無法說服開發人員修復它們。記?。赫f不定就有一種平板設備有這樣的屏幕分辨率。
    最新的IE和Chrome版本有工具可以幫助調整瀏覽器尺寸到需要的合適大小,比如移動手機或者平板。如果你在快速改變瀏覽器大小時發現了一個很難重現的bug,但是可以在一些擁有正常大小的設備上重現這個問題,那么你可能就有了需要修復這個問題的有力根據。
    3. 移動設備和旋轉
    移動設備使得響應式網頁設計變得如此重要。移動設備也給響應性帶來了一個新的要求:旋轉。這些小型設備會跟著主人去任何地方。這些設備也可以隨意旋轉,從縱向到橫向再轉回來。這似乎和改變大小很類似。但是實際上設備的每次旋轉之后,網頁都需要重新渲染。
    一些應用在改變大小時可能會改變自身行為 -- 比如,iOS7的計算器,在IPhone4的縱向模式下會隱藏科學計算選項。
    4. 響應式檢查
    響應式檢查點的所有描述在網上都可以找到。其中的一些很簡單,告訴你在不同的瀏覽器尺寸下網頁看上去的樣子。更多復雜的選項,比如BrowserStack,模擬一系列可能的屏幕尺寸和橫向縱向模式切換能力的組合。這樣的可配置性和模擬尺寸交互的組合可以幫助創建強大的響應式測試環境。
    這是ami.responsivedesign.is上的簡單圖片,以某個真實網頁的URL為輸入,將其在五種不同的設備上加以渲染。ami.responsivedesign.is網頁不是將其當做靜態圖片加以渲染,圖片上的滾動欄可以上下滾動。 
    測試工具編輯
    1.ProtoFluid 4
    ProtoFluid簡化了液態布局的開發,能夠適應CSS和響應式設計,能夠構建出精準、動態的視角。開發者可免費使用ProtoFluid,并且還允許開發者使用其它擴展工具,比如FireBug。
    2.Viewport Resizer
    Viewport Resizer是一款基于瀏覽器的測試工具,它能夠測試任何網站的響應能力。用戶只需把網頁拖入書簽,然后點擊需要測試的網頁即可檢查頁面的屏幕分辨率。此外,Viewport Resizer自帶的分辨率尺寸不一定能夠滿足你的需求,所以,用戶還可以自定義添加其它類型的屏幕尺寸。
    3.Responsive.IS
    用戶只需輸入要測試的網址,即會根據你所選的設備自動改變網頁的大小。
    4.Respondr
    Respondr是一款輕量級、非常方便小巧的工具,用戶只需輸入網頁的URL,然后選擇你所要測試的設備,如iPhone、iPad、桌面瀏覽器等,即可看到網頁在不同平臺上的顯示效果。
    5.Froont
    Froont是一款基于Web的設計工具,不需要程序員介入的設計編程工具,為設計師們提供了可視化的在線網頁設計環境。
    6.Responsivepx
    Responsivepx 是一個功能簡單、但卻很方便實用的測試工具,可以測試網頁在不同尺寸的顯示器上所呈現的效果。此外,Responsivepx 能讓你自行調整要顯示的尺寸長寬px值。用戶即可在線使用,也可以在本地上對網頁進行測試。
    7.Responsive
    Responsive可以讓你看到測試網站在同一個屏幕上顯示不同分辨率下的效果,不需要切換到不同的模式。
    8.Screenfly
    Screenfly是一款免費的測試工具,可以用來測試不同客戶端下(不同顯示器或者移動設備)網站的顯示狀況。
    9.Review.js
    Review.js是一個動態的viewport系統,提供高效的響應式網頁瀏覽選擇。它是一個純JavaScript實現的類庫,更少的請求使得它對寬帶的要求更少,支持插件式的擴展,并且可以支持自定義窗口改變事件。此外,該系統還提供了‘Opt-In’和‘Opt-Out’響應式設計狀態。
    10.Responsinator
    Responsinator提供了仿真的Web界面來測試你的響應式設計,提供了iPhone,Android,iPad,Kindle及其多種設備上的預覽效果,你可以方便地看到需要支持的設備的響應式設計效果圖。
    11.resizeMyBrowser
    resizeMyBrowser是一個響應式網頁設計工具,允許你選擇需要測試的瀏覽器尺寸。用戶可以在15種不同的預設尺寸中選擇或輸入自定義的尺寸。
    12.Responsive Design Bookmarklet
    Responsive Design Bookmarklet是一款響應式設計測試工具,用戶需要把網頁拖拽到書簽上方的書簽欄,瀏覽器即會自動應用。用戶可以查看網頁在不同設備上的預覽效果。
    13.Adobe Edge Inspect CC
    Adobe Edge可以讓你在設備上預覽和檢查響應式網站。
    14.I am mobile
    I am mobile可以測試網頁在各種不同窗口上的顯示效果,并且還會給出一些建議,讓你的網站更具移動友好性。
    15.Retina Images
    Retina Images主要用來測試圖片在不同的設備上的顯示情況,這樣有利于用戶在開發出高清晰度的圖片。此外,你無需更改任何img標簽,并且Retina Images安裝也十分方便。 
     新聞排行
    广东快三