移動端web適配方案

admin發表於2019-05-22
Web

移動端適配方案會涉及到幾個重要的概念，具體參閱以下文章：

（1）.裝置畫素、獨立畫素和css畫素一章節。

（2）.devicePixelRatio裝置畫素比一章節。

（3）.viewport視口詳解一章節。

（4）.meta viewport詳解一章節。

PC端雖然存在著瀏覽器相容問題，但是沒有適配問題，完全按照切圖製作頁面，比如頂部導航欄長度是600px，底部的下載按鈕長度是60px。而移動端則要複雜的多，因為移動裝置規格繁多，尤其安卓機更是五花八門，比如公司設計師給出一份寬度是750px設計圖，如何實現在各種規格移動端裝置上實現良好的展示就是本文要解決的問題。

一.適配概念：

適配概念在上面其實已經介紹了，總結如下：

在不同規格的移動裝置上，頁面能夠針對性的實現合理或者儘可能統一的展示效果。

二.常用適配方案：

（1）.固定高度，寬度自適應。

（2）.rem做寬度，viewport縮放。

特別說明：篇幅問題，最後一個方案單獨拿出一篇文章介紹。

三.固定高度，寬度自適應：

此方案適合比較簡單的佈局，看拉鉤網頁面結構：

a:3:{s:3:\"pic\";s:43:\"portal/201905/22/094412ct9ccfky9ug5ar00.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面頁面非常的簡單，基本特點如下：

（1）.頂部和底部的bar高度不變，寬度實現橫向全屏自適應。

（2）.職位列表部分，公司logo和職位描述位於座標，薪酬位於右邊，中間部分隨著容器元素尺寸變化自適應。

此方法使用了完美視口，程式碼如下：

[HTML] 純文字檢視 複製程式碼
<meta name="viewport" content="width=device-width,initial-scale=1">

下面分享兩端使用百分比和flex實現的程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>固定高度,寬度自適應,100%比做適配</title>
<style type="text/css">
*{
  padding:0;
  margin:0;
}
body{
  font-size:16px;
  overflow:hidden;
  box-sizing:border-box; 
}
/*left start*/
.left{
  width:40px;/*兩邊固定寬度,中間自適應*/
  height:40px;/*高度可以不加,由內容填充*/
  position:absolute;
  left:0;
  top:0;
  background:red;
  text-align:center;
  line-height:40px;
}
/*left end*/
/*center start*/
.center{
  width:100%; /*寬度不固定*/
  background:orange;
  height:40px; 
  margin-left:40px;
  margin-right:40px;
}
.center input{
  width:100%;
  height:40px;
  outline:none;
}
/*center end*/
/*right start*/
.right{
  width:40px;/*兩邊固定寬度,中間自適應*/
  height:40px;/*高度可以不可,由內容填充*/
  text-align:center;
  line-height:40px;
  position:absolute;
  right:0;
  top:0;
  background:green;
}
/*right end*/
/*banner adv start*/
.banner{
  width:100%;
  height:200px;
  background:pink;
  text-align:center;
  line-height:200px;
}
/*banner adv end*/
/*list start*/
.list{
  overflow:hidden;
}   
.list div{
  width:20%;
  height:90px;
  float:left;
  text-align:center;
  line-height:90px;
}
.list div:nth-of-type(1){
  background:orange;
}
.list div:nth-of-type(2){
  background:#80B3FF;
}
.list div:nth-of-type(3){
  background:#1BA260;
}
.list div:nth-of-type(4){
  background:#F2A196;
}
.list div:nth-of-type(5){
  background:#FFCE42;
}
.listTwo{
  margin:15px 0 0 0;
}
/*list end*/
/*con start*/
.con{
  width:100%;
  height:200px;
  overflow:hidden;     /*子元素使用來浮動,父元素記得清除浮動*/
  text-align:center;
  line-height:200px;
}
.left-80{
  width:80%;
  height:100%;  /*想要一個元素在頁面中顯示必須得給元素高度,繼承父元素*/
  float:left;
  background:#B0E24A;
}
.right-20{
  width:20%;
  height:100%; /*高度100%,繼承父元素的高度*/
  float:right;
  background:#6C6863;
}
/*con end*/
</style>
</head>
<body>
<!-- header start -->
<header>
  <div class="left">左邊</div>
  <div class="center">
    <form>
      <input type="search" name="">
    </form>
  </div>
  <div class="right">右邊</div>
</header>
<!-- header end -->
<!-- banner adv start -->
<div class="banner">adv</div>
<!-- banner adv end -->
<!-- 列表list start -->
<div class="list">
  <div>1</div> 
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>  
</div>
<div class="list listTwo">
  <div>6</div> 
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>  
</div>
<!-- 列表list end -->
<!-- con內容開始-->
<div class="con">
  <div class="left-80">左邊80%</div>
  <div class="right-20">右邊20%</div>
</div>
<!-- con內容結束-->
</body>
</html>

上面程式碼採用百分比方式實現的高度固定，寬度自適應適配效果。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>固定高度,寬度自適應,flex做適配</title>
<style type="text/css">
*{
  padding:0;
  margin:0;
}
body{
  font-family:"微軟雅黑";
  font-size:16px;
}
.parent{
  display:flex; 
}
.left,.right{
  width:40px;
  height:40px;
  text-align:center;
  line-height:40px;
}
.left{
  background:#abcdef;
}
.right{
  background:#DD4F43;
}
.center{
  flex:1;
}
.center input{
  width:100%;
  height:40px;
  outline:none;
}
.banner-adv{
  width:100%;
  height:200px;
  background:#0D6CB0;
}
.list{
  width:100%;
  height:90px;
  display:flex;
}
.list div{
  flex:1;
  text-align:center;
  line-height:90px;
}
.list div:nth-of-type(1){
  background:#DE5246;
}
.list div:nth-of-type(2){
  background:#19A25F;
}
.list div:nth-of-type(3){
  background:#FF8080;
}
.list div:nth-of-type(4){
  background:#F4CD0B;
}
.list div:nth-of-type(5){
  background:#9EDA45;
}
.list-Two{
  margin:15px 0 0 0;
}
.list-Two div:nth-of-type(1){
  background:#B847FF;
}
.list-Two div:nth-of-type(2){
  background:#79B900;
}
.list-Two div:nth-of-type(3){
  background:#FF2424;
}
.list-Two div:nth-of-type(4){
  background:#D2E4F0;
}
.list-Two div:nth-of-type(5){
  background:#4CDF2B;
}
.con{
  height:200px;
  display:flex;
}
.con div:nth-of-type(1){
  flex:8;
  background:#80B3FF;
}
.con div:nth-of-type(2){
  flex:2;
  background:#CD8B37;
}
</style>
</head>
<body>
<header class="parent">
  <div class="left">左邊</div>
  <div class="center">
    <form>
      <input type="search" name="">
    </form>
  </div>
  <div class="right">右邊</div>
</header>
<div class="banner-adv"></div>
<section class="list">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</section>
<section class="list list-Two">
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>9</div>
</section>
<div class="con">
  <div></div>
  <div></div>
</div>
</body>
</html>

上面程式碼採用flex實現的高度固定，寬度自適應適配效果。

關於flex更多內容參閱display:flex 彈性佈局一章節。

相關文章