移动端与PC端有一些地方不一样,涉及到机型不同造成的物理像素的不同,这里需要用到rem来转换不同的机型造成的不同变化,以及flex.js以及一些插件来完成
接下来看代码部分
html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable="no">
<title>Document</title>
<script src="./flexible.js"></script>
<link rel="stylesheet" href="./移动端.css">
</head>
<body>
<header>
<img src="./img/底部安全@2x.png" alt="">
</header>
<section>
<div><a class="s-1" href=""><img src="./img/路径 9@2x.png" alt="">
<p>商品详情</p><img src="./img/路径 68@2x.png" alt="">
</a></div>
<div><a href=""><img src="./img/图像 45@2x.png" alt=""></a></div>
<div class="ding"><a href=""><span class="o">1</span><span class="t">/3</span></a></div>
<div><a href="">万代魂 中国限定 S.H.Figuarts 悟空战袍·赛罗奥特曼</a></div>
<div><a href=""><span class="q1"> 报价:¥460.00  预购价:¥50.00</span><span class="q2">(达上限为止)</span></a>
</div>
<div class="nine"><a href="">拍下视为已阅读详情页,并同意</a></div>
<div class="n-all">
<div class="nine"><a href=""><span>2875人看过</span></a></div>
<div class="nine three-9"><a href=""><span class="pf">评分:</span><span class="b9">9</span><span
class="s9">共1064人评分</span></a></div>
</div>
<div><a href=""><img src="./img/组 16551@2x.png" alt=""></a></div>
<div>
<ul>
<li><a href="">形象:赛罗/悟空</a></li>
<li><a href="">商品总价:¥460.00</a></li>
<li><a href="">系列:S.H.Figuarts</a></li>
<li><a href="">厂商:万代</a></li>
<li><a href="">开定时间:2022年6月1日</a></li>
</ul>
<ul>
<li><a href="">适用年龄:3岁以上</a></li>
<li><a href="">包装方式:彩盒</a></li>
<li><a href="">材质:PVC</a></li>
<li><a href="">进口地:无</a></li>
<li><a href="">到货时间:2022年11月</a></li>
</ul>
</div>
<div class="ten">
<div class="bgtu"><img class="tuc" src="./img/图层 1.png" alt="">
<img src="./img/组 16553@2x.png" alt="">
<div class="wd">万代(BANDAI)</div>
<div class="pp">品牌</div>
<div class="rc">日产</div>
</div>
<div class="orange-2">
<div class="o-l"><a href=""><img src="./img/图层 2@2x.png" alt="">
<p>全部商品</p>
</a></div>
<div class="w-l"><a href=""><img src="./img/图层 2@2x(1).png" alt="">
<p>公司介绍</p>
</a></div>
</div>
</div>
<div><span>产品详情</span></div>
<div><img src="./img/图像 47@2x.png" alt=""></div>
</section>
<div>
</div>
<footer>
<div><a href=""><img src="./img/组 16553@2x.png" alt=""></a></div>
<div><a href=""><img src="./img/图层 2@2x(2).png" alt="">
<p>评论</p>
</a></div>
<div><a href=""><img src="./img/路径 69@2x.png" alt="">
<p>收藏</p>
</a></div>
<div><a href=""><img src="./img/组 16846@2x.png" alt="">
<p>加入购物车</p>
</a></div>
<div><a class="five" href=""><img src="./img/图层 2@2x(3).png" alt=""><span>立即购买</span></a></div>
</footer>
<div class="heng"><a href=""><img src="./img/组件 38 – 26@2x.png" alt=""></a></div>
</body>
</html>
css代码如下
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html,
body {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
header {
width: 100%;
height: 1.1733rem;
/* background-color: aquamarine; */
position: relative;
}
header img {
/* height: 87.9975px; */
width: 100%;
position: absolute;
right: -0.2453rem;
}
/* 顶部栏 */
section {
flex: 1;
overflow: auto;
display: flex;
width: 100%;
}
/* 中间填充 */
footer {
width: 100%;
height: 1.3067rem;
/* background-color: aquamarine; */
display: flex;
justify-content: space-between;
}
footer a:not(.five) {
height: 1.3067rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
footer p {
font-size:.2934rem;
}
footer span {
font-size: .3733rem;
margin-left: .0667rem;
color: white;
}
footer>div:nth-child(1) img {
height: 1rem;
margin-left: .2667rem;
/* margin-top: .0933rem; */
}
footer>div:nth-child(2) img {
height: .4rem;
width: .4533rem;
margin-left: .1067rem;
}
footer>div:nth-child(3) img {
height: .4rem;
width: .4rem;
margin-left: .1067rem;
}
footer>div:nth-child(4) img {
height: .6133rem;
width: .6933rem;
margin-left: 32x;
margin-top: -0.1067rem;
}
footer>div:nth-child(5) img {
height: .4rem;
margin-right: .0533rem;
}
footer>div:nth-child(5) {
width: 4rem;
height: 1.3067rem;
background-color: #D12324;
line-height: 1.3067rem;
padding: 0 0 0 .8533rem;
box-sizing: border-box;
margin-right: -0.2267rem;
}
.heng img {
height: .9067rem;
width: 100%;
}
/* 底部栏 */
section {
display: flex;
flex-direction: column;
box-sizing: border-box;
/* min-width: 10rem; */
/* min-height: 12.32rem; */
/* justify-content: center; */
}
section>div {
margin: .0533rem 0;
}
section div:nth-child(2) a {
font-size: .3733rem;
}
.n-all {
height: .5067rem;
border-bottom: .0133rem solid #E7E7E7;
padding-bottom: .4rem;
}
.pf,
.nine a {
font-size: .32rem;
color: #B6B6B6;
}
.b9 {
font-size: .5333rem;
margin: 0 .1333rem 0 0;
}
.s9 {
font-size: .2133rem;
}
section>div:nth-child(8) {
position: relative;
}
section>div:nth-child(8) img {
position: absolute;
height: .1733rem;
top: -1.1467rem;
right: 1.12rem;
}
/* 中间下方文字 */
.three-9 {
margin-right: .8rem;
margin-top: -0.2667rem;
}
section div:nth-child(1) a {
/* background-color: aqua; */
line-height: 1.3067rem;
height: 1.3067rem;
display: flex;
justify-content: space-between;
}
.s-1>img:nth-child(1) {
height: .4533rem;
margin-top: .4267rem;
}
.s-1>img:nth-child(3) {
height: .5067rem;
margin-top: .4267rem;
}
.s-1 p {
font-size: .4267rem;
}
/* 中间第一行 */
section div:nth-child(2) {
text-align: center;
position: relative;
}
section div:nth-child(2) img {
width: 5.7333rem;
/* margin-left: 1.0667rem; */
}
section div:nth-child(9){
display: flex;
justify-content: space-around;
}
/* 大图 */
.ding {
width: 1.4267rem;
height: .5333rem;
background-color: #999999;
border-radius: .2667rem 0 0 .2667rem;
position: absolute;
right: 0rem;
top: 7.3333rem;
box-sizing: border-box;
padding-left: .4rem;
line-height: .5333rem;
z-index:99;
}
.ding span {
color: white;
}
.o {
font-size: .3733rem;
}
.t {
font-size: .2667rem;
}
section div:nth-child(4) a {
font-size: .4267rem;
color: black;
}
.q1 {
color: red;
font-size:.3733rem;
}
.q2 {
font-size: .2667rem;
}
section div:nth-child(7) {
/* float: left; */
display: flex;
justify-content: space-between;
/* background-color: bisque; */
align-items: center;
}
section div:nth-child(9) {
/* float: right; */
display: flex;
/* justify-content: space-between; */
/* background-color: aqua; */
}
.tuc{
position: absolute;
left: -20px;
width: 10rem;
}
section>ul {
display: flex;
flex-direction: column;
/* flex-wrap: wrap; */
justify-content: space-between;
}
section>div>ul a {
font-size: .3467rem;
line-height: .84rem;
color: black;
}
section ul:nth-child(2) {
margin-left: .64rem;
}
section>div:nth-child(10) {
height: 3.6133rem;
/* background-color: #0b0404; */
padding: 0 0;
box-sizing: border-box;
width: 10rem;
}
section:not(.ten) {
padding: 0 .2667rem;
}
.orange-2 {
display: flex;
height: 1.3867rem;
}
.orange-2 div {
margin-top: .4rem;
}
.bgtu {
height: 2.1067rem;
}
.o-l,
.w-l {
width: 4.56rem;
height: .72rem;
line-height: .72rem;
border-radius:.3733rem;
/* border: 4.6875px solid #FE5722; */
}
section>div:nth-child(10) .o-l a,
.w-l a {
display: flex;
justify-content: center;
line-height: .72rem;
font-size: .3467rem;
}
section>div:nth-child(10) .o-l img,
section>div:nth-child(10) .w-l img {
width: .4267rem;
height: .4267rem;
margin-top: .1333rem;
margin-right:.2667rem;
}
.o-l {
background-color: #FE5722;
margin-right: .2667rem;
}
.w-l {
background-color: white;
/* margin-right: .1333rem; */
}
.ten {
position: relative;
}
.bgtu img:not(.tuc){
width: 1.3333rem;
position: absolute;
top: .3867rem;
left: .2667rem;
}
.wd {
font-size: .3467rem;
color: white;
position: absolute;
top: .44rem;
left: 1.9067rem;
width: 3.2rem;
/* background-color: #00B32A; */
}
.pp,
.rc {
font-size: .2667rem;
color: white;
width: 1.0667rem;
height: .4533rem;
border-radius: .24rem;
text-align: center;
line-height: .4533rem;
}
.pp {
background-color: #BF1D1E;
position: absolute;
top: 1.3333rem;
left:2.0267rem;
}
.rc {
background-color: #00B32A;
position: absolute;
top: 1.3333rem;
left: 3.4133rem;
}
/* 背景图块 */
section div:nth-child(11){
height: 1.3067rem;
line-height: 1.3067rem;
/* width: 100%; */
text-align: center;
}
section div:nth-child(11)>span{
font-size: .4267rem;
}
section div:nth-child(12) img{
width: 10rem;
text-align: center;
}
效果图如下