文档章节

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

The-duke
 The-duke
发布于 2016/02/22 11:01
字数 974
阅读 448
收藏 0

具体思路,请参考大漠的原文,此处仅提供部分源码注意事项。

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*/,此处需要多加留意,对于刚接触的我们新手来说,是个坑啊!


© 著作权归作者所有

The-duke
粉丝 32
博文 58
码字总数 16890
作品 0
成都
前端工程师
私信 提问
使用Flexible实现手淘H5页面的终端适配

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

问题达人
2016/03/29
29
0
使用Flexible实现手淘H5页面的终端适配 #17

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

GIFCOOL
2016/09/22
56
0
8、手机适配问题之rem和lib-flexible

前言:GitHub:https://github.com/Ewall1106/mall 一、关于lib-flexible.js flexible方案是手淘经过多年的摸索和实战,总结出的一套移动端适配方案,这里我推荐一篇w3c大漠老师的一篇文章使...

Ewall_
2018/06/15
0
0
使用Flexible实现手淘H5页面的终端适配--大漠

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

拉普拉斯婷
2016/12/15
35
0
前端屏幕适配的总结

1.web app变革之rem(http://isux.tencent.com/web-app-rem.html) 2.移动前端自适应解决方案和比较(http://caibaojian.com/mobile-responsive-example.html) 3.前端开发终端适配方案(http://w......

IT追寻者
2016/08/03
195
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式

//分静态代理和动态代理,区别:是否再编译时知道被被代理的对象 //思想,被代理类将自己的处理交给代理类,代理类可以添加一些新的功能,之后有代理类和客户端交互 https://www.cnblogs.co...

南桥北木
21分钟前
1
0
Spring系列教程七: Spring 整合mybatis的四种方式

一、使用注解实现整合mybatis 项目目录如下 第一步、导入jar包 <build> <resources> <!-- mapper.xml文件在java目录下 --> <resource> ......

我叫小糖主
27分钟前
5
0
阿里P7架构师:这些技术点没搞懂,我劝你不要跳槽!

阿里P7架构师架构师:这些技术点没搞懂,我劝你不要跳槽! 哪些技术点呢? 废话不多说,技术点全在下面这6张图里面了! 1.怎么看源码? 2.分布式 3.微服务 4.性能优化 5.工程化 粉丝福利:一...

别打我会飞
45分钟前
4
0
易错题

父类必须有一个无参构造,不然会报Implicit super constructor Parent() is undefined. Must explicitly invoke another constructor...

architect刘源源
50分钟前
1
0
使用Json4s 将带有Timestamp的对象转json时 变为所在时区

在有Timestamp属性的对象转json时 最后出来的时间会减小8小时,是因为变成了0时区,需要将隐式转换中添加设置本地时区 import org.json4s.{DefaultFormats, Formats}import org.json4s.jac...

可达鸭Go
52分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部