整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
作的網頁除了在PC端瀏覽，在現在移動端量巨大的時代下，如何做好PC端與移動端的自適應，是每個程序必須要需要考慮的事情。
下面是沒有加適應的情況：
前端開發中，移動端不同設備的屏幕適配一直是個繞不開的技術話題。目前比較流行的方案是類似淘寶的flexible。其原理是使用js動態計算html的font-size，利用rem來實現不同寬度的適配。使用js方案雖然比較成熟，但也有它的一些缺點，比如性能損耗，由于js的阻塞加載和動態計算，頁面不免會出現卡頓和閃屏的現象，影響用戶體驗。今天我們不使用js，完全使用css來實現適配，來看看是怎么實現的吧！
移動端屏幕適配
在html的head中插入下面的meta標簽：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=375, user-scalable=no">沒錯，是兩個viewport標簽。width=device-width寫在上面，width=375寫在下面，375就是以哪個設備寬度為基準，現在大部分設計稿都是以iphone6的375寬度為基準做2倍圖。加了上面兩個mata標簽，后面的css就可以完全使用px為單位直接使用，整個頁面會自動按設備寬度進行等比例縮放。看下面的演示效果：
<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單位轉換，建議大家可以使用px2rem這個插件完成，webpack、vscode都能支持。設置時將rootFontSize 設為100即可。
設置px2rem參數
在vscode中，可以使用ctrl+shift+p,選擇px2rem就可以將當前頁面的px全部轉換為rem。
px2rem在vscode中的使用方法
當然，rem和px可以相互共存，比如我標題欄就想要44px高，這樣就不會縮放了。看下面的演示效果：
純css實現移動端適配
方案一，直接使用html的mata實現整個頁面的縮放，比較適合那些宣傳單頁或全屏游戲交互類，無法實現px與rem共存的情況。
方案二，利用了rem來縮放，可實現與px共存，在借助px2rem的情況下，能高效方便的實現適配。
綜合考慮，小編建議使用方案二。你，學會了嗎？
PC端進行網頁制作時，經常使用固定像素并且內容居中的網頁布局，為了適應小屏幕的設備，在移動設備和跨平臺(響應式)網頁開發過程中，多數使用流式布局，下面我們就對流式布局進行詳細介紹。
流式布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設置寬度，也稱百分比自適應的布局。 流式布局實現方法是將CSS固定像素寬度換算為百分比寬度。換算公式如下: 目標元素寬度/父盒子寬度=百分數寬度 下面通過一個案例來演示固定布局如何轉換為百分比布局，如demo4-1.html 所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定布局轉換為百分比布局</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>
打開Chrome瀏覽器訪問demo4-1.html，頁面效果如下圖所示。
可以嘗試改變瀏覽器窗口的大小，頁面元素的大小不會隨瀏覽器窗口改變，如下圖所示。
下面修改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>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
