移动端适配方案
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 () {
- Windows.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
来源: http://www.bubuko.com/infodetail-3074099.html