深入剖析H5

首先科普一下，HTML5不是一种技术，而是一种标准。所以其实我们要么是作为理论派在讨论HTML5标准，要么是作为实践派在讨论HTML5标准在某浏览器中的应用。H5其实是一个解决方案，一个好看的移动端单页网站的解决方案移动端适配解决方案rem适配优点：1.引用简单，布局方便2.根据设备屏幕的DPR，自动设置最合适3.有效解决了移动端真正的1px问题，但并不是每个地方都必须使用rem，rem只适用于固定尺寸！这里rem也是一个单位，可以为我们的布局提供无线变化。根据开发者的设置，它会在不同分辨率的屏幕上显示不同的颜色。这个单位的定义和em类似，不同的是em是相对于父元素的，rem是相对于根元素的，当我们指定一个元素的font-size为2rem时，也就是比如说，这个元素的字体大小是根元素的字体大小的两倍，如果html的font-size是12px，那么这个2rem元素的font-size就是24px。html{字体大小：12px;}h1{字体大小：2rem;}2*12=24pxhtml{字体大小：16px;}h1{字体大小：2rem;}2*16=32px单位定义特征remfont根元素的大小根据根元素的字体大小。元素的字体大小基于父元素的字体大小。当然，以上只是我们介绍rem的一个简单例子。我需要为特定应用程序计算rem。根据根元素font-size由Javascript计算。我们的rem单元适配选择一个设备宽度作为基准，设置它的根元素大小，其他设备根据这个比例计算自己的根元素大小。比如让iPhone6根元素font-size=16px。device设备宽度根元素font-size/pxwidth/remiiPhone5320计算-iPhone63751623.4375iPhone73751623.4375iPhone7plus414计算-根元素fontSize公式：width/fontSize=deviceWidth/deviceFontSize下面是动态计算（functionflexible(window,document){vardocEl=document.documentElementvardpr=window.devicePixelRatio||1//调整主体字体大小函数setBodyFontSize(){if(document.body){document.body.style.fontSize=(12*dpr)+'px'}else{document.addEventListener('DOMContentLoaded',setBodyFontSize)}}setBodyFontSize();//设置1rem=viewWidth/10functionsetRemUnit(){varrem=docEl.clientWidth/10console.log(rem)docEl.style.fontSize=rem+'px'}setRemUnit()//在页面调整大小时重置rem单位window.addEventListener('resize',setRemUnit)window.addEventListener('pageshow',function(e){if(e.persisted){setRemUnit()}})//检测0.5px是否支持if(dpr>=2){varfakeBody=document.createElement('body')vartestElement=document.createElement('div')testElement.style.border='.5px纯色透明'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太小的时候会溢出；但如果以小屏幕为基准，字体就会偏小。当前移动端适配排版时，将使用百分比作为版块级元素的兼容排版。这也与设计稿中的效果有关。如果设计稿要求一个元素有固定的宽度，那么就用px来保证宽度即可。vw方案vw也是css的单位，1vw相当于1%，例如：浏览器视口大小为370px，则1vw=370px*1%=6.5px（浏览器会向下取整为7），我们取查看vw浏览器和手机之间的兼容性问题。浏览器和手机在移动端支持iOS8以上和Android4.4以上，在微信x5内核中也完全支持。VW本身将整个可见视口水平划分为100个部分。每个单位为1vw。这个单元最大的优势就是在移动端的时候，无论是竖屏还是横屏，vw始终对准水平方向。比屏幕尺寸变化时的rem解决方案好（顺便说一句，后面会兼容使用屏幕尺寸可调的移动设备时[手动斜眼]），页面不会崩溃。对于移动设备，比如iphone6+的375pxCSS像素宽度，1vw等于3.75px。本单元可以解决上述依赖脚本绑定根元素font-size的问题。竖屏和横屏都比较好$w-base:375px$w-base-design:750px@functionpx2vw($px)@return($px/$w-base-design)*100vw虽然vw可以很好的支持，它不会获取原始模型的像素值。在后期的维护中，会遇到很多很多很多的麻烦。前期打怪爽，后期维护装备就难了。连续点击的触发有200ms~300ms的延时。touchstart：手指触摸屏幕会触发touchmove：手指在屏幕上移动时会触发touchend：手指离开屏幕时会触发touchcancel：可以由系统触发，比如手指触摸时屏幕，如果突然有alert，或者系统有其他中断触摸的行为，可以触发这个事件，这是因为浏览器的内核不一样，我们的屏幕尺寸和屏幕厂家也不一样，经常出现缺像素或多像素的现象。其实手机都是一样的，不同的屏幕尺寸，浏览器也是多种多样的，以iphone6为例，它的dpr（devicepixelratio）设备像素比为2，css中的一个1x1的点在iphone6上实际上是一个2x2的点,而1px的边框会显示为devicePixelRatio=22px的Retina屏幕，在iPhone6Plus下甚至会显示为3px。这个问题有很多解决方案。我个人认为最简单的解决方案是DaMoDa的。使用postcss-write-svg插件通过元标签控制视口2.删除默认的苹果工具栏和菜单栏3.状态栏（屏幕顶部的栏）下的颜色webappapplication(iphonesafariprivatemetataginthedevice)默认值为default(white),and可以设置black（黑色）和black-translucent（灰色半透明）如果值为“black-translucent”，会占据页面的px位置，悬浮在页面上方4.允许全屏模式浏览（safariiphone设备中的privatemeta标签)5.禁止将号码转换为拨号链接在iPhone上，电话号码默认会改Hyperlink（蓝色字体），点击这个号码会自动拨号6.iosclickclick事件延迟300ms7.移动端如何定义字体font-family8。移动端的字体单位font-size选择px或者rem（new）9。Mobiletouchevent(区分webkit和winphone)(new)更多问题ResponsivewebAppandResponsive:设计使用CSS3MQ(Mediaqueries)，让网页自动适配不同的设备，从而有更好的性能表现效果.而且响应式设计不仅仅用在手机网站上，在PC端也可以适配不同的屏幕，而且手机端和PC端只需一套代码即可。这就是全平台的响应式设计Webapp：HTML5移动端（移动网站、混合应用、WebAPP）经常使用响应式设计（流式布局、CSS3媒体查询）来解决屏幕适配，但响应式设计不是必须的，流式布局和remnant也可以用来解决手机屏幕适配问题meta标签META标签是HTML网页源代码中一个重要的html标签。META标签用于描述一个HTML网页文档的属性，如作者、日期时间、网页描述、关键词、页面刷新等。META标签是HEAD区的关键标签HTML标记。它位于HTML文档的和中。