移動(dòng)端適配方法
2024-03-09 分類： 網(wǎng)站建設(shè)
前端代碼的編寫永遠(yuǎn)逃不過“兼容”二詞，從前PC時(shí)代，因?yàn)镮E的傲嬌，導(dǎo)致程序猿們一直在兼容IE的道路上掙扎，如今移動(dòng)設(shè)備的普及，仿佛讓我們看到了希望，仿佛馬上就要擺脫IE了，可是！一波還未平息，一波又來侵襲~移動(dòng)端確實(shí)不用考慮IE了，各種CSS新特性也用的爽到飛起，但一座大山壓了過來，那就是分辨率的適配，移動(dòng)端由于展示區(qū)域比較小，因此對(duì)于頁面在不同分辨率手機(jī)上的展示細(xì)節(jié)也要求更加嚴(yán)格，這時(shí)像PC端有些固定寬高的布局方式顯然不適應(yīng)，我們被要求對(duì)于不同大小手機(jī)頁面能自適應(yīng)，真是非常有（tong）趣（ku）呢
話不多說，下面就總結(jié)了一些移動(dòng)端常用的適配手法：
一、百分比
使用場(chǎng)景：只要求寬度隨屏幕自適應(yīng)，比如文字塊
百分比在PC端自適應(yīng)上也經(jīng)常用到，著實(shí)相當(dāng)好用，但它一般用于寬度自適應(yīng)的設(shè)置，高度設(shè)置百分比時(shí)，要求其父類元素有明確高度。
1、利用百分比實(shí)現(xiàn)填充全屏
為了讓元素設(shè)置height：100%生效，并且正好為窗口高度，則需要給html和body元素以及它所有的父元素都設(shè)置高度100%。
例如：
<html style="height: 100%;">
<body style="height: 100%;">
<div class="wrap" style="height: 100%; width:100%">
填充全屏啦
</div>
</body>
</html>
在使用height: 100%;時(shí)需要注意的一些事項(xiàng)
Margins 和 padding 會(huì)讓你的頁面出現(xiàn)滾動(dòng)條，也許這是你不希望的。
如果你的元素實(shí)際高度大于你設(shè)定的百分比高度，那元素的高度會(huì)自動(dòng)擴(kuò)展。
寫到這里我突然想插個(gè)題外話，對(duì)于absolute定位的元素，用height：100%顯然也是無效的，因?yàn)榇藭r(shí)它已經(jīng)脫離了文檔流，此時(shí)它的高度由自身內(nèi)容撐開。這是如果我希望它填滿父盒子，怎么做？這里有個(gè)黑魔法，設(shè)置它的top,left,bottom,right均為0，這時(shí)盒子就會(huì)被拉伸至填滿父盒子。
2、利用百分比實(shí)現(xiàn)寬高比固定
有時(shí)，我們希望寬度自適應(yīng)，高度隨寬度變化而變化，并有固定的寬高比。
讓我們縷縷，用height百分比顯然不行，height百分比是以父元素高度為基準(zhǔn)的，而我們需要以寬度為基準(zhǔn)來設(shè)置高度。
所以這里可以用到padding-top或者padding-bottom，padding是以父元素的width為基準(zhǔn)的。我們可以設(shè)置元素的height：0，然后用padding-bottom將元素?fù)伍_，以實(shí)現(xiàn)固定寬高比。
二、rem
使用場(chǎng)景：對(duì)于圖片等對(duì)高度自適應(yīng)有要求的場(chǎng)景
rem單位：以頁面根字體的大小，也就是html元素字體的大小為基準(zhǔn)，例如
html{
font-size:16px;
}
那么1rem等于16px。
所以使用時(shí)，我們只要讓根字體大小隨屏幕大小自適應(yīng)，那頁面中所有使用rem單位來設(shè)置寬高的元素，大小也會(huì)隨屏幕大小自適應(yīng)了。
根據(jù)不同屏幕大小設(shè)置根字體大小有兩種方法：
1、css方法設(shè)置rem
利用媒體查詢，根據(jù)不同的屏幕大小進(jìn)行設(shè)置，缺點(diǎn)就是一般只列舉一些代表性的屏幕大小，自適應(yīng)不能充分覆蓋所有范圍
html{
font-size:10px
}
@media screen and (min-width:321px) and (max-width:375px){
html{
font-size:11px
}
}
@media screen and (min-width:376px) and (max-width:414px){
html{
font-size:12px
}
}
@media screen and (min-width:415px) and (max-width:639px){
html{
font-size:15px
}
}
@media screen and (min-width:640px) and (max-width:719px){
html{
font-size:20px
}
}
@media screen and (min-width:720px) and (max-width:749px){
html{
font-size:22.5px
}
}
@media screen and (min-width:750px) and (max-width:799px){
html{
font-size:23.5px
}
}
@media screen and (min-width:800px){
html{
font-size:25px
}
}
2、JS方法設(shè)置rem
利用JS設(shè)置根字體大小，所以若改變發(fā)生在渲染完成之后，則會(huì)引起回流，導(dǎo)致閃屏現(xiàn)象。因此使用這種方法時(shí)，應(yīng)將JS代碼放入head頭部中并且在CSS引入之前。
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
上面clientWidth為實(shí)際屏幕的寬度，而375為設(shè)計(jì)稿基于的參考屏幕寬度，20則是當(dāng)實(shí)際屏幕寬度等于參考屏幕寬度時(shí)，1rem的大小。代碼的關(guān)鍵參數(shù)20和375是這樣設(shè)置的：
a) 由于提供的設(shè)計(jì)稿現(xiàn)在基本都是以iPhone6/7/8為參考的，寬度為750px，dpr為2，所以計(jì)算rem時(shí)的參考屏幕寬度可以設(shè)置為375。
b) 由于chrome的最小字體是12px，又為了計(jì)算方便，所以可以設(shè)置1rem的大小為20px
應(yīng)用過程中，比如我們拿到了一個(gè)750的設(shè)計(jì)稿，那么首先，將設(shè)計(jì)稿里的數(shù)值除以2，得到按手機(jī)屏幕大小布局的數(shù)值（這也是375的由來）。然后，再除以20就可以將設(shè)計(jì)稿中的px轉(zhuǎn)化為rem了。
三、媒體查詢
使用場(chǎng)景：一般利用媒體查詢來進(jìn)行特殊處理，比如
1、iphoneX這類全屏的適配
2、在適配dpr為3的iPhone Plus或者pad橫屏等超級(jí)大屏?xí)r，需要根據(jù)業(yè)務(wù)需求設(shè)置臨界值，然后展示不同內(nèi)容或者替換不同分辨率圖片（也就是常說的2倍圖、3倍圖的使用）等
四、vw、vh
vw是以屏幕寬度為基準(zhǔn)的百分比單位，1vw=1% * deviceWidth
vh是以屏幕高度為基準(zhǔn)的百分比單位，1v=1% * deviceHeight
話不多說，下面就總結(jié)了一些移動(dòng)端常用的適配手法：
一、百分比
使用場(chǎng)景：只要求寬度隨屏幕自適應(yīng)，比如文字塊
百分比在PC端自適應(yīng)上也經(jīng)常用到，著實(shí)相當(dāng)好用，但它一般用于寬度自適應(yīng)的設(shè)置，高度設(shè)置百分比時(shí)，要求其父類元素有明確高度。
1、利用百分比實(shí)現(xiàn)填充全屏
為了讓元素設(shè)置height：100%生效，并且正好為窗口高度，則需要給html和body元素以及它所有的父元素都設(shè)置高度100%。
例如：
<html style="height: 100%;">
<body style="height: 100%;">
<div class="wrap" style="height: 100%; width:100%">
填充全屏啦
</div>
</body>
</html>
在使用height: 100%;時(shí)需要注意的一些事項(xiàng)
Margins 和 padding 會(huì)讓你的頁面出現(xiàn)滾動(dòng)條，也許這是你不希望的。
如果你的元素實(shí)際高度大于你設(shè)定的百分比高度，那元素的高度會(huì)自動(dòng)擴(kuò)展。
寫到這里我突然想插個(gè)題外話，對(duì)于absolute定位的元素，用height：100%顯然也是無效的，因?yàn)榇藭r(shí)它已經(jīng)脫離了文檔流，此時(shí)它的高度由自身內(nèi)容撐開。這是如果我希望它填滿父盒子，怎么做？這里有個(gè)黑魔法，設(shè)置它的top,left,bottom,right均為0，這時(shí)盒子就會(huì)被拉伸至填滿父盒子。
2、利用百分比實(shí)現(xiàn)寬高比固定
有時(shí)，我們希望寬度自適應(yīng)，高度隨寬度變化而變化，并有固定的寬高比。
讓我們縷縷，用height百分比顯然不行，height百分比是以父元素高度為基準(zhǔn)的，而我們需要以寬度為基準(zhǔn)來設(shè)置高度。
所以這里可以用到padding-top或者padding-bottom，padding是以父元素的width為基準(zhǔn)的。我們可以設(shè)置元素的height：0，然后用padding-bottom將元素?fù)伍_，以實(shí)現(xiàn)固定寬高比。
二、rem
使用場(chǎng)景：對(duì)于圖片等對(duì)高度自適應(yīng)有要求的場(chǎng)景
rem單位：以頁面根字體的大小，也就是html元素字體的大小為基準(zhǔn)，例如
html{
font-size:16px;
}
那么1rem等于16px。
所以使用時(shí)，我們只要讓根字體大小隨屏幕大小自適應(yīng)，那頁面中所有使用rem單位來設(shè)置寬高的元素，大小也會(huì)隨屏幕大小自適應(yīng)了。
根據(jù)不同屏幕大小設(shè)置根字體大小有兩種方法：
1、css方法設(shè)置rem
利用媒體查詢，根據(jù)不同的屏幕大小進(jìn)行設(shè)置，缺點(diǎn)就是一般只列舉一些代表性的屏幕大小，自適應(yīng)不能充分覆蓋所有范圍
html{
font-size:10px
}
@media screen and (min-width:321px) and (max-width:375px){
html{
font-size:11px
}
}
@media screen and (min-width:376px) and (max-width:414px){
html{
font-size:12px
}
}
@media screen and (min-width:415px) and (max-width:639px){
html{
font-size:15px
}
}
@media screen and (min-width:640px) and (max-width:719px){
html{
font-size:20px
}
}
@media screen and (min-width:720px) and (max-width:749px){
html{
font-size:22.5px
}
}
@media screen and (min-width:750px) and (max-width:799px){
html{
font-size:23.5px
}
}
@media screen and (min-width:800px){
html{
font-size:25px
}
}
2、JS方法設(shè)置rem
利用JS設(shè)置根字體大小，所以若改變發(fā)生在渲染完成之后，則會(huì)引起回流，導(dǎo)致閃屏現(xiàn)象。因此使用這種方法時(shí)，應(yīng)將JS代碼放入head頭部中并且在CSS引入之前。
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
上面clientWidth為實(shí)際屏幕的寬度，而375為設(shè)計(jì)稿基于的參考屏幕寬度，20則是當(dāng)實(shí)際屏幕寬度等于參考屏幕寬度時(shí)，1rem的大小。代碼的關(guān)鍵參數(shù)20和375是這樣設(shè)置的：
a) 由于提供的設(shè)計(jì)稿現(xiàn)在基本都是以iPhone6/7/8為參考的，寬度為750px，dpr為2，所以計(jì)算rem時(shí)的參考屏幕寬度可以設(shè)置為375。
b) 由于chrome的最小字體是12px，又為了計(jì)算方便，所以可以設(shè)置1rem的大小為20px
應(yīng)用過程中，比如我們拿到了一個(gè)750的設(shè)計(jì)稿，那么首先，將設(shè)計(jì)稿里的數(shù)值除以2，得到按手機(jī)屏幕大小布局的數(shù)值（這也是375的由來）。然后，再除以20就可以將設(shè)計(jì)稿中的px轉(zhuǎn)化為rem了。
三、媒體查詢
使用場(chǎng)景：一般利用媒體查詢來進(jìn)行特殊處理，比如
1、iphoneX這類全屏的適配
2、在適配dpr為3的iPhone Plus或者pad橫屏等超級(jí)大屏?xí)r，需要根據(jù)業(yè)務(wù)需求設(shè)置臨界值，然后展示不同內(nèi)容或者替換不同分辨率圖片（也就是常說的2倍圖、3倍圖的使用）等
四、vw、vh
vw是以屏幕寬度為基準(zhǔn)的百分比單位，1vw=1% * deviceWidth
vh是以屏幕高度為基準(zhǔn)的百分比單位，1v=1% * deviceHeight
vw,vh確實(shí)很好用，但是目前使用時(shí)仍需考慮兼容性的問題，在國(guó)內(nèi)一些手機(jī)自帶瀏覽器里（比如華為）會(huì)失效，并且據(jù)說碰上X5內(nèi)核時(shí)也容易踩坑 。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
新聞名稱：移動(dòng)端適配方法
網(wǎng)頁鏈接：http://www.rwnh.cn/news30/320180.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、、電子商務(wù)、小程序開發(fā)、云服務(wù)器、關(guān)鍵詞優(yōu)化
聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 成都app開發(fā)告訴你傳統(tǒng)物業(yè)戰(zhàn)略轉(zhuǎn)型社區(qū)O2O方案！ 2024-03-09
- 新成立的環(huán)保測(cè)評(píng)公司如何布局微信SEO搜索排名？ 2024-03-09
- 常見的服務(wù)器負(fù)載均衡技術(shù)，負(fù)載均衡器有哪些類型？ 2024-03-08
- 很多人問的問題：怎樣設(shè)計(jì)優(yōu)秀的網(wǎng)頁 2024-03-08
- 企業(yè)官網(wǎng)設(shè)計(jì)方案特別是在要關(guān)心的關(guān)鍵點(diǎn) 2024-03-08
- 駐馬店?duì)I銷型網(wǎng)站在設(shè)計(jì)時(shí)需要哪些功能？ 2024-03-07
- 網(wǎng)站建設(shè)要聚焦企業(yè)需求 2024-03-07
- 教你一個(gè)簡(jiǎn)單而快速的方法來制作一個(gè)簡(jiǎn)單的小程序 2024-03-09
- 成都網(wǎng)站建設(shè)-找網(wǎng)絡(luò)公司做網(wǎng)站需要注意哪些問 2024-03-09
- 在網(wǎng)站建設(shè)過程中色彩應(yīng)用搭配技巧 2024-03-08
- 成都網(wǎng)站建設(shè)公司之網(wǎng)站建設(shè)步驟 2024-03-08
- 成都小程序制作中生成定位地圖截圖解決地圖組件覆蓋問題！ 2024-03-08
- 成都祭掃高峰下周六開始！網(wǎng)上預(yù)約指南→ 2024-03-07
- 老舊院落誰來改、怎么改？成都市住建局、財(cái)政局聯(lián)合發(fā)文 2024-03-07
- 網(wǎng)站建設(shè)不能忽略這些因素 2024-03-07
- 什么是網(wǎng)站推廣？?jī)?yōu)化的好處有哪些？ 2024-03-07
- 網(wǎng)站優(yōu)化入門技巧你知道哪些 2024-03-06
- 租賃美國(guó)站群服務(wù)器時(shí)需要注意的事項(xiàng) 2024-03-06
- 開了個(gè)化妝品代加工廠怎么找客戶？怎么做網(wǎng)絡(luò)推廣？ 2024-03-06