欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

H5-這篇告訴你什么是好的適配方案

2022-11-28    分類: 網(wǎng)站建設(shè)

這篇將告訴大家什么是好的移動H5適配方案。

一、rem的不足

首先,我們還是從rem講起,上一篇我們總結(jié)了在H5項目中如何正確使用rem(H5-如何在項目中正確應(yīng)用rem),然而大家可能會認(rèn)為rem就是好的移動H5適配方案,其實不然,rem有兩個明顯的不足之處。其表現(xiàn)在:

1、單位轉(zhuǎn)換計算比較麻煩。

2、單純的rem沒有解決高度適配的問題。

然而,第一個問題,可以通過工具來解決,在前面的文章中我們提到過一個工具“px-rem轉(zhuǎn)換器”。在制作一個H5的時候,完全可以按照設(shè)計稿的px值來寫css,然后通過工具轉(zhuǎn)換成rem單位。

在我們上篇總結(jié)rem的應(yīng)用的時候,用的媒體查詢方法,其就是通過改變寬度來確定字號的。然而當(dāng)高度變化時,頁面中的所有rem設(shè)置的字體值大小是不變的。也就是說沒有做高度適配。(有時我們希望在一屏中顯示完所有的內(nèi)容)。

二、好的適配方案

原理:載入頁面時,用JS讀取窗口寬高,對比跟原始設(shè)計稿尺寸的差距(設(shè)計稿可能是750*1334,通過PS獲取字體大?。?,判斷是寬度差的多些呢,還是高度差的多些,然后選擇那個較小的比例,縮小主體內(nèi)容。這個方法跟使用scale縮放整個屏幕元素效果是一樣的。

我們假定,設(shè)計稿的大小是750*1334,展示的效果是這樣的:(這個尺寸是設(shè)計稿顯示出來的大小)

從上圖我們可以看出,我用一個P元素,font-size:1.5rem;在設(shè)計稿中取了一個基準(zhǔn)大小32px(可以是最小的字體)。1.5*32=48px。

然而,按上面的那個原理方案,我們的適配代碼是這樣寫的:

說明:

1、其中baseWidth和baseHeiht是設(shè)計稿寬高尺寸,因為設(shè)計稿才是我們最終的依據(jù),目的是為了保持和設(shè)計稿一樣。

2、baseFontSize是750設(shè)計稿下html的基準(zhǔn)fontsize,newSize是寬高適配后的html的基準(zhǔn)font-size。

3、innerWidth 算滾動條的寬度表示窗口空間,clientWidth 在任何窗口系統(tǒng)中指用戶內(nèi)容能放置的空間 不算滾動條的寬度。

4、按照當(dāng)前屏幕寬高比跟設(shè)計稿寬高比較小的值作為縮放比例。

第四句是什么意思了,下面我特意做了一個gif圖來解釋一下它的意思:

這個gif的右側(cè)有兩個值(window.innerWidth/baseWidth和window.innerHeight/basHeight),屏幕的寬高相對于設(shè)計稿的寬高,取一個變化小的作為整體放大倍數(shù)。

注意觀察:當(dāng)高度的變化值小于寬度的變化值是,改變高度,頁面中元素的大小也是自應(yīng)用變化的。

三、寫在最后的總結(jié):

rem是用來處理元素font-size的,涉及到元素的width和height的適配問題可以使用百分比來解決,(當(dāng)然,這個百分比也是需要根據(jù)設(shè)計稿的定的),以上通過rem來(寬高)適配字體大小,用百分比來處理寬高大小就是好的移動H5適配方案的選擇。

新聞標(biāo)題:H5-這篇告訴你什么是好的適配方案
URL分享:http://aaarwkj.com/news/217400.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊、網(wǎng)站設(shè)計公司、企業(yè)網(wǎng)站制作外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器網(wǎng)站改版

廣告

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

微信小程序開發(fā)
亚洲一区乱码精品中文| 999热这里只有精品视频| 精品人妻一区二区三区四| 久久热在线观看免费高清| 成人粉嫩av一区二区白浆| 久久久久久亚洲精品少妇| 蜜臀av午夜福利在线| 亚洲一区二区日本乱码| 色哟哟网站之中文字幕| 亚洲精品日本一区二区| 日韩美女后入式在线视频 | 亚洲成人精品夫妻av| 一本久久综合亚洲鲁鲁五月天| 男女爱爱视频网站久久精选| 国产一区二区毛多内射| 日本精品一区二区不卡| 精品人妻一区二区三区蜜桃电| 国产成人综合亚洲欧美在线| 亚洲欧美一区二区三区三| 超碰97精品在线观看| 亚洲一区二区三区精品乱码| 亚洲精品色婷婷一区二区| 国产美女主播视频一区二区三区| 在线免费观看日韩黄片| 欧美激情欧美狂野欧美精品| 黄色片在线观看中文字幕| 欧美日韩另类综合91| 天天日夜夜操人人干人人插| 中文字幕人妻系列东京热| 久久热最新免费观看视频| 日本特黄特色大片免费| 精品久久亚洲一区二区欧美| 91午夜福利国产在线观看 | 91一区二区三区在线| 亚洲一区二区三区四区五区六| 年轻的母亲韩国三级| 草草在线成年免费视频| 国产黄片a三级久久久久久| 亚洲精品一区二区99| 91一区二区亚洲嫩草| 黄色日韩大片在线观看|