<!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页面的终端适配的更多相关文章
	

    
								
  1. 使用Flexible实现手淘H5页面的终端适配【转】
		
    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
    
		
    2. 
						
  2. 使用Flexible实现手淘H5页面的终端适配(转)
		
    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
    
		
    3. 
						
  3. （转）使用Flexible实现手淘H5页面的终端适配
		
    原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...
    
		
    4. 
						
  4. [转]使用Flexible实现手淘H5页面的终端适配
		
    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
    
		
    5. 
						
  5. 使用Flexible 实现手淘H5 页面的终端适配学习
		
    Amfe阿里无线前端团队双11技术连载之际,一个实战案例来展示多终端适配. Device metrics 1.0 mdpi 2.0 xhdpi 3.0xxhdpi(iphone 6 plus) 手淘h ...
    
		
    6. 
						
  6. 使用Flexible实现手淘H5页面的终端适配
		
    拿到设计师给的设计图之后,剩下的事情是前端开发人员的事了.而手淘经过多年的摸索和实战,总结了一套移动端适配的方案--flexible方案. 这种方案具体在实际开发中如何使用,暂时先卖个关子,在继续详细 ...
    
		
    7. 
						
  7. 关于标准ui设计图转换为H5页面的终端适配
		
    一些基本概念 在进行具体实战之前,首先得了解下面这些基本概念(术语): 视窗 viewport 简单的理解,viewport是严格等于浏览器的窗口.在桌面浏览器中,viewport就是浏览器窗口的宽度 ...
    
		
    8. 
						
  8. vue移动端h5页面根据屏幕适配的四种方案
		
    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
    
		
    9. 
						
  9. 关于H5页面在iPhoneX适配
		
    ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Apache虚拟主机实战
			
    [root@localhost ~]# wget http://mirrors.hust.edu.cn/apache/httpd/httpd-2.2.32.tar.bz2  [root@localho ...
    
			
    2. 
						
  2. 修改了SpringBoot的主类名称后，gradle build报错的解决办法
			
    Unable to find a single main class from the following candidates [*.*Application]
    
			
    3. 
						
  3. angular2 学习笔记 ( 状态管理 state management )
			
    更新 : 2017-12-29  ng5 移除 zone.js https://zhuanlan.zhihu.com/p/29577461 zone 的用途就是拦截游览器事件, 比如 click, a ...
    
			
    4. 
						
  4. Echarts 中国地图(包括china.js文件)
			
    用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...
    
			
    5. 
						
  5. 使用TortoiseSVN打Tag
			
    参考了 https://blog.csdn.net/liuzx32/article/details/9123401. 值得注意的点是: 选择路径的时候,不要先点进去自己建好叶子节点路径再选择该路径,会 ...
    
			
    6. 
						
  6. 翻译：JVM虚拟机规范1.7中的运行时常量池部分（一）
			
    原文链接: https://docs.oracle.com/javase/specs/jvms/se8/html/jvms-4.html#jvms-4.4 Java Virtual Machine i ...
    
			
    7. 
						
  7. python 进程 线程
			
    进程 线程 操作系统 为什么要有操作系统? 操作系统:操作系统是一个用来协调,管理和控制计算机硬件和软件资源的系统程序.位于底层硬件与应用软件之间 工作方式:向下管理硬件 向上提供接口 切换 1.出现 ...
    
			
    8. 
						
  8. tar磁带归档
			
    一:压缩.解压 1.compress/uncompress/zcat -d:解压 -c:输出到终端,不删除原文件 -v:显示详细信息 2.gzip/ungzip/zcat -d:解压 -c:将压缩或解 ...
    
			
    9. 
						
  9. hadoop fs:du统计hdfs文件（目录下文件）大小的用法
			
    hadoop fs 更多用法,请参考官网:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html 以下是我的使用统计文件时使用的记录: [t@d ...
    
			
    10. 
						
  10. isinstance(obj1,class) 可以判断前者是否是后者的实例
			
    isinstance(obj1,class) 可以判断前者是否是后者的实例
    
			
    11.