成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

響應(yīng)式網(wǎng)站建設(shè)H5如何高效適配

2022-08-04    分類(lèi): 響應(yīng)式網(wǎng)站

以往拿到一份視覺(jué)稿要做頁(yè)面適配,通常都是針對(duì)不同分辨率尺寸做斷點(diǎn)寫(xiě)mediaquery,然后看效果再微調(diào)。開(kāi)發(fā)過(guò)程中視覺(jué)稿要是做了修改,修改的地方就得再走一遍分辨率測(cè)試和微調(diào),這時(shí)想屎的心都有了。而且這些適配都是建立在已知的分辨率尺寸庫(kù)上,如果市面新出來(lái)一款分辨率尺寸機(jī)型,又要奔跑在測(cè)試微調(diào)路上。是不是能有用一套代碼就適應(yīng)各種分辨率窗口,那么就不會(huì)再有上面這些煩惱,且開(kāi)發(fā)效率快和維護(hù)成本會(huì)降低很多。
答案是有的,而且這種形式最早出現(xiàn)于flash全屏整站,前陣子拜讀了舉總介紹的一篇文章關(guān)于圖片適配屬性O(shè)bject-fit,發(fā)現(xiàn)這個(gè)屬性O(shè)bject-fit雖然只能應(yīng)用在圖片上,但是它的適配思路完全可以借鑒運(yùn)用在H5頁(yè)面適配上,這種思路即是「縮放」,也是本篇文章的核心內(nèi)容。就是無(wú)論窗口寬高比怎樣,頁(yè)面能自動(dòng)縮放到窗口大小,而且元素的坐標(biāo)及大小還可以使用精確和便于js計(jì)算的px為單位。
這里借用Object-fit的方法命名方便記憶,下面簡(jiǎn)單介紹H5頁(yè)面適配幾種展現(xiàn)形式。
1、contain模式:以?xún)?nèi)容中心為基點(diǎn)按照視覺(jué)稿的寬高比縮放以適配窗口顯示全頁(yè)面內(nèi)容,窗口與內(nèi)容的寬度比或高度比之間較小者縮放填滿窗口,當(dāng)窗口寬高比和視覺(jué)稿不同時(shí),另一方向的兩側(cè)出現(xiàn)留空部分。
2、cover模式:以?xún)?nèi)容中心為基點(diǎn)按照窗口的寬高比等比縮放以適配窗口,窗口與內(nèi)容的寬度比或高度比之間較大者縮放填滿窗口,當(dāng)窗口寬高比和視覺(jué)稿不同時(shí),另一方向的兩側(cè)超出窗口被裁剪,這種模式不會(huì)出現(xiàn)「contain模式」的留空部分情況。
3、fill模式:以?xún)?nèi)容中心為基點(diǎn)頁(yè)面拉伸填充滿整個(gè)窗口以適配窗口,當(dāng)窗口寬高比和視覺(jué)稿不同時(shí),內(nèi)容一定程度上被拉伸。
4、scale-width模式:頁(yè)面橫向縮放填充滿窗口,縱向按視覺(jué)稿的寬高比放大。出來(lái)的效果有兩種可能性,「contain模式」或者「cover模式」的效果。

文章題目:響應(yīng)式網(wǎng)站建設(shè)H5如何高效適配
本文地址:http://jinyejixie.com/news/185081.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有響應(yīng)式網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都網(wǎng)頁(yè)設(shè)計(jì)公司
勃利县| 昌黎县| 寿宁县| 霸州市| 江城| 阆中市| 栖霞市| 都江堰市| 肥乡县| 临江市| 岳池县| 越西县| 新宁县| 临朐县| 宝坻区| 鄂伦春自治旗| 鲁甸县| 漯河市| 漳浦县| 惠州市| 桃江县| 鄂托克旗| 兴和县| 马山县| 平山县| 玉山县| 白朗县| 海安县| 望城县| 通道| 滁州市| 信丰县| 德格县| 搜索| 托克托县| 广德县| 湘阴县| 巴中市| 阿克陶县| 外汇| 西畴县|