内容简介：先科普一下，HTML5并不是一项技术，而是一个标准。所以其实要么我们是作为理论派讨论HTML5标准，要么是作为实践派讨论HTML5标准在某浏览器的应用。H5 实际上是一个解决方案，一个看起来酷炫的移动端onepage网站的解决方案
先科普一下，HTML5并不是一项技术，而是一个标准。
所以其实要么我们是作为理论派讨论HTML5标准，要么是作为实践派讨论HTML5标准在某浏览器的应用。
H5 实际上是一个解决方案，一个看起来酷炫的移动端onepage网站的解决方案
移动端的适配方案
-
rem适配
优点：
1. 引用简单，布局简便 2. 根据设备屏幕的DPR,自动设置最合适的高清缩放 3. 有效解决移动端真实1px问题
但是绝不是每个地方都要用rem，rem只适用于固定尺寸！
在这里 rem 也是一种单位，并且可以为咱们的布局提供无线的变化，根据开发者的设定，它将会在不同的分辨率屏幕上展示不同的色彩。
这个单位的定义和em类似，不同的是em是相对于父元素，而 rem 是相对于根元素 <html> ，当我们指定一个元素的font-size为2rem的时候，也就说这个元素的字体大小为根元素<html>字体大小的两倍，如果html的font-size为12px，那么这个2rem的元素font-size就是24px。
html {font-size: 12px;}
h1 { font-size: 2rem; } 2*12 = 24px
html {font-size: 16px;}
h1 { font-size: 2rem; } 2*16 = 32px
| 单位 | 定义 | 特点 |
|---|---|---|
| rem | font size of the root element | 以根元素字体大小为基准 |
| em | font size of the element | 以父元素字体大小为基准 |
当然上边只是我们介绍 rem 简单的示例，具体运用到项目中我还需进行 rem 的计算，根据根元素的 font-size 通过Javascript来计算我们的 rem 单位适配
选取一个设备宽度作为基准，设置其根元素大小，其他设备根据此比例计算其根元素大小。比如使得iPhone6根元素font-size=16px。
| 设 备 | 设备宽度 | 根元素font-size/px | 宽度/rem |
|---|---|---|---|
| iPhone5 | 320 | 计算 | - |
| iPhone6 | 375 | 16 | 23.4375 |
| iPhone7 | 375 | 16 | 23.4375 |
| iPhone7plus | 414 | 计算 | - |
根元素fontSize公式：width/fontSize = deviceWidth/deviceFontSize
下方为动态计算
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
console.log(rem)
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
上方的代码则是本人经常使用的 rem 计算方法，我们可以根据我们自己的需求设定基于多大的屏幕以及rem的换算倍率等
百分比方案
使用百分比布局大部分是可行的，它会让布局随着屏幕的大小自动缩放，而且不用写太多的css样式，以及js相关的计算操作，但是文字就存在非常大的问题了，由于文字是固定大小，在屏幕dpr变化的时候，文字的CSS像素不变，就导致了文字在页面中的占位发生了变化。这样的结果就是，文字过多或者屏幕dpr过小的时候，会发生溢出；但是如果按照小屏幕为基准，又会发生字体太小这种情况。
vw方案
vw 也是css的单位，1vw相当于1%，比如：浏览器视口尺寸为370px,那么 1vw = 370px * 1% =6.5px(浏览器会四舍五入向下取7)，
我们来看看vw的浏览器和手机的兼容性问题
浏览器
手机
在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持
vw自身将整个可见视口横向分成了100份，每一个单位就是1vw，这个单位最大的优势就是在移动端的时候，无论是竖屏或者横屏，vw永远都是针对于横向的，比rem的方案好在当屏幕大小发生变化（顺便兼容了以后的可调节屏幕大小的移动设备[手动斜眼]）的时候，不会让页面崩掉。
对于移动设备来说，比如iphone6+的375pxCSS像素宽度，1vw就等于3.75px，通过这个单位可以解决上面的依赖于脚本绑定根元素font-size的问题，在竖屏和横屏下面都有比较好的效果
$w-base: 375px
$w-base-design: 750px
@function px2vw($px)
@return ($px / $w-base-design) * 100vw
虽然vw可以得到很好的支持，但是不会得到视觉稿原本的像素值了。在后期进行维护的时候会增加很多很多很多麻烦，前期打怪爽，后期装备维护难
淘宝移动端适配方案
移动端事件
tap: 手指碰一下屏幕会触发 swipeLeft：手指在屏幕上向左滑动时会触发 swipe：手指在屏幕上滑动时会触发 click：单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟 swipeDown：手指在屏幕上向下滑动时会触发 swipeUp：手指在屏幕上向上滑动时会触发 longTap: 手指长按屏幕会触发 touchstart：手指触摸到屏幕会触发 touchmove：当手指在屏幕上移动时，会触发 touchend：当手指离开屏幕时，会触发 touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件 singleTap: 手指碰一下屏幕会触发 doubleTap: 手指双击屏幕会触发 swipeRight：手指在屏幕上向右滑动时会触发
移动端常见问题
-
1px问题
大家都知道我们再写web端适配的时候还需要兼容ie浏览器，这是因为浏览器的内核都不一样，而且我们的屏幕大小，屏幕厂商也是不一样，时常会发生缺少像素或者多像素现象，其实手机也一样屏幕大小不一，浏览器也是各式各样，拿iphone6为例，其dpr(device pixel ratio)设备像素比为2，css中一个1x1的点，其实在iphone6上是2x2的点,并且1px的边框在devicePixelRatio = 2的Retina屏下会显示成2px，在iPhone6 Plus下甚至会显示成3px。
这个问题的解决方案有很多，个人觉得最简单方面的还是大漠大大的一种解决方案。
使用 postcss-write-svg 插件
-
利用meta标签对viewport进行控制
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
2.删除默认的苹果 工具 栏和菜单栏 <meta name="apple-mobile-web-app-capable" content="yes">
3.在web app应用下状态条（屏幕顶部条）的颜色 (iphone设备中的safari私有meta标签 )<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明） 若值为“black-translucent”将会占据页面px位置，浮在页面上方
4.允许全屏模式浏览 (iphone设备中的safari私有meta标签 )<meta content="yes" name="apple-mobile-web-app-capable">
5.禁止了把数字转化为拨号链接 <meta name="format-detection" content="telephone=no"> 在iPhone上默认将电话号码变为超链接（蓝色字体）并且点击这个数字还会自动拨号
6.ios click点击事件延时300ms
7.移动端如何定义字体font-family
8.移动端字体单位font-size选择px还是rem (new)
9.移动端touch事件(区分webkit 和 winphone) (new)
webApp与响应式区别
响应式：
设计通过CSS3的MQ（Media queries），使网页在不同设备上都可以自动适应，从而具有更加优秀的表现效果。
而且响应式设计不仅用在移动网站，在PC端也有不同屏幕的适配，而且移动端和PC端可以只使用一套代码，这就是全平台的响应式设计
Webapp：
HTML5移动端（移动网站、混合应用、WebAPP）为了解决屏幕适配经常会使用响应式设计（流式布局、CSS3媒体查询），
但是响应式设计并不是必须，也可以使用流式布局和remnant来解决移动端的屏幕适配问题
meta标签
META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等
作用
META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的<head>和<title>之间（有些也不是在<head>和<title>之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。<meta>除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定
以上所述就是小编给大家介绍的《H5 深度解析》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Ruby原理剖析
[美] Patrick Shaughnessy / 张汉东、秦凡鹏 / 华中科技大学出版社 / 2016-12-1 / 78.80元
《Ruby原理剖析》解开Ruby编程语言的魔法面纱。全书图文并茂、深入浅出地剖析了Ruby编程语言的核心工作原理。作者本着科学实证的精神，设计了一系列实验，帮助读者轻松了解这门编程语言的工作奥秘，包括Ruby如何用虚拟机执行代码，Ruby的垃圾回收算法，以及类和模块在Ruby内部的关系等。一起来看看 《Ruby原理剖析》 这本书的介绍吧!
