前言:最近在用css时遇到了一些棘手的问题,所以总结一下。
关于Unicode字体图标
首先需要明确的是,Unicode字体图标是HTML,在vue里使用时渲染必须用v-html。
关于图片自适应
关于移动端一个像素问题
关于吸顶效果
position:sticky;
top:0;
关于移动端事件
- 移动端的onclick点击事件有300ms的延迟
移动端有ontouchstart事件,会比onclick先执行,如果在ontouchstart事件后触发了ontouchmove事件,那么onclick将不会执行(要注意这个细节)
- padding-top是按照父级宽度来计算的
- rem根据根元素计算,与px转换比例基于根元素
- em 根据父元素计算,与px转换比例基于父元素
关于使用swiper轮播图布局写法
.swiper-container {
width: 100%;
height: 0;
padding-top: percentage( 400 / 1080 );
.swiper-wrapper {
position: absolute;
left: 0;
top: 0
}
img {
max-width: 100%;
}
}