内容简介：首先在head里面需要引入移动端属性：<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">/html,
首先在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布局是个大趋势！
以上所述就是小编给大家介绍的《我们来谈谈项目中遇到的需要兼容pc端和移动端的css布局》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
网页配色实用手册
温鑫工作室 / 科学 / 2011-9 / 59.00元
《网页配色实用手册》在日常生活中，色彩早已广泛地深入到人们的精神生活和物质生活中，它是一种能够激发情感、刺激感官的重要元素。《网页配色实用手册》 从色彩的应用范围和网页设计行业需求出发而编写。全书共分为9章，第1章～第2章主要介绍色彩的基础知识、网页与多媒体的相关知识，帮助读者掌握最基本的理论；第3章主要介绍明度、纯度以及色彩感觉的配色，引领读者深入学习；第4章～第8章分别根据网站的属性、网站的地......一起来看看 《网页配色实用手册》 这本书的介绍吧!
Markdown 在线编辑器
Markdown 在线编辑器
HEX CMYK 转换工具
HEX CMYK 互转工具