层叠上下文 ｜ 青训营笔记

用户2943705757404
67 阅读4分钟

层叠上下文

层叠上下文是对HTML元素的三维构想，将元素沿着垂真屏幕的虚构的Z轴排开

形成新的层叠上下文的条件（任一即可）：

  • position :relative或absolute;并且z-index不是auto
  • position :fixed sticky
  • flex或grid的子元素；并且z-index不是auto
  • opacity的值小于1
  • transform的值不为none
  • will-change的值不为通用值
  • ........详见规范*

编写z-index的建议

1.使用css变量或者预处理语言的变量，管理z-index的值 2.将预设间隔设置10或100，方便后续的插入

变形、过度、动画

transform 3D

3D相关属性： transform:translate3d、rotate3d、 scales3d、matrix3d等 transform-origin:right top、50px30px等 表示变形时依据的原点 transform-style:flat或preserve-3d看子元素的3d表现 perspective:观看点距离z=O这个平面的距离， 可以在transform中用perspective（）使用作用为当前元素， 也可以直接使用，给后代元素一个统一值 perspective-origin:观看者的位置，如top、bottom等 backface-visibility:元素正面只有朝向观察者的时候可见

transition 过渡

通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态

div{
    transition:<property><duration><timing-function><delay>;
}

animation动画

  • @keyframes关键帧用来定义动画过程中出现的关键样式
  • *animation-相关属性用来为元素添加动画 animation-name:定义好的关键帧的名字 animation-duration:动画时长 animation-timing-function:动画节奏 animation-delay:延时开始的时间 animation-iteration-count:执行次数 animation-direction:是否反向或交替 animation-fill-mode:动画执行前后的样式采用 animation-play-state:动画运行状态
@keyframes fadeInDown{
	from{
		opacity:0;
		transform:translate3d(0,-100%,0);
	}
    
    to{
		opacity:1;
		transform:translate3d(0,0,0);
	}
}

.fadeInDown {
	animation-name:fadeInDown;
	animation-duration:1s;
	animation-fill-mode:both;
}
  • 如何写动画性能更好？ 1.尽量不用触发reflow的属性 2.在遇到性能问题时可以触发硬件加速，比如设置wil-change属性、设置transform3d等 3.尽量使用transform和opacity去写动画

响应式设计

原则

  • 优先选用流式布局，如百分比、flex、grid等
  • 使用响应式图片，匹配尺寸，节省带宽
  • 使用媒体查询为不同的设备类型做适配
  • 给移动端设备设置简单、统一的视口
  • 使用相对长度，em、rem、w做为长度度量

媒体查询

媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型(如screen、pit)以及媒体特性（如视口宽度、屏幕比例、 设备方向：横向或纵向）做为约束条件。

使用媒体查询的一些Tips 1.媒体查询同样遵循cascading层叠覆盖原则，min-和max-选择一个 2.由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择 3.由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

设备像素、参考像素和移动设备视口

  • 设备像素

设备像素（物理像素）：显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像。设备像素和设备相关，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。

dpi：每英寸多少点

ppi：每英寸多小像素数

  • css像素

CSS像素（reference pixel)其实是一个视角单位。规范给出的定义是，1css像素是从一臂之遥看解析度为96DPI(即1英寸96点)的设备输出时，1点(即1/96英寸)的视角。 通常认为常人臂长为28英寸，那么视线与水平线的夹角是： (1/96)in/(28in2P1/360deg)=0.0213度

  • DPR设备像素比

移动端的viewport

布局视口(viewport)是页面中html元素（根元素）的包含块，默认情况下，window.document..documentElement.clientWidth就是viewport的宽度。 在移动设备中，默认的布局视口由于历史兼容pc屏幕的原因，并不符合需求，我们经常需要用标签对viewport进行设定，来完成移动端设备的适配。

avatar
文章
阅读
粉丝