响应式web设计（ 二 ）

作者 johansen 日期 2017-02-20
技术小记
响应式web设计（ 二 ）

今天继续上次关于H5,css3响应式布局的探讨。这次主要介绍关于css3相关的技术实战。由于这周通宵达旦赶项目，博客就记录了每天地铁看Kindle的笔记。

css3新特性

  1. css响应式多列布局

方法：使用CSS多列布局可以通过几种方式让文本分成多列显示。可以给每一列设定固定的列宽，也可以指定内容需要填充的列数。

1
2
3
4
5
6
7
8
9
main{
    column-width:12em;
    column-gap:2em;
    column-rule:thin dotted #999;
}
/*设定列数为4*/
main{
    column-count:4;
}

  1. 断字 将很长的文本放在一个有限宽度的容器里

    1
    2
    3
    4
    p{
        width:100px;
        word-wrap:break-word;
    }

  2. 增加省略号

    1
    2
    3
    4
    5
    6
    .ellipsis{
        width:252px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:no-wrap;
    }

  3. 创建水平滚动面板

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .Scroll_Wrapper {
      width: 100%;
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
       -webkit-overflow-scrolling: touch;
        /* 在支持的IE中删除滚动条 */
        -ms-overflow-style: none;
    }
    /* 防止WebKit浏览器中出现滚动条 */ 
    .Scroll_Wrapper::-webkit-scrollbar {
        display: none;
    }
    .Item {
      display: inline-flex;
    }

  4. 特性查询
    语法举例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @supports (display: flex) {
       .Item {
         display: inline-flex;
       }
     }
     @supports not (display: flex) {
       .Item {
         display: inline-block;
       }
     }

6.理解alpha通道
CSS3也支持设置元素的opacity属性，取值范围也是0到1(.1表示10%)。 与RGBA和HSLA不同，对元素设置opacity影响整个元素，而RGBA和HSLA 则只影响元素特定的方面，比如背景。这样就可以实现元素中不透明的文字和 透明的背景。

7.关于css透视效果，我们使用perspective属性来实现。这个属性设置了用户视点到3D场景的距离。创建3D效果的关键点是transform- styles:preserve-3d。这告诉浏览器，当我们要为这个元素创造变形效果时，它的子元素 也保持3D效果。
8.使用transform-origin，我们可以修改变形原点。

1
2
3
4
5
6
7
8
9
10
11
12
.panel {
	display: flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	top: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	backface-visibility: hidden;
	transform-origin: left center;
}

9.animation-play-state这个属性可以设置为running|paused。通过这个属性运行或暂停动画。
10.animation-fill-mode : none | forwards | backwards | both;

值 描述
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。

11.为占位符文本添加样式，你可以使用:placeholder-shown伪类选择器来为placeholder属性添加样式。要知道这 个选择器经过多次迭代，所以你要确保你拥有前缀添加工具来兼容各种版本。

1
2
3
input:placeholder-shown {
      color: #333;
}

FEATURED TAGS
技术小记