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

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

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

HTML5

• HTML5的兼容性检测： http://caniuse.com/
• 在线检测编写的代码是否符合标准 ： http://validator.w3.org/
• 推荐书籍：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 规定在文本中的何处适合添加换行符。

HTML5浏览器支持

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

<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
/*载入后，初始化新标签的CSS*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

2.video与audio详解

video标签的详解

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

audio标签的详解

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

3.HTML5表单详解

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

• color 从拾色器中选择一个颜色
• date 类型允许你从一个日期选择器选择一个日期
• datetime datetime 类型允许你选择一个日期（UTC 时间）
• datetime-local 类型允许你选择一个日期和时间 (无时区).
• email 用于应该包含 e-mail 地址的输入域
• month 类型允许你选择一个月份
• number 类型用于应该包含数值的输入域
• range 用于应该包含一定范围内数字值的输入域。
• search 类型用于搜索域
• tel 定义输入电话号码字段
• time 类型允许你选择一个时间
• url 类型用于应该包含 URL 地址的输入域
• week 类型允许你选择周和年

placeholder属性的详解

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

placeholder多套兼容写法

<input type="text" 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标签的详解

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

<input list="browsers">
<datalist id="browsers">
	<option value="Internet Explorer">
	<option value="Firefox">
	<option value="Chrome">
	<option value="Opera">
	<option value="Safari">
</datalist>

4.视口viewport深入理解

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

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

// 快捷键生成：meta:vp tab
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; 
maximum-scale=1.0; user-scalable=no;">

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；

常见的响应式的网站

• 华为云官网首页： https://www.huaweicloud.com/
• 摩拜单车官网首页： https://mobike.com/cn/
• 猎豹官网首页： https://www.liebao.cn/

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的设计稿
function refreshRem() {
var desW = 750,
winW = document.documentElement.clientWidth,
ratio = winW / desW;
document.documentElement.style.fontSize = ratio * 100 + 'px';
}
refreshRem();
window.addEventListener('resize', refreshRem);

9.弹性盒模型Flexbox布局

display：-webkit-box；
display: -webkit-flex;
display: -ms-flexbox;
display: flex;