您的位置：首页 > Web前端 > HTML5

使用Flexible实现手淘H5页面的终端适配的注意事项

2016-02-22 11:01 603 查看
具体思路，请参考大漠的原文，此处仅提供部分源码注意事项。

html

<!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="./javascript/flexible_css.debug.js"></script>
<script src="./javascript/flexible.debug.js"></script>
<title>再来一波DEMO</title>
<link rel="stylesheet" href="../dist/tmall_goods.css"/>
</head>
<body>
<div>
<div>
<h2><img src="http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg" alt=""></h2>
</div>
<ul>
<li>
<a class="list-item goods"><img src="https://placeimg.com/350/350/people/grayscale" alt=""></a>
<div class="list-item goods-details">
<p>Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</p>
<div>
<span>双11价</span>
<strong>¥299.06</strong>
<small>(满400减100)</small>
</div>
<p>1小时内热卖5885件</p>
<a href="javascript:void(0);">马上抢！</a>
</div>
</li>
<li>
<a class="list-item goods"><img src="https://placeimg.com/350/350/people/grayscale" alt=""></a>
<div class="list-item goods-details">
<p>Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</p>
<div>
<span>双11价</span>
<strong>¥299.06</strong>
<small>(满400减100)</small>
</div>
<p>1小时内热卖5885件</p>
<a href="javascript:void(0);">马上抢！</a>
</div>
</li>
</ul>
</div>
</body>
</html>


src中的tmall_goods.css

