<!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. 从PRISM开始学WPF（八）導航Navigation？
			
    0x6Navigation Basic Navigation Prism中的Navigation提供了一种类似导航的功能,他可以根据用户的输入,来刷新UI. 先看一个最简单的例子,通过按钮来导航到一个 ...
    
			
    2. 
						
  2. OAuth2.0学习（1-9）新浪开放平台微博认证-web应用授权（授权码方式）
			
    1. 引导需要授权的用户到如下地址: URL 1 https://api.weibo.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&respons ...
    
			
    3. 
						
  3. 关于阿里巴巴iconfont的使用方法
			
    iconfont网址:http://www.iconfont.cn/ 说起iconfont,做前端开发的应该知道它的好处,图标库之丰富,只有你想不到的,没有你找不到的,而且轻量高清.用户在iconfo ...
    
			
    4. 
						
  4. 转：java中Vector的使用
			
    转:https://www.cnblogs.com/zhaoyan001/p/6077492.html Vector 可实现自动增长的对象数组. java.util.vector提供了向量类(vect ...
    
			
    5. 
						
  5. Windows10+Docker搭建分布式Redis集群（SSH服务镜像）（二）
			
    前言:上篇文章我们搭建好了Docker,下面我们开始使用Docker创建镜像,Docker命令就不介绍了.这里宿主是Windows10,cmd的管理和后期文件的复制不是很方便,将创建支持SSH的Cen ...
    
			
    6. 
						
  6. ROS系统MoveIt玩转双臂机器人系列（一）
			
    一.ROS系统的MoveIt模块简介 机器人操作系统ROS目前最受关注的两个模块是导航(Navigation)和机械臂控制(MoveIt!),其中,机械臂控制模块(后面简称MoveIt)可以让用户快速 ...
    
			
    7. 
						
  7. [转]最常用的15大Eclipse开发快捷键技巧
			
    作者:Java我人生(陈磊兴)   原文出处http://blog.csdn.net/chenleixing/article/details/44600587 做Java开发的,经常会用Eclipse ...
    
			
    8. 
						
  8. scrapy爬取小说盗墓笔记
			
    # -*- coding: utf-8 -*- import scrapy from daomu.items import DaomuItem class DaomuspiderSpider(scra ...
    
			
    9. 
						
  9. line-height与图片底部间隙的学习整理转述
			
    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 看大牛张鑫旭的视屏可能会理解的更深一些,点击这里: line-height,两行文字的基线之间的距离: 基 ...
    
			
    10. 
						
  10. building a new horizon
			
    昨天是4月14日,也是我的23岁生日.正好去参加GDG举办的WTM,这次的主题是building a new horizon. 写一下印象深刻的分享者和她们的闪光点. 1.羡辙-从灵感到落地 羡辙是在 ...
    
			
    11.