建站動態

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

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

在線咨詢
(★^O^★)MG表情金币怎么玩容易爆分 4.2雷霆vs公牛直播 管家婆马报 开元935棋牌下载安装 欢乐麻将免费场版本下载 贵州快3走势图形态 时时乐西餐厅是自助吗 三人麻将台 心悦辽宁麻将官网下载 2019年期期必中一肖 飞鱼彩票基本走势图 正规可提现的棋牌游戏 百度哈尔滨麻将 灰熊vs湖人录像 福彩3d开奖预测 安徽快3彩票平台 刘伯温期期准选一肖四不像