使用Flexible實現手淘H5頁面的終端適配的注意事項

時間 2019-11-18

標籤使用 flexible 實現 h5 頁面終端適配注意事項欄目 Flex 简体版

原文原文鏈接

具體思路，請參考大漠的原文，此處僅提供部分源碼注意事項。
javascript

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');css

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

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

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

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

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

.pipe(postcss(processors))post

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

});ui

使用postcss-px2rem插件處理px時候，須要在使用時候注意每一個屬性後面的分號不能省略，默認是都轉換爲rem，如若某個屬性不須要轉換爲rem，須要按照dpr不一樣而分別設置大小，則在後面加上註釋/*px*/，如若須要原樣輸出，則在後面加上註釋/*no*/，此處須要多加留意，對於剛接觸的咱們新手來講，是個坑啊！