HTML5学习笔记 —— 移动端开发要点

一、调试方式

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-sizech      字符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 —— 980b.iPad —— 1024c.Android —— 980d.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      .ttff.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)应用：京东、当当网、小米官网等都使用了Zeptoc.Zepto下载    1)官网下载的Zepto默认包含zepto、event、ajax、form、ie，其他模块需要自己引入    2)github下载的zepto没有默认包含、根据需求自己引入d.选择器支持    1)支持基本选择器    2)支持伪类选择器：需要映入selector.js