2021-02-26 分類: 響應(yīng)式網(wǎng)站
移動互聯(lián)網(wǎng)時代,如何使我們設(shè)計的網(wǎng)站在移動端也能被用戶瀏覽呢?這里給大家介紹響應(yīng)式設(shè)計。
1.響應(yīng)式定義
響應(yīng)式網(wǎng)頁設(shè)計(Responsive Web Design簡稱RWD)這個術(shù)語,由伊桑?馬科特(Ethan
Marcotte)提出。他在A List Apart 發(fā)表了一篇開創(chuàng)性的文章,將三種已有的開發(fā)技術(shù)(彈性網(wǎng)格、彈性圖片、媒體查詢)整合起來,并命名為響應(yīng)式網(wǎng)頁設(shè)計。
響應(yīng)網(wǎng)站設(shè)計應(yīng)根據(jù)用戶使用的設(shè)備的分辨率大小進(jìn)行相應(yīng)的響應(yīng)與調(diào)整,大限度滿足
不同設(shè)備用戶體驗需求。響應(yīng)式網(wǎng)站設(shè)計就是一個網(wǎng)站能夠兼容多個終端,不需要為每個終端做一個特定的版本。
簡單地理解:一個響應(yīng)式網(wǎng)站=phone端網(wǎng)站+pad端網(wǎng)站+電腦端網(wǎng)站
2.響應(yīng)式設(shè)計中的界面設(shè)計
對于界面設(shè)計,我們以前針對桌面產(chǎn)品的設(shè)計可能就是一個尺寸的,每個模塊的位置比較
固定,但是在響應(yīng)式設(shè)計中,這些東西就改變了,設(shè)計師會根據(jù)產(chǎn)品的需要設(shè)計多個版本的設(shè)計。
但是有一點我們需要注意的是 DOM 節(jié)點的順序最好保持一致,因為在響應(yīng)式的頁面中,
我們會使用流式布局,在固定版式通過絕對定位或者外邊距負(fù)值的方式改變DOM 順序和視覺順序的技巧,在這里可能并不適用。
3.蘋果官網(wǎng)
1.彈性網(wǎng)格.可基于屏幕分辨率擴展或拉伸內(nèi)容。
2.彈性圖片在小屏幕上可縮小尺寸,并可擴展大大尺寸以支持大屏幕。
3.媒體查詢,是放在站點HTML和樣式表中的代碼段,用來收集設(shè)備顯示能力的信息以支持
多種形式的界面。
1.外部環(huán)境
快速增長且日趨加劇的可聯(lián)網(wǎng)設(shè)備的多樣化,讓現(xiàn)今已不再有標(biāo)準(zhǔn)的屏幕尺寸。
2.自身特色 嚴(yán)格定義的響應(yīng)式一般是指響應(yīng)式Web設(shè)計,而Web憑借其特有的靈活性和可塑性,可以適應(yīng)各種尺寸和配置的設(shè)備,可以無處不在。
3.內(nèi)部需求
響應(yīng)式設(shè)計概念一提出,各大網(wǎng)站及平臺都希望能夠采用這秉一應(yīng)萬的模式,可以更靈活
地去適配更多設(shè)備,尤其是現(xiàn)在移動設(shè)備大爆棚的時代。
4 .一切彈性化
我們通過響應(yīng)式的設(shè)計和開發(fā)思路讓頁面更加"彈性"了。圖片的尺寸可以被自動調(diào)整,頁
面布局再不會被破壞。雖然永遠(yuǎn)沒有最好的解決方案,但它給了我們更多選擇。無論用戶切換設(shè)備的屏幕定向方式,還是從臺式機屏幕轉(zhuǎn)到iPad上瀏覽,頁面都會真正的富有彈性。通過液態(tài)網(wǎng)格和液態(tài)圖片技術(shù),并且在正確的地方使用了正確的HTML標(biāo)記。
5 .響應(yīng)式圖片
響應(yīng)式圖片技術(shù)思想:不僅要同比的縮放圖片,還要在小設(shè)備上降低圖片自身的分辨率。
當(dāng)這些請求到達(dá)服務(wù)器端,后臺文件會決定這些請求所需要的是原始圖片還是小尺寸的"響應(yīng)式圖片",并進(jìn)行相應(yīng)的反饋輸出。對于小屏幕的移動設(shè)備,原始尺寸的大圖片永遠(yuǎn)不會被用到。
優(yōu)點
1、支持任何設(shè)備和系統(tǒng)
如今是移動互聯(lián)網(wǎng)時代,人們上網(wǎng)不再是僅限于PC電腦,手機、平板等移動設(shè)備的使用
率也越來越高。而響應(yīng)式網(wǎng)站可支持任何設(shè)備訪問,而且還可以在瀏覽器中調(diào)整網(wǎng)站的寬度,讓網(wǎng)站不出現(xiàn)滾動條,使得用戶不管在任何一種顯示器上瀏覽網(wǎng)站,都不會出現(xiàn)布局混亂、顯示不全、或者是亂碼的問題,從而大程度的提高用戶的網(wǎng)站體驗。
2、可降低制作的時間成本和資金成本
按照傳統(tǒng)方法制作出的網(wǎng)站比較有局限性,不一定能夠在各種設(shè)備和瀏覽器正常訪問。有
的企業(yè)就需要做一個PC端網(wǎng)站和一個手機網(wǎng)站甚至是做一個APP,這些都需要投入大量的時間和金錢。而建設(shè)響應(yīng)式網(wǎng)站就可以很好解決這個問題,花一份的錢,就能夠獲得兩種網(wǎng)站的體驗,最終實現(xiàn)一站多用的效果,從而達(dá)到節(jié)省網(wǎng)站建設(shè)成本。
3、三站合一,維護(hù)輕松
電腦、手機、微信三個網(wǎng)站使用的是同一個網(wǎng)址,同一個后臺管理,數(shù)據(jù)同步更新,所有
圖片和內(nèi)容只需要上傳更新一次即可,維護(hù)簡單輕松,節(jié)約大量的時間和金錢。
缺點
1:對IE老版兼容性不友好
對于老版本IE(IE6、IE7、IE8)支持不好,這是一個致命的問題,如果你的網(wǎng)站用戶大
多還采用老版本IE的話,建議不做響應(yīng)式網(wǎng)頁設(shè)計。
2:靈活性有所欠缺
基于不同終端的設(shè)備屬性不同,對產(chǎn)品用戶體驗要求就會截然不同。內(nèi)容比較多帶有功能
性的網(wǎng)站不適合做響應(yīng)式
3:速度可能會變慢
由于響應(yīng)式頁面是同時下載多套CSS樣式代碼,可能在手機上就下載PC、Pad的冗余代碼,
導(dǎo)致文件變大,影響加載速度。
1.同一頁面在不同大小和比例上看起來都應(yīng)該是舒適的
2.同一頁面在不同分辨率上看起來都應(yīng)該是合理的
3.同一頁面在不同操作方式(如鼠標(biāo)和觸屏)下,體驗應(yīng)該是統(tǒng)一的
4.同一頁面在不同類型的設(shè)備(手機、平板、電腦)上,交互方式應(yīng)該是符合習(xí)慣的。
1 iPad設(shè)計尺寸
尺寸:1024*768px
狀態(tài)欄:20px
導(dǎo)航欄:44px
標(biāo)簽欄:49px
2 THE OUTENT 電商APP
1.字體
2.圖標(biāo)
3.公共控件
3 iphone設(shè)計尺寸
尺寸:750*1334px
狀態(tài)欄:40px
導(dǎo)航欄:88px
標(biāo)簽欄:98px
界面尺寸及欄高度
1.文字
在一款A(yù)PP中字號范圍一般在20-36之間(@2x),當(dāng)然iOS 11中出現(xiàn)了大標(biāo)題的設(shè)計,
字號還是要根據(jù)產(chǎn)品屬性酌情設(shè)定。另外需要注意的一點是所有的字號設(shè)置都必須為偶數(shù),上下級內(nèi)容字號極差關(guān)系為2-4號。
通過本篇文章你可以學(xué)到以下幾點:
1.什么是響應(yīng)式網(wǎng)站;
2.響應(yīng)式網(wǎng)站的前景;
3.響應(yīng)式網(wǎng)站有哪些優(yōu)缺點;
4.響應(yīng)式網(wǎng)站設(shè)計的四個層次;
5.常見的移動端設(shè)備的尺寸規(guī)范
當(dāng)前題目:響應(yīng)式網(wǎng)站詳細(xì)概述
標(biāo)題路徑:http://m.rwnh.cn/news44/102994.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有響應(yīng)式網(wǎng)站等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容