咱們來談談項目中遇到的須要兼容pc端和移動端的css佈局

首先在head裏面須要引入移動端屬性：<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

1.css佈局方式之div + css佈局；

<!-- html -->
<div class="box">
 <div class="pic_box">
  <img src="./images/pic.png" alt="">
 </div>
 <div class="content_box">
  <div class="title">
    <img src="./images/title.png" alt="">
    <span class="tip">標題: div + css佈局</span>
    <!-- <p class="tip">標題: div + css佈局</p> -->
  </div>
  <div class="content">
    <p>內容: 兼容pc端和移動端的css佈局</p>
  </div>
 </div>
</div>
<!-- js -->
<script>
  (function () {
    var html = document.documentElement;
    // 獲取屏幕寬度
    var hwidth = html.getBoundingClientRect().width;
    // 設置html標籤的font-size 大小爲hwidth/15
    html.style.fontSize = hwidth/10 + 'px';
  })()
</script>

/ css /
html,
body {
margin: 0;
}
.box {
margin: 0.4rem;
}
.box .pic_box img {
width: 3rem;
}
.box .content_box {
float: right;
margin-top: -2.7rem;
width: 6rem;
font-size: initial;
}
.box .content_box .title {
height: 0.7rem;
margin-bottom: 0.2rem;
}
.box .content_box .title img {
width: 0.7rem;
height: 0.7rem;
vertical-align: -25%;
}
.box .content_box .title .tip {
/ float: right; /
line-height: 0.7rem;
}
.content {
font-size: 0.4rem;
}
p {
margin: 0;
}

移動端效果圖：

pc端效果圖：

2.css佈局方式之彈性佈局(flex佈局);

<!-- html -->
<div class="box">
<div class="pic_box">
  <img src="./images/pic.png" alt="">
</div>
<div class="content_box">
  <div class="title">
    <img src="./images/title.png" alt="">
    <p>標題: flex佈局</p>
  </div>
  <div class="content">
    <p>內容: 兼容pc端和移動端的css佈局</p>
  </div>
</div>
</div>

/ css /
html,
body {
margin: 0;
}
.box {
display: flex;
justify-content: space-between; / 水平兩邊對齊 /
align-items: center; / 垂直居中 /
margin: 0.6rem;
}
.box .pic_box img {
width: 8rem;
}
.box .content_box {
margin-left: 2rem;
}
.box .content_box .title {
display: flex;
align-items: center;
padding-bottom: 0.6rem;
}
.box .content_box .title img {
width: 32px;
height: 32px;
}
.box .content_box .title p {
margin-left: 0.5rem;
}
.content p {
font-size: 0.8rem;
}
p {
margin: 0;
}

移動端效果圖：

pc端效果圖：

flex佈局須要注意的是: 設置彈性佈局flex後, 浮動float, clearfix 和vertical-align 等屬性均無效!

3.css佈局方式之網格佈局(grid佈局);

/ css /
html,
body {
margin: 0;
}
.box {
display: grid;
align-items: center; / 垂直居中 /
justify-items: right; / 右對齊 /
grid-template-columns: 8rem auto; / auto表示由瀏覽器本身決定長度 /
grid-gap: 20px;
margin: 0.6rem;
}
.box .pic_box img {
width: 8rem;
}
.box .content_box {
justify-items: left; / 左對齊 /
display: grid;
}
.box .content_box .title {
display: grid;
grid-template-columns: 45px auto;
}
.box .content_box .title img {
width: 32px;
height: 32px;
}
.box .content_box .title p {
line-height: 32px;
}
.content p {
font-size: 0.8rem;
}
p {
margin: 0;
}

<!-- html -->
<div class="box">
 <div class="pic_box">
  <img src="./images/pic.png" alt="">
 </div>
 <div class="content_box">
  <div class="title">
    <img src="./images/title.png" alt="">
    <p>標題: grid佈局</p>
  </div>
  <div class="content">
    <p>內容: 兼容pc端和移動端的css佈局</p>
  </div>
 </div>
</div>

移動端效果圖：

pc端效果圖：

使用grid佈局的時候須要注意：設置網格佈局之後, 容器子元素的float, display: inline-block,display: table-cell, vertical-align和column- 屬性均無效！

總結：若是須要兼容ie8的時候建議採用div+ css 佈局方式， 不過將來移動端 flex佈局和grid佈局是個大趨勢！