移动端布局、事件

Unicode字体图标是HTML，在vue里使用时渲染必须用v-html

图片自适应

image.png

移动端一个像素问题:

image.png

吸顶效果

position:sticky
top:0

移动端事件

移动端的onclick点击事件有300ms的延迟，移动端有ontouchstart事件，会比onclick先执行，如果在ontouchstart事件后触发了ontouchmove事件，那么onclick不会执行

• padding-top是按照父级宽度来计算的
• rem根据根元素计算，与px转换比例基于根元素
• em 根据父元素计算，与px转换比例基于父元素

轮播图布局写法：

.swiper-container {
    width: 100%;
    height: 0;
    padding-top: percentage( 400 / 1080 );

    .swiper-wrapper {
      position: absolute;
      left: 0;
      top: 0
    }

    img {
      max-width: 100%;
    }
}

flex 3000018316-5d3ac28ee4c0e.jpg