整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
作的網(wǎng)頁(yè)除了在PC端瀏覽，在現(xiàn)在移動(dòng)端量巨大的時(shí)代下，如何做好PC端與移動(dòng)端的自適應(yīng)，是每個(gè)程序必須要需要考慮的事情。
下面是沒(méi)有加適應(yīng)的情況：
前端開(kāi)發(fā)中，移動(dòng)端不同設(shè)備的屏幕適配一直是個(gè)繞不開(kāi)的技術(shù)話題。目前比較流行的方案是類(lèi)似淘寶的flexible。其原理是使用js動(dòng)態(tài)計(jì)算html的font-size，利用rem來(lái)實(shí)現(xiàn)不同寬度的適配。使用js方案雖然比較成熟，但也有它的一些缺點(diǎn)，比如性能損耗，由于js的阻塞加載和動(dòng)態(tài)計(jì)算，頁(yè)面不免會(huì)出現(xiàn)卡頓和閃屏的現(xiàn)象，影響用戶體驗(yàn)。今天我們不使用js，完全使用css來(lái)實(shí)現(xiàn)適配，來(lái)看看是怎么實(shí)現(xiàn)的吧！
移動(dòng)端屏幕適配
在html的head中插入下面的meta標(biāo)簽：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=375, user-scalable=no">沒(méi)錯(cuò)，是兩個(gè)viewport標(biāo)簽。width=device-width寫(xiě)在上面，width=375寫(xiě)在下面，375就是以哪個(gè)設(shè)備寬度為基準(zhǔn)，現(xiàn)在大部分設(shè)計(jì)稿都是以iphone6的375寬度為基準(zhǔn)做2倍圖。加了上面兩個(gè)mata標(biāo)簽，后面的css就可以完全使用px為單位直接使用，整個(gè)頁(yè)面會(huì)自動(dòng)按設(shè)備寬度進(jìn)行等比例縮放。看下面的演示效果：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
在css中定義html的font-size為：calc(100vw/3.75)，calc、vw能兼容ios8+和android4.4+，可放心使用，如下：
html {
font-size: calc(100vw/3.75);
-webkit-text-size-adjust: 100%;
}然后在css中，就可以將所有的px單位除以100，得到rem單位了。比如：
.row>div {
float: left;
width: .82rem;
height: .82rem;
text-align: center;
line-height: .82rem;
margin-left: .05rem;
background-color: #f0f0f0;
}上面的rem單位轉(zhuǎn)換，建議大家可以使用px2rem這個(gè)插件完成，webpack、vscode都能支持。設(shè)置時(shí)將rootFontSize 設(shè)為100即可。
設(shè)置px2rem參數(shù)
在vscode中，可以使用ctrl+shift+p,選擇px2rem就可以將當(dāng)前頁(yè)面的px全部轉(zhuǎn)換為rem。
px2rem在vscode中的使用方法
當(dāng)然，rem和px可以相互共存，比如我標(biāo)題欄就想要44px高，這樣就不會(huì)縮放了。看下面的演示效果：
純css實(shí)現(xiàn)移動(dòng)端適配
方案一，直接使用html的mata實(shí)現(xiàn)整個(gè)頁(yè)面的縮放，比較適合那些宣傳單頁(yè)或全屏游戲交互類(lèi)，無(wú)法實(shí)現(xiàn)px與rem共存的情況。
方案二，利用了rem來(lái)縮放，可實(shí)現(xiàn)與px共存，在借助px2rem的情況下，能高效方便的實(shí)現(xiàn)適配。
綜合考慮，小編建議使用方案二。你，學(xué)會(huì)了嗎？
PC端進(jìn)行網(wǎng)頁(yè)制作時(shí)，經(jīng)常使用固定像素并且內(nèi)容居中的網(wǎng)頁(yè)布局，為了適應(yīng)小屏幕的設(shè)備，在移動(dòng)設(shè)備和跨平臺(tái)(響應(yīng)式)網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中，多數(shù)使用流式布局，下面我們就對(duì)流式布局進(jìn)行詳細(xì)介紹。
流式布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來(lái)設(shè)置寬度，也稱(chēng)百分比自適應(yīng)的布局。 流式布局實(shí)現(xiàn)方法是將CSS固定像素寬度換算為百分比寬度。換算公式如下: 目標(biāo)元素寬度/父盒子寬度=百分?jǐn)?shù)寬度 下面通過(guò)一個(gè)案例來(lái)演示固定布局如何轉(zhuǎn)換為百分比布局，如demo4-1.html 所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定布局轉(zhuǎn)換為百分比布局</title>
<style type="text/css">
body>*{ width: 980px; height:auto; margin:0 auto;
margin-top:10px;
border:1px solid #000; padding:5px;}
header{ height:50px;}
section{ height: 300px;}
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left;}
aside{ width:250px;}
article{ width:700px; margin-left:10px;}
</style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
<aside>aside</aside>
<article>article</article>
</section>
<footer> footer</footer>
</body>
</html>
打開(kāi)Chrome瀏覽器訪問(wèn)demo4-1.html，頁(yè)面效果如下圖所示。
可以嘗試改變?yōu)g覽器窗口的大小，頁(yè)面元素的大小不會(huì)隨瀏覽器窗口改變，如下圖所示。
下面修改demo4-1樣式代碼，將所有寬度修改為百分比的形式，具體如下:
<style type="text/css">
body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;
border:1px solid #000; padding :5px; }
header{ height:50px; }
section{ height: 300px; }
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left; }
aside{ width:25.510204%; /*250÷980*/}
article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}
</style>
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
