移动端响应式布局开发设计

第第页移动端响应式布局开发设计html5的设计目的是为了在移动设备上支持多媒体；

html5容易易学；

html5是下一代html标准；

html,html4.01的上一个版本出生于1999年。自从那以后，web世界已经经受了巨变；

html5仍处于完美之中。然而，大部分现代扫瞄器已经具备了某些html5支持；

html5新特性

用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特别内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search

html5的新增标签>canvas新元素

canvas标签定义图形，比表和其他图像。该标签基于javascript的绘图api

新多媒体元素

audio定义音频内容video定义视频（video或者movie）source定义多媒体资源video和audioembed定义嵌入的内容，比如插件track为诸如video和audio元素之类的媒介规定外部文本轨道。

新表单元素

datalist定义选项列表。请与input元素协作用法该元素，来定义input可能的值。keygen规定用于表单的密钥对生成器字段。output定义不同类型的输出，比如脚本的输出。

新的语义和结构元素

header定义了文档的头部区域footer定义section或document的页脚。nav定义导航链接的部分。section定义文档中的节（section、区段）。article定义页面自立的内容区域。figure规定自立的流内容（图像、图表、照片、代码等等）。figcaption定义figure元素的标题aside定义页面的侧边栏内容。time定义日期或时光。command定义指令按钮，比如单选按钮、复选框或按钮details用于描述文档或文档某个部分的详情dialog定义对话框，比如提醒框summary标签包含details元素的标题mark定义带有记号的文本。meter定义度量衡。仅用于已知最大和最小值的度量。progress定义任何类型的任务的进度。bdi允许您设置一段文本，使其脱离其父元素的文本方向设置。ruby定义ruby注释（中文注音或字符）。rt定义字符（中文注音或字符）的说明或发音。rp在ruby注释中用法，定义不支持ruby元素的扫瞄器所显示的内容。wbr规定在文本中的何处适合添加换行符。

html5扫瞄器支持

最新版本的safari、chrome、firefox以及opera支持某些html5特性。internetexplorer9将支持某些html5特性;

video标签的详解

audio标签的详解

html5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

color从拾色器中挑选一个色彩date类型允许你从一个日期挑选器挑选一个日期datetimedatetime类型允许你挑选一个日期（utc时光）datetime-local类型允许你挑选一个日期和时光（无时区）。email用于应当包含e-mail地址的输入域month类型允许你挑选一个月份number类型用于应当包含数值的输入域range用于应当包含一定范围内数字值的输入域。search类型用于搜寻域tel定义输入电话号码字段time类型允许你挑选一个时光url类型用于应当包含url地址的输入域week类型允许你挑选周和年

placeholder属性的详解

设置对象文字占位符的样式，除了firefox是::[prefix]placeholder，其他扫瞄器都是用法::[prefix]input-placeholder;

placeholder多套兼容写法

datalist标签的详解

datalist:元素规定输入域的选项列表，属性规定form或input域应当拥有自动完胜利能。当用户在自动完成域中开头输入时，扫瞄器应当在该域中显示填写的选项；

移动前端中常说的viewport（视口）就是扫瞄器显示页面内容的屏幕区域;

width:控制viewport的大小，可以指定的一个值，如600，或者特别的值，如device-width为设备的宽度（单位为缩放为100%时的css的像素）。height:和width相对应，指定高度。initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。maximum-scale：允许用户缩放到的最大比例。minimum-scale：允许用户缩放到的最小比例。user-scalable：用户是否可以手动缩放

项目常用设计稿尺寸一：640*1136（iphone5）

项目常用设计稿尺寸二：750*1334（iphone6）

项目常用设计稿尺寸三：1242*2208（iphone6plus）

物理辨别率和显示辨别率>iphone5：辨别率320*568，物理像素640*1136，dpr:2.0

iphone6：辨别率375*667，物理像素750*1334，dpr:2.0

iphone6p：辨别率414*736，物理像素1242*2208，dpr:3.0

dpr（devicepixelratio）：设备像素比，设备像素/设备自立像素，代表设备自立像素到设备像素的转换关系，在js中可以通过window.devicepixelratio猎取；

计算公式：规律辨别率=物理辨别率/devicepixelratio

响应式布局，responsivedesig