首页 > 其他 > 详细

h5深度剖析

时间:2019-05-27 23:38:07      阅读:202      评论:0      收藏:0      [点我收藏+]

移动端适配方案

Media Queries

meida queries 主要是通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。核心语法是:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  /*你的css代码*/
}
优点
  • media query可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候
  • 调整屏幕宽度的时候不用刷新页面即可响应式展示
缺点
  • 代码量比较大,维护不方便
  • 为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源
  • 为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式

Flex弹性布局

详见本章节:flex布局

rem

rem布局使我们现在项目开发非常常用的一种布局方式,他通过和流式布局搭配使用,rem布局可以让图标图片文字,在不同的屏幕下显示正常的比例,rem现在使用度很高

rem 属于一个单位,在设置完根元素的像素之后,rem就属于固定的像素单位了

在浏览器当中默认的 1rem = 16px

rem的值

目前有两种,一种是根据js来调整html的字号,另一种则是通过媒体查询来调整字号。

  • js
(function () {
        window.addEventListener('resize',size,false);
        size()
        function size() {
           var winW=document.documentElement.clientWidth||document.body.clientWidth;
            document.documentElement.style.fontSize=winW/750*100+'px'
        }
    })()

winW=750宽度的话,根元素=》100px,
iphone 5 winW=640 根元素=》85.3px

  • css

    我们知道html的默认字号是16px,则对应的设备下可以通过设置对应的font-size使其有一致的缩放比例。

    html {
            font-size: 100px;
        }

        @media only screen and (min-width: 320px) and (max-width: 479px) {
            html {
                font-size: 42.67px !important;
            }
        }

        @media only screen and (min-width: 480px) and (max-width: 639px) {
            html {
                font-size: 64px !important;
            }
        }

        @media only screen and (min-width: 640px) and (max-width: 749px) {
            html {
                font-size: 85.34px !important;
            }
        }

        @media only screen and (min-width: 750px) and (max-width: 959px) {
            html {
                font-size: 100px !important;
            }
        }

移动端事件

  • click:单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟
  • touchstart:手指触摸到屏幕会触发
  • touchmove:当手指在屏幕上移动时,会触发
  • touchend:当手指离开屏幕时,会触发
  • touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件
  • tap: 手指碰一下屏幕会触发
  • longTap: 手指长按屏幕会触发
  • singleTap: 手指碰一下屏幕会触发
  • doubleTap: 手指双击屏幕会触发
  • swipe:手指在屏幕上滑动时会触发
  • swipeLeft:手指在屏幕上向左滑动时会触发
  • swipeRight:手指在屏幕上向右滑动时会触发
  • swipeUp:手指在屏幕上向上滑动时会触发
  • swipeDown:手指在屏幕上向下滑动时会触发

移动端常见问题

  • 一些情况下对非可点击元素(label,span)监听点击事件,不会再IOS下触发,css增加cursor:pointer
  • click300ms延迟响应,使用Fastclick、禁用双击缩放、zepto的tag事件
  • ios设置input按钮样式会被默认样式覆盖,可以将默认样式设置为none
  • ios键盘字母输入,默认首字母大写,input中加入autocapitalize=‘off’
  • 移动端点透问题,尽量都使用touch事件来替换click事件。例如touchend事件(推荐),用fastclick
  • 滑动卡顿,解决:-webkit-overflow-scrolling:touch;
  • 默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能
  • 长时间按住页面出现闪退,element{-webkit-touch-callout:none}
  • iphone及ipad下输入框默认内阴影,element{-webkit-appearance:none}
  • 旋转屏幕时,字体大小调整问题,html,body,from,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:100%}

webApp与响应式的区别

meat标签讲解

<meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • name="viewport" :视口
  • width=device-width :屏幕的宽度=设备的宽度
  • user-scalable=no :是否允许用于缩放
  • initial-scale=1.0 :初始缩放值1:1
  • maximum-scale=1.0 :最大的缩放值1:1
  • minimum-scale=1.0" : 最小的缩放值1:1

h5深度剖析

原文:https://www.cnblogs.com/mengxiangji/p/10934237.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!