瀘州網站制作-瀘州網站建設-北斗網絡幫你做定位、挖賣點、塑價值,讓您的網絡營銷事半功倍!

免費咨詢熱線:0830-2278115

關注我們:

 北斗網絡微信 關注北斗網絡微博

北斗網絡網絡營銷合作熱線

在線客服
熱線電話

微信在線客服

您當前的位置:主頁 > 新聞中心 > 行業新聞

瀘州網站建設系統解決響應式網站圖片響應式難題!

文章來源:運營部 文章發布:運營部 發布時間:2019-04-11


隨著移動設備的普及,不同尺寸的顯示終端越來越多,這些讓我們看到了響應式網站普及的曙光光及迫切需求。但響應式網站一個必須要解決的問題:如何將網站中的圖片圖片響應式。一張大圖如果PC端、平板端、手機端都是一樣大的話,實在太不科學了,一是手機流量占用過大,下載速度慢;其次就是圖片尺寸大比例壓縮后會變得模糊。



如果圖片是以背景方式存在,這種比較好解決,可以采用媒體查詢,為不同尺寸的顯示終端設置不同圖片。但,如果是網頁中插入的圖片解決起來就比較復雜一點了。

首先給讓瀘州網站建設小編大家介紹一下響應式頁面的設計流程

第一步:確定需要兼容的設備類型、屏幕尺寸

通過用戶研究,了解用戶使用的設備分布情況,確定需要兼容的設備類型、屏幕尺寸

設備類型:包括移動設備(手機、平板)和pc。對于移動設備,設計和實現的時候注意增加手勢的功能。

屏幕尺寸:包括各種手機屏幕的尺寸(包括橫向和豎向)、各種平板的尺寸(包括橫向和豎向)、普通電腦屏幕和寬屏。


需要考慮的問題:

某個頁面進行響應式網站設計時其適用的尺寸范圍是哪些?比如,1688搜索結果頁面,跨度可以從手機到寬屏,而1688首頁,由于結構過于復雜,想直接遷移到手機上,不太現實,不如直接設計一個手機版的首頁。

結合用戶需求和實現成本,對適用的尺寸進行取舍。比如一些功能操作的頁面,用戶一般沒有在移動端進行操作的需求,沒有必要進行響應式設計。

第二步:制作線框原型

針對確定下來的幾個尺寸分別制作不同的線框原型,需要考慮清楚不同尺寸下,頁面的布局如何變化,內容尺寸如何縮放,功能、內容的刪減,甚至針對特殊的環境作特殊化的設計等。這個過程需要設計師和前端開發人員保持密切的溝通。

第三步:測試線框原型

將圖片導入到相應的設備進行一些簡單的測試,可幫助我們盡早發現可訪問性、可讀性等方面存在的問題。

第四步:視覺設計

注意,移動設備的屏幕像素密度與傳統電腦屏幕不一樣,在設計的時候需要保證內容文字的可讀性、控件可點擊區域的面積等。

第五步:前端實現

與傳統的web開發相比,響應式設計的頁面由于頁面布局、內容尺寸發生了變化,所以最終的產出更有可能與設計稿出入較大,需要前端開發人員和設計師多溝通。

采用srcset屬性,如下代碼

<img src="默認圖片" alt="" srcset="1倍大圖 600w 200h 1x, 2倍大圖 600w 200h 2x, 小圖 200w 200h">

srcset里面是根據媒體查詢條件顯示不同圖片,跟上面差不多一樣,表達方式不一樣,1x表示顯示器像素密度顯示倍數。

正常我是兩者結合的方式實現,各大瀏覽器最新的版本基本都支持,但是IE系列的不支持,這讓我們感到非常頭痛,兼容性具體如下圖。


比較嚴重的問題是QQ瀏覽器以IE為內核,微信瀏覽器不支持,而微信在國內的使用率非常高,加之微信公眾平臺的微官網是客戶的常見需求,最后解決辦法是使用Picturefill,效果非常好。

二、采用picture元素,如下代碼

<picture alt="">

<source src="大圖路徑" alt="" media="(min-width: 640px)">

<source src="小圖" alt="" media="(max-width: 639px)">

<img src="默認圖片" alt="" alt="">

</picture>

在追逐響應式網站建設的浪潮中,希望不要忘記了用戶體驗,只有讓網站中所有的元素都能達到響應式的標準,才是真正的響應式網站。

北斗網絡就是一家專注于企業營銷型網站建設,網站全網推廣、企業電商人才培訓、微信公眾平臺開發及推廣的專業公司,不斷為企業打造網絡快速賺錢機器,為不少企業贏得了搶占網絡市場的先機。而你離成功只差一個電話!  趕緊撥打北斗網絡免費熱線電話:180-9017-2776或0830-2278115。您可以點擊:20160104115151755.jpg,進行進一步的咨詢!



上一條:瀘州網頁設計的三個細節起著至關重要的作用!

下一條:瀘州網站制作公司把握3大核心原則助酒城企業長遠發展!

相關文章

您可能感興趣的網站建設套餐

立即預約

總機:4000831003

瀘州:0830-2278115

自貢:0813-8585258

宜賓:0831-5201666

咨詢客戶或定制網站建設以上套餐客戶尊享5880元優化教程 掃描關注公眾號,最好領1000元建站抵扣券優惠 北斗網絡教你如何選擇瀘州網絡公司

北斗網絡[全網營銷3網合1] 營銷型網站,讓您輕松實現全網營銷 Copyright(c) luzhoue.com 2011-2017 all right reserved. 網站備案號: 蜀ICP備12014244號-1 川公網安備 51150202000043號

上海时时乐开奖现场