解释:
见本文,在可能的情况下应选择这样四种变换:
CSS Code复制内容到剪贴板
transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0..1;
典型的,可以使用 translate 来代替 left 作为动画属性。
示例:
CSS Code复制内容到剪贴板
/* good */
.box {
transition: transform 1s;
}
.box:hover {
transform: translate(20px); /* move right for 20px */
}
/* bad */
.box {
left: 0;
transition: left 1s;
}
.box:hover {
left: 20px; /* move right for 20px */
}
6 响应式
[强制] Media Query 如果有多个逗号分隔的条件时,应将每个条件放在单独一行中。
示例:
CSS Code复制内容到剪贴板
@media
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min–moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) { /* dppx fallback */
/* Retina-specific stuff here */
}
7.CSS注释
普通注释
CSS Code复制内容到剪贴板
/* 普通注释 */
区块注释
CSS Code复制内容到剪贴板
/**
* 模块:m-detail
* author: xxx
* edit: 2016.5.02
*/
8.CSS命名规范
8.1命名组成
命名必须由单词,中划线组成。例如:.info,.news-list
不推荐使用拼音来作为样式名,尤其是缩写的拼音、拼音与英文的混合
所有命名都使用小写,使用中划线 “-” 作为连接字符,而不是下划线 “_“
8.2命名前缀










