建站動態

DongTai建站動態

網建科技——中國高端網絡品牌策劃形象設計公司。網站建設、網站設計、網站制作專業公司

技術貼,如何解決移動適配問題

日期:2020-07-30 22:11:52 訪問: 作者:網建科技

好了,這絕對是技術貼了,網站設計公司在設計網站的時候,一般都是根據網站的pc尺寸來進行網站設計的,這樣的尺寸在pc端還可以,但是如果在移動端就顯得太大了。移動端還會產生一個問題,就是4G網絡的網速加載問題,他肯定是沒有電腦那么快的,這樣下載速度,肯定會讓用戶體驗極差,半天打不開,所以今天來和大家聊聊如何在這種情況進行解決。




如果這種情況是以背景的方式進行展現,我們可以用媒體查詢的方式解決,為不同的終端設置不同的圖片,就比如手機的尺寸一般都在1000之內我們就可以設置1000以下用圖片,而pc一般都在1300寬度以上,那么我們就可以利用代碼控制相應的尺寸即可,但是如果是網頁中加入圖片的話,就較為復雜一些。

  一、采用srcset屬性,如下代碼

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

  這里面的1x其實就是指顯示器的倍數。,學過程序的應該都知道,srcset里面是根據媒體查詢條件顯示不同圖片。正常我是兩者結合的方式實現,各大瀏覽器最新的版本基本都支持,但是IE系列的不支持,這讓我們感到非常頭痛,兼容性。

但是值得注意的是,ie不支持的話,很多以ie為內核的瀏覽器也是不支持的,比如說扣扣,和微信原始瀏覽器,所以這里的話,我們還可以用第二種方案解決,就是picture。

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

             <picture alt=““>

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

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

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

             </picture>

    所以說根據現在的技術提升,我們能夠解決自適應的方式也多了起來,我們可以采用以上兩種方式提升,如果有什么不懂也可以私信我們,建設一個好的網站不僅僅是建好就完事,更多的是去思考與時俱進的同時,我們應該如何解決每個遇到的問題,自適應其實只是其中的一小項,像是尺寸適應,網頁縮放都是我們經常遇到的。


在線咨詢

馬上聯系網建獲取報價!

4006-528-168

留下您的電話馬上安排項目經理回電

在線咨詢
福彩3d自创绝密技巧 (*^▽^*)MG酷犬酒店如何爆大奖 (^ω^)MG古怪猴子试玩网站 河南快3遗漏数据 六合图库资料网站 (★^O^★)MG八宝一后官网 (*^▽^*)MG丛林心脏游戏说明 广西快3奖 (^ω^)MG阿拉斯加垂钓_豪华版 凯旋门娱乐平台打不开 体彩22选5杀号技巧 昨天广东36选7开奖结果查询 湖北快3开奖结果 彩票平台送彩金28体验 (*^▽^*)MG海豚礁_官方版 (*^▽^*)MG钻石谷登陆 体育彩票几点开奖时间