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各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
随机推荐
- Linux下的Shell编程（2）环境变量和局部变量
Shell Script是一种弱类型语言,使用变量的时候无需首先声明其类型. 局部变量在本地数据区分配内存进行存储,这个变量归当前的Shell所有,任何子进 程都不能访问本地变量.这些变量与环境变量不 ...
- zuul入门（4）zuul的注解@EnableZuulServer和@EnableZuulProxy
@EnableZuulServer.@EnableZuulProxy两个注解 @EnableZuulProxy简单理解为@EnableZuulServer的增强版,当Zuul与Eureka.Ribbo ...
- SOAPtest报错：error occurred during initialization of vm解决方法
参考:http://forums.parasoft.com/index.php?act=ST&f=36&t=614 安装SOAPtest报错:error occurred during ...
- Python模块 - os , sys.shutil
os 模块是与操作系统交互的一个接口 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录: ...
- final类与final方法
inal---用于类.方法前. final类---不可被继承. final方法---不可被覆盖. final类不能被继承. 如果我们不希望一个类被继承,我们使用final来修饰这个类.这个类将无法被继 ...
- python Josnp(跨域)
python Josnp(跨域) 所谓的跨域就是进行不用域名内的请求,好比如说我在A域名想访问B域名的内容就是一种跨域的行为. 但是在我们浏览器端会有一个同源策略的设置,这个同源策略只对Ajax请求有 ...
- python 保障系统（一）
python 保障系统 from django.shortcuts import render,redirect,HttpResponse from app01 import models from ...
- Python scrapy框架
Scrapy Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设 ...
- nginx nfs服务
一.nginx服务 1.二进制安装nginx包 [root@bogon ~]# ls /etc/yum.repos.d/ [root@bogon ~]# cd /etc/yum.repos.d/ [r ...
- jacascript DOM节点——节点内容
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! innerHTML 在读模式下,返回与调用元素的所有子节点(包括元素.注释和文本节点)对应的 HTML 标 ...