喜迎
春节

CSS-移动端布局、事件


前言:最近在用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%;
    }
}

关于flex布局的图例


文章作者: NekoDeng
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 NekoDeng !
评 论
 上一篇
Git踩坑-git报错bad signature和index file corrupt和error:spawn failed的处理方法
Git踩坑-git报错bad signature和index file corrupt和error:spawn failed的处理方法
前言: 今天在部署写好的博客文章时,出现了git报错bad signature和index file corrupt和error:spawn failed,网上找了一堆解决办法,都没行,最后利用了巧妙地方法解决了。 问题描述git报错ba
2020-09-28
下一篇 
关于给hexo文章分类页面按钮仿书本样式美化
关于给hexo文章分类页面按钮仿书本样式美化
前言:最近成迷于美化hexo博客样式,发现了这个超好看的样式,美化了一下,基于matery主题设置的,其他主题原理也一样可参考。 废话不多说,先上图:源网页:hexo文章分类页面按钮仿书本样式美化 特点: 都是div+css美化效果,所
2020-09-24
  目录