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各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
随机推荐
- Python内置函数(25)——frozenset
英文文档: class frozenset([iterable]) Return a new frozenset object, optionally with elements taken from ...
- bugfree，CDbConnection 无法开启数据库连线: SQLSTATE[HY000] [2003] Can't connect to MySQL server on '192.168.0.99' (4)
安装bugfree后,访问报错:CDbConnection 无法开启数据库连线: SQLSTATE[HY000] [2003] Can't connect to MySQL server on '19 ...
- 查看eclipse ADT SDK JDK版本号
一.查看eclipsea版本号: 启动eclipse,Help > About Eclipse SDK,在eclipse SDK对话框下面就有Eclipse SDK Version:4.2.0这 ...
- Python之递归函数
递归函数 初识递归函数 递归函数的定义:在一个函数里再调用这个函数本身 Python为了考虑保护内存占用情况,有一个递归深度的限制. 探究递归的默认最大深度: def foo(n): print(n) ...
- java Servlet文件拷贝的模板代码
//通过response对象获得一个输出流对象 ServletOutputStream os = response.getOutputStream(); //获得要拷贝文件的绝对路径 String r ...
- windows server 2016远程桌面进去，英文系统修改语言
由于我这边已经是改好了,以下截图来自中文版. 这边选了中文,然后点options. 选择:使该语言成为主要语言,保存. 会提示需要退出登录. 过一会重新登录,ok.
- type="file"实现兼容IE8本地选择图片预览
一.HTML代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Uploa ...
- linux远程传输
scp scp 命令是 SSH中最方便有用的命令了,scp就是secure copy,是用来进行远程文件拷贝的.数据传输使用 ssh,并且和ssh 使用相同的认证方式,提供相同的安全保证. 与rcp ...
- 使用hue查看hdfs系统报无法访问：/user/hadoop。 Note: you are a Hue admin but not a HDFS superuser, "hdfs" or part of HDFS supergroup, "supergroup".
出现这个问题,是因为默认的超级用户是hdfs ,我的是hadoop用户登录的, 也就是说首次登录hadoop这个用户是我的超级用户 此时只需要将hue.ini配置改为 然后重启即可.
- 复习HTML+CSS（6）
n 表格和表单的嵌套顺序 n 单行文本域 语法格式:<input type="text" 属性="值"> 常用属性 l Name:文本框的名字 ...