Menu

如何做好響應式網站的柵格式設計

西安凡高網絡西安凡高網絡 錄入時間 2019-12-26
一鍵分享
分享到:

響應式網站柵格系統
    柵格系統是響應式中很重要的一環,是整個響應式設計的基礎。柵格的運用在于統一設計與前端開發的規范性,使網頁的響應式布局有理可據,更加的靈活合理。通常我們說起響應式設計都是針對網頁設計的,主要是因為同一個網頁,有可能是在一個4寸的Android手機上瀏覽,也有可能是在一個27寸的iMac上瀏覽,網頁的設計者必須滿足在不同尺寸設備上的瀏覽需求和良好的體驗,從而催生出這種適應屏幕分辨率的設計方法。來看看下面兩種頁面,毫無疑問的大家會更喜歡后者。
      請不要誤會,這并不是指單獨適配的移動版網頁,而是同一個頁面,隨著屏幕尺寸的改變,自適應地改變頁面布局。下圖就是一個栗子,隨著屏幕的變寬,網頁中的模塊也隨之調整了位置,這才是「響應式」。
    響應式設計有些什么優點呢?
不必單獨維護移動和PC兩套站點,降低人力成本
可以復用設計元素,內容資源
      同一網址自適應不同設備,利于不同設備的用戶相互分享網址
SEO優化,搜索引擎更愿意收錄同時適配移動設備和PC設備的網頁
看上去是不是有點心動了,想將自家的網站改造成響應式設計的,那么需要做些什么呢?
首先,你需要一名設計獅。需要將網頁中的元素分模塊設計,針對不同的屏幕,調整出不同的布局。現在流行一種「移動優先」的策略,也就是說先行設計移動端的樣式,然后再擴展成為PC端樣式,因為移動端的樣式相對簡單,漸進增強為PC端樣式,更為平滑。
    然后,你還需要一名前端攻城獅。響應式設計的落地,主要是由前端攻城獅來完成,他要將設計獅設計的不同布局,寫成CSS文件,適配到不同的分辨率下。同時,他還要使用資源查詢(Media Queries)根據      不同的分辨率,拉取不同尺寸的資源,以加快頁面的加載速度,并且減少流量的消耗。就像下面這張圖,在不同的設備上,應該裁剪不同的尺寸。
    最好的情況,你還有一名后臺攻城獅。前面我們看到,前端攻城獅會寫適配不同屏幕的CSS代碼,一次頁面加載,會將所有屏幕尺寸的CSS代碼都加載一遍,這里難免有些冗余。如果你有一個強有力的后臺,那就可以做到只對某些設備下方特定的CSS代碼,在這種優化情況下,避免了不必要的資源浪費。
【延伸閱讀】:
  雖然響應式設計的優勢和趨勢已被普遍認可,但目前響應式設計的模式的普及還是有很多難題需要突破:
1、響應式圖片:目前彈性圖片的做法主要是:縮放、剪裁、分條件加載等實現方法本質上都只是一個技巧,只是治標不治本地掩蓋了問題,并未真正完美地實現圖片的彈性。
2、跨端的交互:在響應式設計中,我們不僅要需要考慮桌面用戶的使用習慣,還必須兼顧不同尺寸的手持設備。比如在桌面端無盡優雅的Hover,在移動端卻是無比糟糕的體驗,如何“求同存異”,讓各端體驗均能最佳,還是需要繼續深入探究的。
3、性能:性能估計是在響應式開發中最大的痛,按條件加載、隱藏或顯示什么內容,都會比單一條件判斷的代碼結構來的繁瑣,并影響體驗及維護。尤其是移動性能上,更多樣的設備具有更加復雜的使用環境,如何識別設備,并讓設備在不同環境均能良好體驗,也是一根硬骨頭。
4、合作流程:響應式設計遠遠不止是一種簡單的設計策略,它為Web項目帶來的是一整套全新的、完整的方法,還應該包括一種新的、可以更好地利用這一模式的工作流程。

網站建設咨詢:029-88661315

經典客戶案例展示

  • 凡高微信公眾號
  • 響應式客戶端

西安凡高網絡科技有限公司
專注于品牌網站建設、集團網站建設、小程序開發、網絡優化推廣業務
服務知名客戶超過2000家

亿客隆彩票