第六届360前端星计划_CSS进阶

主讲人

• 赵文博
• 360前端技术专家
• 奇舞团

一、transform 变形

• 对元素进行平移、旋转、缩放、倾斜
  translate
  rotate
  scale
  skew
• transform 不会对其它元素布局产生影响
  transform：translate实现
  旋转：rotate
  缩放：scale
  transform：skewX
  3D变形：近大远小
  

二、transition 过渡

• 指定从一个状态到另一个状态时如何过渡
• 动画的意义：告诉用户发生了什么
• transition 属性
  transition-property
  transition-duration
  transition-timing-function
  transition-delay

三、animation

1. 可以实现更复杂的样式变化效果
2. 使用方法
   定义关键帧样式
   应用动画到元素上
3. animation 属性

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

四、何为响应式设计？

同一个页面可以适应不同屏幕大小设备的设计方案
实现技术：

1. 设置 viewport（视口）：兼容手机

<meta name="viewport"
  content="width=device-width, initial-scale=1.0">

2. 图片尺寸设置：max-width: 100%;
3. 背景图片适配
   background-size: cover（图片完整覆盖容器，会有部分被裁掉）
   background-size: contain（把图片缩放到容器内，能够完整的按比例显示）
4. media query（媒体查询）

1）针对不同的屏幕尺寸，应用不同的样式

@media screen and (min-width: 480px) {
  .box {
    font-size: 16px;
  }
}

2）可以查询的 media

• width / height
• device-width / device-height
• device-pixel-ratio
• orientation

5. 考虑到流量的问题：使用不同尺寸的图片

<img srcset="/img/large.jpg  1200w,
             /img/normal.jpg 800w,
             /img/small.jpg  400w"
     sizes="(max-width: 320px) 400px,
            (max-width: 640px) 800px,
            1200px"
     src="/img/normal.jpg"
     alt="description of the image">

6. 字体大小的适配：rem+Media Queries