内容简介：先科普一下，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 深度解析》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Web Data Mining
Bing Liu / Springer / 2006-12-28 / USD 59.95
Web mining aims to discover useful information and knowledge from the Web hyperlink structure, page contents, and usage data. Although Web mining uses many conventional data mining techniques, it is n......一起来看看 《Web Data Mining》 这本书的介绍吧!
