HTML5学习笔记 —— 移动端开发要点
2017-05-11 12:26
295 查看
一、调试方式
1.模拟器调试(谷歌控制台)2.真机调试
a.本地服务器启动,通过localhost进行访问 b.设置需调试的手机分辨率
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> <meta name="viewport" content="width=320px">
c.真机调试 1)电脑的本地服务器启动,且切换为在线模式 2)测试用手机和电脑处于同一个局域网 3)通过IP进行访问(运行-cmd-ipconfig)
二、书写代码注意点
1.按照正常PC端书写(如设计图给出的是960px宽度,36px基准字体,则按照正常px进行编写)2.相应的px转换为百分比(横向)/rem(纵向)
24/640转换为2400/640 ctrl+shift+Y + %,因系统会自动对24/640进行四舍五入保留小数点后2位,直接计算的数字不精确
3.图像以及特殊字体的处理
4.嵌套规则与SEO的细节调整
a标签可以套块元素 img的title(提示性文本,用于SEO)属性删掉,因为移动端没有hover状态
5.fixed用法
利用position: fixed固定头部和底部内容
三、CSS3提供的新单位
rem 针对html(根元素)的字体大小进行比例计算 rem * rem —— 部分设备不支持,横向rem解读有无 建议使用:横向百分比、纵向rem 盒模型:主要影响line-height、font-size ch 字符0(零)的宽度 vw viewport width 1vw = 视窗宽度的1% vh viewport height 1vh = 视窗宽度的1% vmin vw和vh中较小的那个
四、移动端设计流程
1.拿到设计图a.设计师提供图纸为最大分辨率(一般为960px、1080px、640px),需要向下兼容小分辨率 b.确定页面中的字体大小是否符合规范 1)字体是否偶数、整数 2)最小字体 —— 320px屏幕宽度下 >= 12px,1080px屏幕宽度下 >= 42px(字体大小为1080*(12/320)=40.5,取偶数、整数并向上取整)
2.重置视口 —— viewport
<meta name="viewport" content="属性值"> width 设置布局视口的宽度 height 设置布局视口的高度 initial-scale 设定页面初始缩放比例(0~10.0,1表示百分百——原始状态) minimum-scale 设定最小缩小比例(0~10.0) maximum-scale 设定最大放大比例(0~10.0) user-scalable 设定用户是否可以缩放(yes/no) 举例: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> initial-scale=1一般可省略 a.让视窗大小和设备宽度保持一致 b.尽可能对用户的一些操作进行限制(放大、缩小页面)
3.根据设备宽度改变根元素的字体大小
html元素的font-size大小→JS文件辅助 辅助原理: 检测到当前的屏幕宽度 设计图的屏幕宽度 ---------------- = ----------------- 要计算出的字体大小 设计图最小字体大小 a.JS文件的引入 —— 放在head里(zepto在common之前) <script type="text/javascript" src="js/flexible.js"></script> b.JS文件的修改 修改flexible.js的屏幕宽度和相应字体大小
五、移动端视口处理
1.视口处理原理通过viewport把自己冒充成更宽的屏幕,大多数移动浏览器默认把布局视口的宽度设为:980px(IE10默认设定为1024px)。 然后,尽可能放大视口,(布局视口宽度保持不变)以便在屏幕中显示完整的网站。
2.常见视口宽度
a.iPhone —— 980 b.iPad —— 1024 c.Android —— 980 d.WinPhone —— 1024
3.设置需调试的手机分辨率
<meta name="viewport" content="width=320px">
<meta name="viewport" content="属性值"> width 设置布局视口的宽度 height 设置布局视口的高度 initial-scale 设定页面初始缩放比例(0~10.0,1表示百分百——原始状态) minimum-scale 设定最小缩小比例(0~10.0) maximum-scale 设定最大放大比例(0~10.0) user-scalable 设定用户是否可以缩放(yes/no) 举例: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> initial-scale=1一般可省略 a.让视窗大小和设备宽度保持一致 b.尽可能对用户的一些操作进行限制(放大、缩小页面)
六、自身样式处理——盒模型
1.处理原则
横向百分比、纵向rem
2.横向处理
根据父级宽度计算百分比
3.纵向处理
rem 针对html(根元素)的字体大小进行比例计算
4.横向为何不用rem?
rem * rem —— 部分设备不支持,横向rem解读有无
5.纵向为何不用%?
纵向使用百分比时,根据父级宽度进行计算。 即针对最近的块祖级元素的文字显示方向而定。 如果文字显示方向是水平方向,即margin和padding(横纵)根据宽度计算;如果文字显示方向是垂直方向,则margin和padding(横纵)根据高度计算。 目前文字垂直方向显示只有IE支持。 如下代码为等价:
.box { width: 400px; height: 100px; } .con { width: 50%; height: 20%; padding: 20%; } .con { width: 200px; height: 20px; padding: 80px; }
七、文本样式处理
line-height:针对元素自身字体尺寸进行计算,如果当前元素字体大小为16,则line-height:100% == line-height: 16px; em、rem 相对度量单位 em 针对父级元素的字体大小进行比例计算
八、图像的特殊处理
background-size: 用于定义背景图尺寸大小 属性取值范围: a.固定/绝对度量单位 —— 如px b.相对度量单位 —— 如百分比% rem c.auto(自动) —— cover contain 1)cover:覆盖全部容器,此时背景图有可能无法完全显示 2)contain:覆盖容器,但当宽或高任意一个达到最大值则停止拉伸,容器有可能产生空白区域 background-size: 100% 100%; (水平方向 垂直方向) background-size: contain; background-size: cover;
九、字体的特殊处理
字体自定义:@font-face { font-family: 'newfont'; src: local ('STXINWEI'), url(font/STXINWEI.TTF) format('truetype'), url(STXINWEI.oft) format('truetype'); /*可定义多个字体,浏览器按顺序下载,若第一个字体可用,则不会下载第二个,若不可用,则依次向下下载*/ } .con div { font-family: 'newfont'; /*调用字体*/ }
a.@font-face用于定义一个“用户/自定义字体”需要有字体名字(font-family),以及字体的路径属性(src) b.local用于定义用户本地的字体名称,当用户本地已经存在同样的字体时,则不再下载(可以节省网上下载的流量和成本) c.url属性,用于书写自定义字体的路径(在服务器端),如果浏览器在本地当中没有找到字体,会将url中设置的字体加载到页面当中。 d.format 用于提示该资源url所引用的字体格式 e.truetype .ttf f.opentype .ttf .oft
十、嵌套规则细节调整
a标签可以套块元素 —— 节省代码、方便用户点击没有hover的状态 a标签,点击区域的灰色阴影需要去掉,如下
a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
十一、SEO的细节调整
img的title(提示性文本,用于SEO)属性删掉,因为移动端没有hover状态
十二、响应式布局
Responsive Web Design 将已有的开发技巧(弹性-使用百分比的布局、弹性图片-background-size、媒体、媒体查询)整合起来,命名为响应时网页设计。 是一种针对任意设备,均能够“完美”布局的一种现实机制。 简言之,一个网站能够兼容多个终端,而不是为每个终端制作一个特定版本。 1.响应式布局流程 a.进行视口控制 b.利用CSS3媒体查询(CSS3 Media Query)告知浏览器如何为指定的视图宽度渲染页面。(为不同宽度制定不同的CSS,实现不同的布局) c.对于临界值/断点(媒体查询的取值)之间,采用百分比、em、rem等相对度量单位实现过渡。 1)断点: 样式发生瞬间变化的px值大小(@media中的值)通常采用的断点,是各个设备的横屏、纵屏最大值 320 480 640 768 1024 1280 1366 1600 1920 2)通常对于多个分辨率书写时,遵循渐进增强的原则,即从移动端开始。 先书写基准样式(通常样式),再书写移动端样式,最后书写桌端样式(屏幕分辨率由小到大) 优雅降级 渐进增强(百度查资料)—主要和设备兼容挂钩
2.媒体查询 两种书写方法:
a.style标签内书写
<style> @media 媒体 and/or (属性:属性值) and/or (属性:属性值) { } @media all and (min-width: 300px) { } </style>
b.外部引入,有条件的加载样式表
<head> <link rel="stylesheet" href="XXX.ccc" media="设备 条件 (属性:属性值)"> <link rel="stylesheet" href="XXX.css" media="screen and (max-width: 640px)"> </head>
c.常见媒体特性/属性: width/min-width/max-width 布局视口的宽度 height/min-height/max-height 布局视口的高度 device-width device-height 设备屏幕的宽度/高度 orientation 设备方向 aspect-radio/min-aspect-radio/max-aspect-radio 视口宽度比 device-aspect-radio 屏幕的宽高比 例子如下:
<style> .wrap {background: #000} @media screen and (min-device-aspect-radio: 9 / 16) { .wrap { background: #39f; } } </style>
跨平台 - 跨系统 - 跨分辨率 跨系统 Native App、WEB APP、 Hybird APP 跨分辨率 - 响应式布局(网页)
十三、移动端框架详解
1.click事件延迟a.移动端上设备中使用click事件和在PC端有所不同,大多数基于触摸的浏览器设备,在点击的时候会有300ms的事件触发等待时间。 原因在于点击后面还有个双击缩放的操作,这个涉及到触摸设备的手势交互行为原生设计。 设备需要通过事件判断是单机还是双击操作。
2.hover效果
移动端hover效果也会失效
3.touch触摸事件
a.touchstart 当手指触摸屏幕时触发 b.touchmove 当手指在屏幕上滑动时连续触发 c.touchend 当手指从屏幕移开时触发
4.触摸属性
a.touches 当前位于屏幕上的所有手指列表 b.targetTouches 位于当前DOM元素上的手指列表 c.changedTouches 涉及当前事件手指的列表
5.常用触控信息
a.identifier 唯一标识触摸回话,是一个整数(绘图应用等会涉及到) b.target 事件目标对象 c.clientX/clientY/pageX/pageY/screenX/screenY clientX/clientY:触摸点相对于浏览器视口左上角的位置 pageX/pageY:触摸点相对于页面左上角的位置 screenX/screenY:触摸点相对于屏幕左上角的位置 总结:page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准
6.zepto
a.专为mobile webkit浏览器开发的JavaScript框架,但同时兼容FF、Opera,不兼容所有的IE; b.zepto与jQuery的关系 1)语法:Zepto语法大部分与jQuery一样 2)性能:Zepto在移动端中性能比较优越 3)应用:京东、当当网、小米官网等都使用了Zepto c.Zepto下载 1)官网下载的Zepto默认包含zepto、event、ajax、form、ie,其他模块需要自己引入 2)github下载的zepto没有默认包含、根据需求自己引入 d.选择器支持 1)支持基本选择器 2)支持伪类选择器:需要映入selector.js
相关文章推荐
- 【整理】HTML5游戏开发学习笔记(1)- 骰子游戏
- 前端开发学习笔记二--HTML5
- HTML5与移动端web学习笔记
- 高级H5游戏开发(Advanced game design with html5 and javascript )读书学习笔记(1)--es6相关
- 【整理】HTML5游戏开发学习笔记(2)- 弹跳球
- HTML5与移动端web学习笔记
- 移动端跨平台开发框架 Cordova 学习笔记(一) 环境搭建及创建第一个 Cordova Android APP
- 【江哥带你从“零”玩转Html5 + 跨平台开发】学习笔记
- WeX5开发HTML5应用学习笔记:WeX5 404
- 【整理】HTML5游戏开发学习笔记(4)- 记忆力游戏
- APPCAN学习笔记003---原生开发与HTML5技术
- HTML5与移动端web学习笔记
- angular2 学习笔记 の 移动端开发 ( 手势 )
- 【Cocos2d-html5游戏引擎学习笔记(1)】游戏引擎初探究和搭建开发环境
- 【整理】HTML5游戏开发学习笔记(5)- 猜谜游戏
- HTML5开发Web移动端APP技巧笔记——入门篇
- HTML5与移动端学习笔记
- HTML5与移动端web学习笔记
- html5 移动端获取触摸点位置学习笔记
- HTML5与移动端web学习笔记