开发过程中常见 css 问题汇总

vw + rem + 媒体查询 自适应下高倍屏的兼容

h5 中使用 vw + rem + 媒体查询 实现自适应。设计稿以 iphone 375px 为基准 一般配置

 html {
    font-size: 100px
}
@media screen and (min-width:375px){
    html {
        font-size: 100vw / 375 * 100
    }
}

针对尺寸手机进行 html 根节点 font-size 的动态设置实现自适应 但是以上只适用于1倍屏与2倍屏，针对目前市面上出现的高倍屏幕，自适应失效 针对以上问题进行特殊处理

@media only screen and (-webkit-device-pixel-ratio: 3) {
    html {
        font-size: 100vw / 375 * 100 / 0.75
    }
}

flex justify-content: space-between; 最后一行向做排列

1、根据结点个数，当此行个数不足时，动态补足空元素占位 2、使用伪类模拟, 父元素不使用 justify-content: space-between; 子元素配置 假设每行子元素个数为 7

 &:not(:nth-child(7n)){
    margin-right: calc((100% - 宽度 * 7) / 6);
}

ios 输入框被软键盘遮挡的问题

js 处理document.body.scrollTop = document.body.scrollHeight;

background-attachment: fixed; ios 兼容解决, 使用伪类

body:before {
  content: ' ';
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(path/to/image) center 0 no-repeat;
  background-size: cover;
}