Flexible DEMO 实现手淘H5页面的终端适配
<!DOCTYPE html>
<html>
<head>
<title>淘宝flexiblejs</title>
<meta charset="utf-8"> <!-- 苹果手机开启对webapp的支持，content=yes则全屏运行，默认为no -->
<meta name="apple-mobile-web-app=capable" content="yes">
<!-- 苹果设备全屏显示 -->
<meta name="apple-touch-fullscreen" content="yes">
<!-- 格式检测 -->
<meta name="format-detection" content="telephone=no,email=no,address=no">
<script type="text/javascript" src="build/flexible_css.debug.js"></script>
<script type="text/javascript" src="build/flexible.debug.js"></script>
<style type="text/css"> .item-section{min-height:10rem;background-color:#ee0a3b;position:relative;font-size:12px}
[data-dpr="2"] .item-section{font-size:24px}
[data-dpr="3"] .item-section{font-size:36px}
.item-section_header{text-align:center}
.item-section_header img{width:10rem}
.item-section ul{padding:.133333rem}
.flag{display:table;width:100%;margin-bottom:1px;background-color:#fff}
.flag .flag-item{display:table-cell;padding:.16rem 0;vertical-align:top;background-color:#fff}
.flag .flag-item.figcaption{width:133.333333rem;padding-left:.2rem;padding-right:.2rem;position:relative}
.flag .flag-item.figure{width:2.4rem;height:2.4rem}
.flag .flag-item img{width:2.4rem;height:2.4rem;vertical-align:top}
.flag .flag-title a{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}
.flag .flag-price{padding:.15rem 0 .2rem}.flag .flag-price span{display:inline-block;background-color:#ee0a3b;vertical-align:middle;border-radius:.026667rem;padding:.026667rem .08rem .013333rem;color:#fff;font-weight:700;margin-right:.066667rem;font-size:11px}
[data-dpr="2"] .flag .flag-price span{font-size:22px}
[data-dpr="3"] .flag .flag-price span{font-size:33px}
.flag .flag-price strong{display:inline-block;vertical-align:middle;font-weight:700;color:#ee0a3b;font-size:16px;margin-right:.16rem}
[data-dpr="2"] .flag .flag-price strong{font-size:32px}
[data-dpr="3"] .flag .flag-price strong{font-size:48px}
.flag .flag-price small{display:inline-block;vertical-align:middle;font-weight:700;color:#ee0a3b;font-size:12px}
[data-dpr="2"] .flag .flag-price small{font-size:24px}
[data-dpr="3"] .flag .flag-price small{font-size:36px}
.flag .flag-type{color:#ff3600}
.flag .flag-btn{position:absolute;width:2.133333rem;height:.64rem;line-height:.64rem;background-color:#ee0a3b;text-align:center;color:#fff;font-weight:700;font-size:14px;bottom:.133333rem;right:.2rem;border-radius:.026667rem}
[data-dpr="2"] .flag .flag-btn{font-size:28px}
[data-dpr="3"] .flag .flag-btn{font-size:42px} </style>
<style type="text/css">
html,body{
height: 100vh;
background-color: #ee0a3b;
}
</style>
</head>
<body>
<div class="item-section">
<div class="item-section_header">
<h2>
<img src="taobao.jpg" alt="">
</h2>
</div>
<ul>
<li class="flag" role="link" href="">
<a href="" class="figure flag-item">
<img src="grayscale.jpg">
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a>Nike耐克官方 ZOOM KOBE VENOMEN 5 EP 科比男子篮球鞋815757</a>
</div>
<div class="flag-price">
<span>双十一价</span>
<strong>￥1999</strong>
<small>(满300减150)</small>
</div>
<div class="flag-type">
6875人在疯抢
</div>
<a class="flag-btn">
马上抢！
</a>
</div>
</li>
<li class="flag" role="link" href="">
<a href="" class="figure flag-item">
<img src="grayscale.jpg">
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a>Nike耐克官方 ZOOM KOBE VENOMEN 5 EP 科比男子篮球鞋815757</a>
</div>
<div class="flag-price">
<span>双十一价</span>
<strong>￥1999</strong>
<small>(满300减150)</small>
</div>
<div class="flag-type">
6875人在疯抢
</div>
<a class="flag-btn">
马上抢！
</a>
</div>
</li>
<li class="flag" role="link" href="">
<a href="" class="figure flag-item">
<img src="grayscale.jpg">
</a>
<div class="figcaption flag-item">
<div class="flag-title">
<a>Nike耐克官方 ZOOM KOBE VENOMEN 5 EP 科比男子篮球鞋815757</a>
</div>
<div class="flag-price">
<span>双十一价</span>
<strong>￥1999</strong>
<small>(满300减150)</small>
</div>
<div class="flag-type">
6875人在疯抢
</div>
<a class="flag-btn">
马上抢！
</a>
</div>
</li>
</ul>
</div>
</body>
</html>
ps:关于-webkit-line-clamp：
http://www.css88.com/archives/tag/line-clamp
http://www.css88.com/book/css/webkit/text/line-clamp.htm
Flexible DEMO 实现手淘H5页面的终端适配的更多相关文章
- 使用Flexible实现手淘H5页面的终端适配【转】
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- 使用Flexible实现手淘H5页面的终端适配(转)
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- （转）使用Flexible实现手淘H5页面的终端适配
原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...
- [转]使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- 使用Flexible 实现手淘H5 页面的终端适配学习
Amfe阿里无线前端团队双11技术连载之际,一个实战案例来展示多终端适配. Device metrics 1.0 mdpi 2.0 xhdpi 3.0xxhdpi(iphone 6 plus) 手淘h ...
- 使用Flexible实现手淘H5页面的终端适配
拿到设计师给的设计图之后,剩下的事情是前端开发人员的事了.而手淘经过多年的摸索和实战,总结了一套移动端适配的方案--flexible方案. 这种方案具体在实际开发中如何使用,暂时先卖个关子,在继续详细 ...
- 关于标准ui设计图转换为H5页面的终端适配
一些基本概念 在进行具体实战之前,首先得了解下面这些基本概念(术语): 视窗 viewport 简单的理解,viewport是严格等于浏览器的窗口.在桌面浏览器中,viewport就是浏览器窗口的宽度 ...
- vue移动端h5页面根据屏幕适配的四种方案
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
- 关于H5页面在iPhoneX适配
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
随机推荐
- 文本分类学习（三） 特征权重（TF/IDF）和特征提取
上一篇中,主要说的就是词袋模型.回顾一下,在进行文本分类之前,我们需要把待分类文本先用词袋模型进行文本表示.首先是将训练集中的所有单词经过去停用词之后组合成一个词袋,或者叫做字典,实际上一个维度很大的 ...
- OAuth2.0学习（1-1）OAuth2.0是什么？
目前很多开放平台如新浪微博开放平台都在使用提供开放API接口供开发者使用,随之带来了第三方应用要到开放平台进行授权的问题 OAuth就是用于为第三方应用授权访问用户的资源应用的. 目前有OAuth1. ...
- ssh整合之二hibernate单独搭建
1.首先我们需要去拷贝我们的hibernate所需的jar包 这里还需要加入我们C3P0的jar包,因为我们hibernate中使用的C3P0连接池 2. 编写我们的关系映射文件Customer.c ...
- c# IPC实现本机进程之间的通信
IPC可以实现本地进程之间通信.这种用法不是太常见,常见的替代方案是使用wcf,remoting,web service,socket(tcp/pipe/...)等其他分布式部署方案来替代进程之间的通 ...
- python json.dumps 中的ensure_ascii 参数引起的中文编码问题
在使用json.dumps时要注意一个问题 >>> import json >>> print json.dumps('中国') "\u4e2d\u5 ...
- Python 学习开篇
前言 最近看到一张图,有点意思: 蓝色是(成长+付出),红色是回报.有多久可以达到这个红心,要看我们自已的努力,付出了多少专注与汗水.我想说的是,水平轴并不是时间,如果不能坚持努力,可能永远都到不了那 ...
- [LeetCode] Student Attendance Record II 学生出勤记录之二
Given a positive integer n, return the number of all possible attendance records with length n, whic ...
- Spring MVC 知识点记忆
1.Dao 用的 @Repository 2.Handler 用的 @Controller 3. @Autowired 消除了对get set方法 4. @RequestMapping(value= ...
- Shell的基本命令(第一天),根据w3c学习得
Shell是一种应用程序,提供一个界面访问操作系统内核的服务. 1:编写shell脚本 vi test.sh #!/bin/bash #指定这个脚本需要什么解释器来执行 echo "Hell ...
- 以技术面试官的经验分享毕业生和初级程序员通过面试的技巧（Java后端方向）
本来想分享毕业生和初级程序员如何进大公司的经验,但后来一想,人各有志,有程序员或许想进成长型或创业型公司或其它类型的公司,所以就干脆来分享些提升技能和通过面试的技巧,技巧我讲,公司你选,两厢便利. 毕 ...