html,body{height: 100vh;}
.g-warp{min-height:100%;background-color: #ee0a3b;position:relative;font-size:12px;/*px*/}
.g-header{text-align:center}
.g-header img{width:750px}
.goods-lists{padding:10px}
.goods-lists .list{display:table;width:100%;margin-bottom:1px;background-color:#fff}
.goods-lists .list-item{display:table-cell;padding:10px 0;vertical-align:top;background-color:#fff}
.goods-lists .goods{width:130px;height:130px;/*px*/}
.goods-lists .goods img{width:130px;height:130px;/*px*/vertical-align:top}

.goods-lists .goods-details{width:2700px;padding-left:10px;padding-right:10px;position:relative}
.goods-lists .goods-title{color:#333;line-height:1.25;overflow:hidden;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;box-orient:vertical;display:-webkit-box;display:box}
.goods-lists .describe-wrap{padding: 10px 0 6px}
.goods-lists .goods-tag{display:inline-block;background-color:#ee0a3b;vertical-align:middle;border-radius:4px;padding:4px 2px;color:#fff;font-weight:700;margin-right:4px;font-size:12px;/*px*/}
.goods-lists .goods-price{display:inline-block;vertical-align:middle;font-weight:700;color:#ee0a3b;font-size:16px;/*px*/margin-right:10px}
.goods-lists .goods-des{display:inline-block;vertical-align:middle;font-weight:700;color:#ee0a3b;font-size:12px;/*px*/}
.goods-lists .goods-sold{color:#ff3600}
.goods-lists .btn{position:absolute;width:116px;height:34px;line-height:34px;background-color:#ee0a3b;text-align:center;color:#fff;font-weight:700;font-size:14px;/*px*/bottom:10px;right:20px;border-radius:4px}


处理后dist中的tmall_goods.css

html,
body {
height: 100vh;
}

.g-warp {
min-height: 100%;
background-color: #ee0a3b;
position: relative;
}

[data-dpr="1"] .g-warp {
font-size: 6px;
}

[data-dpr="2"] .g-warp {
font-size: 12px;
}

[data-dpr="3"] .g-warp {
font-size: 18px;
}

.g-header {
text-align: center;
}

.g-header img {
width: 10rem;
}

.goods-lists {
padding: 0.133333rem;
}

.goods-lists .list {
display: table;
width: 100%;
margin-bottom: 0.013333rem;
background-color: #fff;
}

.goods-lists .list-item {
display: table-cell;
padding: 0.133333rem 0;
vertical-align: top;
background-color: #fff;
}

.goods-lists .goods {
width: 1.733333rem;
}

[data-dpr="1"] .goods-lists .goods {
height: 65px;
}

[data-dpr="2"] .goods-lists .goods {
height: 130px;
}

[data-dpr="3"] .goods-lists .goods {
height: 195px;
}

.goods-lists .goods img {
width: 1.733333rem;
vertical-align: top;
}

[data-dpr="1"] .goods-lists .goods img {
height: 65px;
}

[data-dpr="2"] .goods-lists .goods img {
height: 130px;
}

[data-dpr="3"] .goods-lists .goods img {
height: 195px;
}

.goods-lists .goods-details {
width: 36rem;
padding-left: 0.133333rem;
padding-right: 0.133333rem;
position: relative;
}

.goods-lists .goods-title {
color: #333;
line-height: 1.25;
overflow: hidden;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
box-orient: vertical;
display: -webkit-box;
display: box;
}

.goods-lists .describe-wrap {
padding: 0.133333rem 0 0.08rem;
}

.goods-lists .goods-tag {
display: inline-block;
background-color: #ee0a3b;
vertical-align: middle;
border-radius: 0.053333rem;
padding: 0.053333rem 0.026667rem;
color: #fff;
font-weight: 700;
margin-right: 0.053333rem;
}

[data-dpr="1"] .goods-lists .goods-tag {
font-size: 6px;
}

[data-dpr="2"] .goods-lists .goods-tag {
font-size: 12px;
}

[data-dpr="3"] .goods-lists .goods-tag {
font-size: 18px;
}

.goods-lists .goods-price {
display: inline-block;
vertical-align: middle;
font-weight: 700;
color: #ee0a3b;
margin-right: 0.133333rem;
}

[data-dpr="1"] .goods-lists .goods-price {
font-size: 8px;
}

[data-dpr="2"] .goods-lists .goods-price {
font-size: 16px;
}

[data-dpr="3"] .goods-lists .goods-price {
font-size: 24px;
}

.goods-lists .goods-des {
display: inline-block;
vertical-align: middle;
font-weight: 700;
color: #ee0a3b;
}

[data-dpr="1"] .goods-lists .goods-des {
font-size: 6px;
}

[data-dpr="2"] .goods-lists .goods-des {
font-size: 12px;
}

[data-dpr="3"] .goods-lists .goods-des {
font-size: 18px;
}

.goods-lists .goods-sold {
color: #ff3600;
}

.goods-lists .btn {
position: absolute;
width: 1.546667rem;
height: 0.453333rem;
line-height: 0.453333rem;
background-color: #ee0a3b;
text-align: center;
color: #fff;
font-weight: 700;
bottom: 0.133333rem;
right: 0.266667rem;
border-radius: 0.053333rem;
}

[data-dpr="1"] .goods-lists .btn {
font-size: 7px;
}

[data-dpr="2"] .goods-lists .btn {
font-size: 14px;
}

[data-dpr="3"] .goods-lists .btn {
font-size: 21px;
}


gulp和gulp插件 gulpfile.js

var gulp = require('gulp');

var postcss = require('gulp-postcss');

var px2rem = require('postcss-px2rem');

gulp.task('default', function() {

var processors = [px2rem({remUnit: 75})];

return gulp.src('./src/css/tmall_goods.css')

.pipe(postcss(processors))

.pipe(gulp.dest('./dist'));

});

使用postcss-px2rem插件处理px时候，需要在使用时候注意每个属性后面的分号不能省略，默认是都转换为rem，如若某个属性不需要转换为rem，需要按照dpr不同而分别设置大小，则在后面加上注释/*px*/，如若需要原样输出，则在后面加上注释/*no*/，此处需要多加留意，对于刚接触的我们新手来说，是个坑啊！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Flexible 再来一波demo
相关文章推荐
新的分享
章节导航