css flex 兼容ios android--商品展示添加购物车

https://blog.csdn.net/u010035608/article/details/52711248

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<link rel="apple-touch-icon" href="https://img.alicdn.com/tfs/TB1ZDNRuhGYBuNjy0FnXXX5lpXa-468-644.jpg_320x5000q100.jpg_.webp">
<link rel="Shortcut Icon" href="https://img.alicdn.com/tfs/TB1ZDNRuhGYBuNjy0FnXXX5lpXa-468-644.jpg_320x5000q100.jpg_.webp" type="image/x-icon">
<link rel="stylesheet" href="css/mobile.css">

<title>mobile</title>

</head>

<body>

<div class="item-section" data-repeat="sections">
<div class="item-header">
<img src="http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg" alt="" />
</div>
<ul>
<li data-repeat="items" class="flag" role="link" href="">
<a class="figure flag-item" href="">
<img src="https://img.alicdn.com/tfs/TB1ZDNRuhGYBuNjy0FnXXX5lpXa-468-644.jpg_320x5000q100.jpg_.webp" class='goodsImg' alt="">
<div class="aniContainer"></div>
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a href="" title="">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
</div>
<div class="flag-price">
<span>双11价</span>
<strong>¥299.06</strong>
<small>(满400减100)</small>
</div>
<div class="flag-type">热卖100件</div>
<a class="flag-btn" href="javascript:;">马上抢</a>
</div>
</li>

<li data-repeat="items" class="flag" role="link" href="">
<a class="figure flag-item" href="">
<img src="//img.alicdn.com/bao/uploaded/i4/1940689151/TB2dldEHhWYBuNjy1zkXXXGGpXa_!!1940689151-0-item_pic.jpg" class='goodsImg' alt="">
<div class="aniContainer"></div>
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a href="" title="">Nike耐克官方ZOOM KOBE VENOMENON 5 EP科比男子篮球鞋815757</a>
</div>
<div class="flag-price">
<span>双11价</span>
<strong>¥299.06</strong>
<small>(满400减100)</small>
</div>
<div class="flag-type">热卖100件</div>
<a class="flag-btn" href="javascript:;">马上抢</a>
</div>
</li>

<li data-repeat="items" class="flag" role="link" href="">
<a class="figure flag-item" href="">
<img src="//img.alicdn.com/bao/uploaded/i2/859494695/TB1Hd84yLiSBuNkSnhJXXbDcpXa_!!0-item_pic.jpg" class='goodsImg' alt="">
<div class="aniContainer"></div>
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a href="" title="">现货【送皮套+钢膜+耳机】Xiaomi/小米红米Note2手机note2</a>
</div>
<div class="flag-price">
<span>双11价</span>
<strong>¥299.06</strong>
<small>(满400减100)</small>
</div>
<div class="flag-type">热卖100件</div>
<a class="flag-btn" href="javascript:;">马上抢</a>
</div>
</li>

<li data-repeat="items" class="flag" role="link" href="">
<a class="figure flag-item" href="">
<img src="//img.alicdn.com/bao/uploaded/i4/1025480580/TB141m.iXuWBuNjSszbXXcS7FXa_!!0-item_pic.jpg" class='goodsImg' alt="">
<div class="aniContainer"></div>
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a href="" title="">现货【送皮套+钢膜+耳机】Xiaomi/小米红米Note2手机note2</a>
</div>
<div class="flag-price">
<span>双11价</span>
<strong>¥299.06</strong>
<small>(满400减100)</small>
</div>
<div class="flag-type">热卖100件</div>
<a class="flag-btn" href="javascript:;">马上抢</a>
</div>
</li>

<li data-repeat="items" class="flag" role="link" href="">
<a class="figure flag-item" href="">
<img src="//img.alicdn.com/bao/uploaded/i3/911810517/TB15wKraS8YBeNkSnb4XXaevFXa_!!0-item_pic.jpg" class='goodsImg ' alt="" />
<div class="aniContainer"></div>
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a href="" title="">底部【送皮套+钢膜+耳机】Xiaomi/小米红米Note2手机note2</a>
</div>
<div class="flag-price">
<span>双11价</span>
<strong>¥299.06</strong>
<small>(满400减100)</small>
</div>
<div class="flag-type">热卖100件</div>
<a class="flag-btn" href="javascript:;">马上抢</a>
</div>
</li>
<li data-repeat="items" class="flag" role="link" href="">
<a class="figure flag-item" href="">
<img src="https://img.alicdn.com/tfs/TB1ZDNRuhGYBuNjy0FnXXX5lpXa-468-644.jpg_320x5000q100.jpg_.webp" class='goodsImg' alt="">
<div class="aniContainer"></div>
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a href="" title="">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
</div>
<div class="flag-price">
<span>双11价</span>
<strong>¥299.06</strong>
<small>(满400减100)</small>
</div>
<div class="flag-type">热卖100件</div>
<a class="flag-btn" href="javascript:;">马上抢</a>
</div>
</li>

