<delect id="iesea"></delect>

HTML讓網頁自動適應電腦手機屏幕大小

作的網頁除了在PC端瀏覽，在現在移動端量巨大的時代下，如何做好PC端與移動端的自適應，是每個程序必須要需要考慮的事情。

舉例

下面是沒有加適應的情況：

前端開發中，移動端不同設備的屏幕適配一直是個繞不開的技術話題。目前比較流行的方案是類似淘寶的flexible。其原理是使用js動態計算html的font-size，利用rem來實現不同寬度的適配。使用js方案雖然比較成熟，但也有它的一些缺點，比如性能損耗，由于js的阻塞加載和動態計算，頁面不免會出現卡頓和閃屏的現象，影響用戶體驗。今天我們不使用js，完全使用css來實現適配，來看看是怎么實現的吧！

移動端屏幕適配

方案一：使用meta標簽

在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為單位直接使用，整個頁面會自動按設備寬度進行等比例縮放。看下面的演示效果：

方案二：使用css的calc計算屬性

在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>

刷新頁面，縮小瀏覽器，頁面按百分比隨瀏覽器逐漸縮小，顯示完整，頁面效果如下圖所示：

在線咨詢

上一篇：三步搞定公眾號彈幕
下一篇：輕松實現HTML表格拖拽和排序，實現復雜交互式數據表變得更簡單

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。