移动端适配方案
Media Queries
meida queries
主要是通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。核心语法是:
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ /*你的css代码*/ }
优点
缺点
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。