我们来谈谈项目中遇到的需要兼容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布局是个大趋势！