响应式问题

2024/11/19

响应式布局方案

1.尽量不定宽，使用 flex 布局

2.媒体查询

3.使用 vw/vh,min-width 和 max-width 这样的参数

媒体查询可以采用 sass 封装函数

主题方案也可以封装函数

.header{
  width:100%;
  @inclue reposeTo('phone'){
    height:100px;
  }
  @inclue reposeTo('pad'){
    height:200px;
  }
}

@mixin reposeTo($name){
  if($name === 'phone){
    @media(min-with:320px) and (max-width:400px){
      @content
    }
  }
}

移动端布局

1.后面单位都使用 rem，本质就是等比缩放

html.style.fontSize = 100 * (clientWidth（屏幕宽度） / designWidth（设计稿宽度）) + 'px';

2.使用 transform

transform: scale(0.5);

过渡

transition: left 2s linear 0s;

动画

@keyframes moveTest {
  //百分比是指整个动画耗时的百分比  10s
  from{
    transform: translate(0,0) rotate(45deg);
  }
  50%{
    transform: translate(0,500px);
  }
  to{
    transform: translate(500px,600px);
  }
}
animation: 动画名称 持续时间 运行的速度变化 延迟时间 播放次数(默认一次) 播放方向

LOADING

响应式问题