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

整理的一些关于h5新特性和移动端的一些知识点

1.HTML5新增结构标签及兼容性处理

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定；

HTML5的设计目的是为了在移动设备上支持多媒体；

HTML5 简单易学；

HTML5 是下一代 HTML 标准；

HTML , HTML 4.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和 audio

embed定义嵌入的内容，比如插件

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 规定在文本中的何处适合添加换行符。

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性;

/*载入后，初始化新标签的CSS*/

article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

2.video与audio详解

您的浏览器不支持Video标签。

您的浏览器不支持 audio 元素。

3.HTML5表单详解

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

color 从拾色器中选择一个颜色

date 类型允许你从一个日期选择器选择一个日期

datetime datetime 类型允许你选择一个日期（UTC 时间）

datetime-local 类型允许你选择一个日期和时间 (无时区).

email 用于应该包含 e-mail 地址的输入域

month 类型允许你选择一个月份

number 类型用于应该包含数值的输入域

range 用于应该包含一定范围内数字值的输入域。

search 类型用于搜索域

tel 定义输入电话号码字段

time 类型允许你选择一个时间

url 类型用于应该包含 URL 地址的输入域

week 类型允许你选择周和年

设置对象文字占位符的样式, 除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder;

input::-webkit-input-placeholder {

color: #999;

}

input:-ms-input-placeholder { // IE10+

color: #999;

}

input:-moz-placeholder { // Firefox4-18

color: #999;

}

input::-moz-placeholder { // Firefox19+

color: #999;

}

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

4.视口viewport深入理解

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

width: 控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height: 和width相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放

// 快捷键生成：meta:vp tab

5.移动端页面设计规范及页面分析

移动端页面设计稿

项目常用设计稿尺寸一: 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

6.移动端设备像素比理解

像素比window.devicePixelRatio

dpr（device pixel ratio）：设备像素比，设备像素/设备独立像素，代表设备独立像素到设备像素的转换关系，在JS中可以通过 window.devicePixelRatio 获取；

计算公式：逻辑分辨率 = 物理分辨率 / devicePixelRatio

7.响应式网站设计的概念及实践原则

响应式布局，Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式设计的步骤

设置 meta标签，让浏览器窗口和设备宽度保持一致；

通过媒介查询来设置样式 Media Queries；

8.媒体查询@media使用

语法: @media 媒体类型 逻辑操作符 (媒体属性) ｛样式代码｝

逻辑操作符

and： 操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真； @media all and （min-width:700px）and （orientation: lanscape）{...}

not：操作符用来对一条媒体查询的结果进行取反;

@media not all  and （monochrome){...}  <=> @media not (all  and (monochrome)){...}

only：操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用；  media = "only screen and（max-width：1000px)" {...}

媒体属性

width | min-width | max-width

height | min-height | max-height

device-width | min-device-width | max-device-width

device-height | min-device-height | max-device-height

aspect-ratio | min-aspect-ratio | max-aspect-ratio

device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio

color | min-color | max-color

color-index | min-color-index | max-color-index

monochrome | min-monochrome | max-monochrome

resolution | min-resolution | max-resolution

scan | grid

// @media (orientation: portrait) { 竖屏 }

// @media (orientation: landscape) { 横屏 }

9.rem及百分比布局及移动适配

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数;

根元素html默认的font-size为16px;

为了方便计算，我们一般给父元素的font-size设置为100px;

// 针对750的设计稿

9.弹性盒模型Flexbox布局

display：-webkit-box；

display:  -webkit-flex;

display:  -ms-flexbox;

display:  flex;

HTML5 HTML

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。