前端之PC及移动端页⾯适配⽅法
PC及移动端页⾯适配⽅法
设备屏幕有多种不同的分辨率，页⾯适配⽅案有如下⼏种：
1、全适配：流体布局+响应式布局
2、移动端适配：
流体布局+少量响应式
基于rem的布局
弹性盒模型
流体布局
流体布局，就是使⽤百分⽐来设置元素的宽度，元素的⾼度按实际⾼度写固定值，流体布局中，元素的边线⽆法⽤百分⽐，可以使⽤样式中的计算函数 calc() 来设置宽度，或者使⽤ box-sizing 属性将盒⼦设置为从边线计算盒⼦尺⼨。
calc()
可以通过计算的⽅式给元素加尺⼨，⽐如： width：calc(25% - 4px);
box-sizing
1、content-box 默认的盒⼦尺⼨计算⽅式
2、border-box 置盒⼦的尺⼨计算⽅式为从边框开始，盒⼦的尺⼨，边框和内填充算在盒⼦尺⼨内
流体布局⽰例
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style type="text/css">
body{
margin:0;
}
.con a{
display:block;
width:25%;
/*
width:calc(25% - 4px);
*/
height:100px;
background-color:gold;
text-align: center;
line-height:100px;
float:left;
text-decoration:none;
color:#333;
font-size:14px;
border:2px solid #000;
/* 将盒⼦真实尺⼨的计算⽅式设置为包含边框和padding */
box-sizing:border-box;box sizing
}
</style>
</head>
<body>
<div class="con">
<a href="#">菜单⽂字</a>
<a href="#">菜单⽂字</a>
<a href="#">菜单⽂字</a>
<a href="#">菜单⽂字</a>
</div>
</body>
</html>
流体布局⽰例
响应式布局
响应式布局就是使⽤媒体查询的⽅式，通过查询浏览器宽度，不同的宽度应⽤不同的样式块，每个样
式块对应的是该宽度下的布局⽅式，从⽽实现响应式布局。响应式布局的页⾯可以适配多种终端屏幕（pc、平板、⼿机）。
相应布局的伪代码如下：
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
响应式布局⽰例
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <title>Document</title>
<style type="text/css">
body{
margin:0
}
.con div{
width:23%;
border:2px solid #000;
background-color:gold;
height:200px;
margin:1%;
float:left;
box-sizing:border-box;
}
@media (max-width:800px){
.con div{
width:46%;
margin:2%;
}
}
@media (max-width:400px){
.con div{
width:94%;
margin:3%;
}
}
</style>
</head>
<body>
<div class="con">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
响应式布局⽰例
流体布局是将⼀⾏的内容按照⽐例进⾏压缩；
响应式布局是，当宽度⼩于⼀定⽐例时，将⼀⾏的内容分两⾏放置。
最后，给⼤家推荐⼀个前端学习进阶内推交流圈⼦（），不管你在地球哪个⽅位，
不管你参加⼯作⼏年都欢迎你的⼊驻！（会定期免费提供⼀些收藏的免费学习书籍资料以及整理好的⾯试题和答案⽂档！）如果您对这个⽂章有任何异议，那么请在⽂章评论处写上你的评论。
如果您觉得这个⽂章有意思，那么请分享并转发，或者也可以关注⼀下表⽰您对我们⽂章的认可与⿎励。
愿⼤家都能在编程这条路，越⾛越远。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。