您的位置：首页 > 移动开发

移动端(阿里rem)布局

2017-12-05 16:03 441 查看

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
<script>
//通过window.screen.width获取屏幕的宽度
var offWidth = window.screen.width / 30; //这里用宽度/30表示1rem取得的px
document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size
</script>
<style>
/*偷个懒就直接全局初始化了*/

* {
padding: 0;
margin: 0;
}
/* 布局需求,上下都间隔*/

div {
margin: 0.833333333rem 0;
}
/* 去处a标签的下划线*/

a {
text-decoration: none;
}

.one {
width: 30rem;
/*100/720*30*/
height: 4.166666667rem;
/*图片宽750,高100*/
background: url("./img/1.jpg") no-repeat;
background-size: contain;
}

.two {
width: 30rem;
/*400/720*30*/
height: 16.6666667rem;
/*图片宽750,高400*/
background: url("./img/2.jpg") no-repeat;
background-size: contain;
}

.three {
width: 30rem;
height: 5.875rem;
/*图片宽750,高141*/
background: url("./img/3.jpg") no-repeat;
background-size: contain;
}

.four {
width: 28.33333333rem;
height: 13.16666667rem;
/*图片宽750,高316*/
background: url("./img/4.jpg") no-repeat;
background-size: contain;
margin-left: 0.833333333rem;
position: relative;
}

span {
position: absolute;
display: block;
width: 8.33333333rem;
height: 2rem;
line-height: 2rem;
text-align: center;
background: #fff;
right: 0.833333333rem;
bottom: 0.833333333rem;
font-size: 0.95833333rem;
color: red;
cursor: pointer;
}

.five {
width: 28.33333333rem;
height: 13.16666667rem;
/*图片宽750,高316*/
background: url("./img/top4.jpg") no-repeat;
background-size: contain;
margin-left: 0.833333333rem;
}
</style>

</head>

<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four">
<a href=""><span>25元起</span></a>
</div>
<div class="five"></div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航