</div>
<div class="item-footer">
<div class="footer-img">
<img src="img/home.png/" alt="首页" />
<span>首页</span>
</div>
<div class="footer-img">
<img src="img/phone.png/" alt="电话" />
<span>电话</span>
</div>
<div class="footer-img"><img src="img/customSer.png/" alt="客服" /> <span>客服</span></div>
<div class="footer-img"><img src="img/collection.png" alt="收藏" /> <span>收藏</span></div>
<div class="footer-cat">加入购物车</div>
<div class="footer-buy">立即购买</div>
</div>

</html>

$color:#20B2AA;
@function px2em($px, $base-font-size: 16px) {
@if (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return px2em($px + 0px);
}
@else if (unit($px)==em) {
@return $px;
}
@return ($px / $base-font-size) * 1em;
}

@mixin px2rem($property, $px-values, $baseline-px:16px, $support-for-ie:false) {
$baseline-rem: $baseline-px / 1rem * 1;
@if $support-for-ie {
#{$property}: $px-values;
}
@if type-of($px-values)=="number" {
#{$property}: $px-values / $baseline-rem;
}
@else {
@each $value in $px-values {
@if $value==0 or type-of($value) !="number" {
$rem-values: append($rem-values, $value / $baseline-rem);
}
}
}
}

@mixin displayFlex {
display: -webkit-box;
/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box;
/* 老版本语法: Firefox (buggy) */
display: -ms-flexbox;
/* 混合版本语法: IE 10 */
display: -webkit-flex;
/* 新版本语法: Chrome 21+ */
display: -ms-flex;
display: -moz-flex;
display: -webkit-flex;
display: flex;
/* 新版本语法: Opera 12.1, Firefox 22+ */
}

@mixin flexCom {
@include displayFlex;
// 兼容苹果安卓
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.item-section {
background-color: #f5294c;
padding: px2em(20) px2em(10);
.item-header {
text-align: center;
img {
100%;
}
}
ul {
100%;
margin-bottom: px2em(60);
li {
100%;
@include displayFlex;
flex-direction: row;
margin-bottom: px2em(2);
background-color: #fffffd;
.figure {
px2em(100);
margin: px2em(20) px2em(6) px2em(14) px2em(6);
.aniContainer img {
position: fixed;
px2em(100);
z-index: 100;
}
}
.figcaption {
calc(100% - #{px2em(130)});
-moz-calc(100% - #{px2em(130)});
-webkit-calc(100% - #{px2em(130)});
margin: px2em(20) px2em(0) px2em(14) px2em(10);
>div {
100%;
}
}
.flag-item {
@include displayFlex;
position: relative;
// 兼容苹果安卓
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
img {
100%;
height: px2em(114);
}
.flag-title a {
text-decoration: none;
color: #000000;
}
.flag-price {
color: #f32a4c;
padding: px2em(14) 0;
span {
padding: px2em(6) px2em(4);
margin-right: px2em(10);
border-radius: px2em(2);
color: #ffffff;
background-color: #f32a4c;
}
strong {
font-weight: 700;
margin-right: px2em(10);
font-size: px2em(20);
}
small {
font-weight: 700;
font-size: px2em(16);
}
}
.flag-type {
color: #ff6a30;
}
>a {
px2em(90);
height: px2em(30);
border-radius: px2em(2);
align-self: flex-end;
text-align: center;
line-height: px2em(30);
letter-spacing: px2em(6);
text-indent: px2em(6);
color: #ffffff;
text-decoration: none;
background-color: #f5294c;
position: absolute;
bottom: px2em(-8);
left: 100%;
margin-left: px2em(-90);
}
}
}
}
}

.item-footer {
position: fixed;
bottom: 0;
100%;
height: px2em(60);
background-color: #ffffff;
text-align: center;
@include displayFlex;
.footer-img {
13%;
height: 100%;
@include flexCom;
img {
px2em(24);
height: px2em(24);
}
span {
display: block;
font-size: px2em(14);
}
}
.footer-cat {
24%;
height: 100%;
font-size: px2em(20);
line-height: px2em(50);
background-color: #FF7F50;
color: #ffffff;
}
.footer-buy {
24%;
height: 100%;
font-size: px2em(20);
line-height: px2em(50);
background-color: #FF4500;
color: #ffffff;
}
}

.goodsBuy {
-moz-animation: to_cart .5s linear;
-webkit-animation: to_cart .5s linear;
animation: to_cart .5s linear;
}

@-moz-keyframes to_cart {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
left: 6.5%;
top: 100%;
margin-left: px2em(-50);
margin-top: px2em(-72);
-webkit-transform: scale(0);
transform: scale(0);
}
}

@-o-keyframes to_cart {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
left: 6.5%;
top: 100%;
margin-left: px2em(-50);
margin-top: px2em(-72);
-webkit-transform: scale(0);
transform: scale(0);
}
}

@-webkit-keyframes to_cart {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
left: 6.5%;
top: 100%;
margin-left: px2em(-50);
margin-top: px2em(-72);
-webkit-transform: scale(0);
transform: scale(0);
}
}

@keyframes to_cart {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
left: 6.5%;
top: 100%;
margin-left: px2em(-50);
margin-top: px2em(-72);
-webkit-transform: scale(0);
transform: scale(0);
}
}

兼容安卓 ios

css flex 兼容ios android--商品展示 添加购物车

css flex 兼容ios android--商品展示添加购物车