美文网首页
移动端布局、事件

移动端布局、事件

作者: 壹枕星河 | 来源:发表于2019-04-30 11:15 被阅读0次

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

相关文章

  • 移动端布局、事件

    Unicode字体图标是HTML,在vue里使用时渲染必须用v-html 图片自适应 移动端一个像素问题: 吸顶效...

  • 移动端

    移动端开发和 PC 端开发有哪些区别 移动端 考虑手机兼容性 使用触屏事件 布局自适应rem 动画处理CSS3 移...

  • web移动端布局之流式布局

    移动端布局之流式布局meta视口标签,写移动端布局必须加入视口标签: 二倍图:在移动端布局中,我们需要一个5050...

  • 移动端事件

    移动端事件 触屏事件 移动端事件要比PC端要简单的多,移动端主要就有ontouchstart ontouchend...

  • 补充8: flex布局

    flex 布局与传统布局 传统布局兼容性好, 但是布局繁琐, 且不适合移动端flex布局更方便, 更适用移动端. ...

  • 移动端css(三)

    目录: 1 移动端特点 2 百分比布局 3 Flex布局 一 移动端特点 • 移动端和PC端网页不同点• 谷歌模拟...

  • 网络编程(七)移动端布局(1)

    pink老师移动端布局还有最后一小部分,坚持下,很快就能把网页端及移动端布局学完了。这篇博客主要讲述的是移动端布局...

  • 东航电商前端技术周刊第二期20180608

    1. 移动端输入框弹起影响布局(包括fixed布局情况) 2. safari中,有些元素点击事件不触发,或者300...

  • 移动端布局

    移动端布局 移动端h5、Android、iOS的各自实现方式不同,布局方式也不同。但,随着移动终端的普及,用户展示...

  • 移动端js事件以及相关库

    移动端js事件 移动端的操作方式和PC端是不同的,移动端主要用手指操作,所以有特殊的touch事件,touch事件...

网友评论

      本文标题:移动端布局、事件

      本文链接:https://www.haomeiwen.com/subject/tthdnqtx.html