问题讨论：

要求：

...

上面.coupon-container背景色的部分最小高度是当前窗口高度
实现方案？
1. 常用CSS计量单位
2. CSS方法
3. 我对CSS的感受
  常用CSS计量单位

px，pt，em，rem，%

计量单位

名称

备注

相对，像素

相对类型，px是一个点，它不是自然界的长度单位，是屏幕上显示数据的最基本的点。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。

相对，点

绝对类型，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。（每英寸的范围内，所能印刷的网点数。 windows默认设置，文字为96DPI，1px=1/96英寸。 pixel（dot）per inch，每英寸的像素（点）数，是一个率，表示了“清晰度”，“精度”）

相对值

相对类型，相对父元素的大小，最终父元素为 font-size

rem

相对值

相对类型，相对root element的font-size，也就是支持IE9及以上

percent

相对值

相对类型，相对于父元素宽的大小。最外层的元素父元素是body

除此之外，还有

‘vw’ ‘vh’ ‘vmin’ ‘vmax’ ‘ex’ ‘mm’ ‘cm’ ‘in’ ‘pc’ ‘deg’ ‘grad’ ‘rad’ ‘ms’ ‘s’ ‘Hz’ ‘kHz’

viewport width

1vw = 1% of viewport width

viewport height

1vh = 1% of viewport height

vmin/vmax

min/max of viewport width and height

vw和vh中较小/大的值

字符0的宽度

小写字符x的高度

绝对长度说明

英寸Inches (1 英寸 = 2.54 厘米)

厘米Centimeters

毫米Millimeters

点Points (1点 = 1/72英寸)

皮卡Picas (1 皮卡 = 12 点)

1ch/1ex

几个CSS方法：

calc()、toggle()、counter()、min()、 max()

计算 calc() => CSS方法

允许 + - * / 。其中+ - 必须有空格，* / 建议有。

允许length、frequency、angle、time、number、integer

但是注意，box-sizing与calc是互斥的。(尝试了一下貌似没问题）

需要增加前缀

-moz-calc
-webkit-calc
calc
兼容性

题外话：PC版进行SEO的时候的考虑，前缀会在衡量之内。

toggle() => css方法（cycle() => css方法）

em { font-style: toggle(italic, normal); }
ul { list-style-type: disc; }
     ul ul { list-style-type: toggle(disc, circle, square, box); }

counter() => 计数器，

     counter(<identifier>, <style(同list-style-type)>)

必须使用的属性： counter-reset：重置属性，并定义计数参数 counter-reset: section 0 heading 0; counter-increment：值为计数参数，配合content counter-increment:[ ?]+ | none | inherit counter-increment:section 2; counter-increment:heading; content:配合使用 content:counter(section);

counters() => 重复插入计算器

@counter-style(仅firefox支持，忽略）

min() => 比较并取出最小的那个

max() => 比较并取出最大的那个

attr(attr-name) =>取出属性

css2.1可返回一个字符串，css3中可返回多种不同类型（例如CSS colors, CSS integer, length, angle, time, frequency）

兼容性：

问题：

 css calc()方法是否会引起页面重排或重绘？

我对css、手机端开发的一点建议

推荐在移动端内使用最新的css方法移动端js运行效率较低，css动画流畅 css可调用GPU进行处理，提高页面的流畅度，减少丢帧，尽量减少页面重绘重排次数。

JS：requestAnimationFrame() -> setTimeout(polyfill)
注意微信浏览器：www.html5test.com http://fe.2b6.me:3000/doc/info?id=9563ebcd-eae3-a09e-5d83-8cbdc9efb6e4
尽量使用CSS来实现交互效果，减少JS的执行率 CSS、HTML、JavaScript的相互关系。 Html是内容，css是表现（皮肤，动画），JavaScript是交互什么样的行为属于交互，什么样的行为属于动画
尽量减少移动端类库（require即可，使用原生template） zepto、underscore、arttemplate。

一个方案： .coupon-container { padding: 1.5rem 1.5rem 5.8rem; background: #dff3cf url(http://fed.static.qyer.com/project/m/lm/coupon/images/bg.jpg) center bottom no-repeat; background-size: 100% auto; min-height:calc(100vh - 44px); }

问题：

 什么场景下使用vh、vm、vmin、vmax会有飞一样的感觉？

barbabravo / blog

css内容分享 #8