Ⅰ h5和web前端的区别
一、指代不同
1、h5：是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
2、web前端：是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
二、发展不同
1、h5：结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。
2、web前端：从网页制作演变而来，在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显着，功能更加强大。
三、技术构成不同
1、h5：由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。
2、web前端：掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。
Ⅱ h5为什么称之为响应式web设计
h5配合css3借助媒体查询技术可以控制不同设备、不同分辨率中的css样式，使页面显示出不同的效果，故称之为响应式web设计。
Ⅲ 新手开发移动端 H5 页面有哪些注意事项
1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
1
2
3
4
5
6
代码laycode - v1.1
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
2、HTML5标签的使用
在开始编写webapp时，哥建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序 的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。
3、放弃CSS float属性
在项目开发过程中可以会遇到内容排列显示的布局，假如你遇见这样的视觉稿，哥建议你放弃float，可以直接使用display:inline-block;
4、利用CSS3边框背景属性
这个按钮有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写，
这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。
-webkit-border-image就个很复杂的样式属性。
5、块级化a标签
请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。
6、自适应布局模式
在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝 采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、 chrome都能够正常的显示，你无需再次考虑设备的分辨率。
7、学会使用webkit-box
上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？很感谢webkit为display属性提供了一个webkit-box的值，它可以帮助前端工程师做到盒子模型灵活控制。
8、如何去除Android平台中对邮箱地址的识别
看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地 址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想 Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中
<meta content="email=no" name="format-detection" />
9、如何去除iOS和Android中的输入URL的控件条
你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？
答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果
setTimeout(scrollTo,0,0,0);
请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。
10、如何禁止用户旋转设备
我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！
至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位 时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出 发点是正确的，苹果确实不是一般的苹果。
iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件，但是在Android平台，确实也是阻止不了的。
11、如何检测用户是通过主屏启动你的webapp
看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下 iphoneipodipod touch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动 增加一个当前页面的启动图标，点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别 是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对 象的一个standalone属性。iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp 时，navigator.standalone为true， 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访 问我们的webapp的。
在Android中从来没有添加到主屏这回事！
12、如何关闭iOS中键盘自动大写
我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为 input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
13、iOS中如何彻底禁止用户在新窗口打开页面
有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空，但 是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的 target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技 巧仅适用iOS对于Android平台则无效。
14、iOS中如何禁止用户保存图片＼复制图片
我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮，这样用户就无法保存＼复制你的图片了。
15、iOS中如何禁止用户选中文字
我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。
16、iOS中如何获取滚动条的值
桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两 个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获 取滚动条的值呢？
通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。
17、如何解决盒子边框溢出
当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元 素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊 的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。
18、如何解决Android 2.0以下平台中圆角的问题
如果大家够细心的话，在做wap站点开发时，大家应该会发现android 2.0以下的平台中问题特别的多，比如说边框圆角这个问题吧。
在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角：
1＼-webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）；
2＼如果对针对边框做样式定义，比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。
3＼假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4个角的圆角值)-webkit-border- radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit- border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角，还有记住！-webkit这个前 缀一定要加上！
19、如何解决android平台中页面无法自适应
虽然你的html和css都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head标签中是否包含以下meta标签：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />
如果有的话，那请你再仔细的看清楚有没有这个属性的值width=device-width，如果没有请立即加上吧！
20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式
新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari仍然会对页面中的5位连续的数字进行自动识别，并且将其重新渲染样式，也就是说你的css对该标签是无效的。
<meta name="format-detection" content="telphone=no" />
我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签，我们都做了如下改写：
<button class="t-balance"style="background:none;padding:0;border:0;">95009.00</button>元
Ⅳ 移动端H5页面适配问题研究
刚开始做移动端web开发的同学应该都碰到过页面适配问题，为什么我在开发手机上调试好的页面在其他手机会有这样或那样的样式问题？ viewport 我也设置了，为什么还是显示不正常？难道我要为每种手机屏幕写媒体查询，有没有简单的方式，可以不用关注手机屏幕的差异性呢？
网络中搜索 移动端H5页面适配 关键字，大概可以得到180多万的搜索结果，由此可见这个问题也得到很多人的关注。本文的目的主要是分析解决移动端H5页面适配问题过程中牵扯到的知识点，然后梳理分析目前常见的适配解决方案。
由于本文内容较长，下面先给出文章的提纲：
1.1理解移动端单位
1.2理解viewport
2.1图片高清适配
2.2字体大小适配
2.3布局宽度适配
---这里是分隔符，正文开始---
不知道正在看文章的你对上面列出来的这些单位是不是很熟悉，如果是的话，就可以跳过了。
理解这些单位的用法以及区别，对理解移动端页面适配有很大的帮助。为了让你对上面的单位有个大体的认知，这里把上面的单位分成了三类：
下面分别对每个单位展开分析：
*** dpi / ppi ***
** dpi ** , dot per inch ，每英寸的点数；打印或印刷领域使用的单位，代表打印机每英寸可以打印出的点数 。
ppi , pixel per inch ，每英寸的像素数，像素密度；表示图像或者显示器单位面积上像素数量。
dpi 和 ppi 都是描述分辨率的单位，但是两者是有区别的，但是在描述手机分辨率时，可以认为两者意义相同，以前android设备偏向于使用 dpi ，ios设备偏向于使用 ppi ，目前android和ios统一使用 ppi 描述手机屏幕的像素显示密度。
ppi的计算方法：
*** ldpi、mdpi、hdpi、xhdpi、xxhdpi ***
android对移动设备不同屏幕分辨率的分类。
*** pt，pc，sp ***
** pt ** ，磅（point的音译），印刷中使用的表示字型的大小单位，1inch = 72pt （印刷中这个关系成立，ios中不成立），ios开发中使用的逻辑单位，是和设备无关的单位。
** pc ** 印刷中使用的单位，1pc = 12pt，不需要关注。
** sp **， scale independent pixel ，android设备中用来显示字体大小的，和设备无关的尺寸，当设置字体大小单位为sp时，android系统字体大小会影响设置的字体渲染时的大小。
*** dip / dp ***
** dp/dip**， device independent pixel，表示设备独立像素，和设备无关的尺寸，相同的dp/dip值，不同设备展示的效果是一样的。
android使用的单位，之前偏向使用dip，目前建议使用dp。
android设备中，规定160ppi的屏幕，1dp = 1px；320ppi的屏幕，1dp = 2px，所以android设备中dp的计算方法：dp = px * (ppi / 160)，这里的px是指设备的物理像素点。
和ios开发中用的pt单位类似。
*** px ***
** px ** ，像素，有两种像素概念，一种是网页设计中使用的css像素，一种是原生移动系统使用的物理像素。
作为css像素时，表示的也是一种设备无关单位，与android中使用的dp类似，默认情况下与系统分辨率下的像素大小相同，标清设备中，一个css像素和一个设备物理像素大小相同；在高清设备中，一个css像素可以大于或者等于多个设备物理像素，具体一个css像素，需要多少个物理像素来展示，浏览器会根据dpr计算。
原生移动系统中使用px单位时，表示的就是屏幕的物理像素点，每种屏幕的物理像素点大小可能不一样。
*** dpr ***
** dpr ** ，device pixel ratio， 横向或者纵向设备物理像素数量与设备独立像素数量的比值，浏览器中可以通过window.devicePixelRatio获取(存在兼容性问题)。
对于原生app，ios和android系统会自动根据dpr计算出渲染时需要的px值，最终不同屏幕上展示出来的大小很接近；而移动端页面渲染时想要做到这一点，就必须首先得到设备的dpr，然后再根据dpr计算渲染需要的px值。
ios设备中iphone3的dpr为1；iphone4,5,6,7的dpr为2；iphone6+,7+的dpr为3。iphone6+和iphone7+实际计算出来的dpr应该时2.6左右，但是官方还是建议dpr为3，这是因为ios系统利用了一种“缩减像素采样”算法，自动缩减到2.6。
android设备中dpr值有多种，可知的有0.75，1，1.5，1.75，2，2.5，2.75，3，4等。
*** em，rem ***
** em ** 相对单位，CSS2引入的单位，作为字体大小使用时和百分比单位类似，都是相对于最近的父元素设置的字体大小，在body上设置字体大小为100%和设置字体大小为1em是一样的效果，默认情况下浏览器的字体大小为16px，这样只要浏览器默认得字体大小不变，1em = 16px。
** rem ** 相对单位，root em，CSS3新增的单位，作用和em类似，唯一的区别就是em是相对父元素的，rem是相对html根节点的，即所有使用rem单位的子元素的字体大小都是相对根节点的，所以使用rem可以避免使用em带来的子元素字体大小逐层复合的连锁反应。
更多关于em，rem的知识参见这篇文章 理解web开发中的em单位和rem单位 。
*** 分辨率 ***
平时说的手机屏幕分辨率，也称为物理分辨率或者原生分辨率，通常包括纵向分辨率和横向分辨率，例如iphone6的物理分辨率是1334 x 750，其中纵向分辨率是1334px，横向分辨率是750px，表示纵向方向可以显示1334个物理像素点，横向上可以显示750个物理像素点，这里描述分辨率使用的px单位，和css中使用的px单位意义不一样，这里代指物理设备的像素点。
还有一种分辨率叫做系统分辨率，例如iphone6的系统分辨率是667 x 375，其中高度是667pt，宽度是375pt，这里描述分辨率使用了pt单位，是一种设备无关单位。
屏幕尺寸相同的设备，物理分辨率越高，ppi也就越大，绝对单位面积上展示的物理像素数量越多，展示图片也就越细腻。
苹果把ppi > 300的屏幕称为视网膜屏,Retina屏。
传统桌面web页面布局通常是定宽布局，但是定宽布局的方式对移动端却不适用，原因手机屏幕尺寸大小各异，定宽布局可能在某些手机上出现横向滚动条，导致阅读效果比较差。
为了让手机有更好的网页浏览体验，苹果引入了viewport，为页面提供了一个虚拟的布局窗口，在这个虚拟的布局窗口中渲染页面，然后系统会把渲染好的页面自动缩放到手机屏幕大小。
虽然viewport还没有成为正式的规范，但是现在绝大部分浏览器都支持viewport。
在桌面浏览器中，viewport严格等于浏览器窗口大小，页面渲染时，页面宽度不会超过浏览器的宽度。
移动端屏幕太窄，为了提供更好的页面体验，移动端提供了两种viewport： 可视viewport ， 布局viewport 。
可视viewport 就是当前屏幕正在展示的区域，也就是移动设备屏幕的宽度，宽高通过window.innerWidth和window.innerHeight获取（存在兼容性问题）。
布局viewport ，页面布局实际用到的viewport，通常比可视viewport要宽，宽高通过document.documentElement.clientWidth和document.documentElement.clientHeight获取。
移动端还有一种viewport概念，可以理解为 理想viewport ，作用就是在理想viewport下，不同移动设备，展示的字体大小接近，并且不需要用户缩放就可以展示全部的页面内容。
理想viewport的宽度默认等于可视viewport的宽度，但是对同一台设备来说，这个理想viewport的宽度是可以改变的，而可视viewport的宽度是不可变的。
如何使用理想viewport来布局页面呢？只需要设置viewport的width等于device-width。
viewport的属性，推荐使用以及支持度较广泛的属性只有6个： width ， height ， initial-scale ， maximum-scale ， minimum-scale ， user-scalable 。
width 设置viewport布局宽度，内核是webkit的浏览器默认值是980px，取值范围在200-10000px，也可以取值为设备宽度device-width（等于横向设备无关像素数量）。
height 设置viewport布局高度，默认值依赖设备长宽比以及宽度值，取值范围在223-10000px，也可以取值为设备高度device-height。
initial-scale 设置初始缩放比例，页面第一次加载时的缩放比例。默认比例依赖于显示密度。在密度低于200 dpi的显示设备上，比例为1.0。在密度介于200及300 dpi之间的显示设备上，比例为1.5。对于具有300 dpi以上密度的显示设备，比例为密度/150 dpi向下取整的结果。取值范围由 maximum-scale 属性以及 minimum-scale 属性决定。如果设置 initial-scale 值为1， width 默认是device-width， height 默认是device-height
initial-scale 设置的缩放大小会改变理想viewport的大小，不会改变可视viewport的大小，也不会改变布局viewport的大小，这是某些适配方案依赖的基本原理，也是解决 1px问题 的关键。后面分析适配方案时，动态viewport适配方案就依赖这个知识点。
maximum-scale 允许用户缩放到的最大比例，默认值是0.5，范围从0到10.0。
minimum-scale 允许用户缩放到的最小比例，默认值是5.0，范围从0到10.0。
user-scalable 用户是否可以手动缩放，值可以是：yes/true允许用户缩放；no/false不允许用户缩放。
图片适配的目的是为了在页面中可以高清还原设计图中用到的图片。
页面中用到的图片是否清晰和展示页面的硬件设备的dpr以及图片分辨率这两个因素有关，下面会通过三个例子来说明这个问题。
***示例一 ***
例如dpr=2的设备，1个设备无关像素(android中的1dp，ios中的1pt)需要4个设备物理像素点填充。对于尺寸为100 x 120 (px)的图片，如果用 <img> 来展示，图片显示时会产生模糊现象。
原因：渲染图片时，宽度是100px，所以横向会占用100个设备无关像素，高度是120px,所以纵向会占用120个设备无关像素，每个设备无关像素又需要2x2个物理像素点来填充，而图片在每个设备无关像素(px)单位上提供的像素点只有1x1个，这时，系统通过一定的算法在这1个像素点上就近取色，取到4个颜色(这4种颜色接近但是有一定区别)之后，当成4个像素点，然后填充到1个设备无关像素点上，这样就导致图片显示时模糊，dpr越大，这种方式显示的图片越模糊。
示例二
还是dpr=2的设备，但是准备了一个尺寸为200 x 240 (px)的图片，还是用 <img> 来展示，这时显示的图片就比较清晰了。
原因：这时图片本身可以在一个设备无关像素单位上提供2x2个物理像素点，设备展示图片时直接拿图片提供的像素点来填充就可以了，不用对像素点进行处理，所以可以比较清晰的显示图片。
示例三
还是dpr=2的设备，这次准备一个尺寸400 x 480 (px)的图片，还是用 <img> 来展示时，这种情况展示的图片缺少锐利度，也影响了图片的清晰度，但是很难看出来。
原因：图片本身在一个设备无关像素点单位上提供了4x4个物理像素点，而设备本身只需要2x2个物理像素点，所以会通过缩减采样算法，在图片提供的4x4个物理像素点中，选取颜色接近的2x2个物理像素点填充到设备无关像素点上，所以也会产生一定的色差，这种情况下图片尺寸越大，这种色差也就越明显，但是人眼很难区分这种色差。
下面是我在oppo的一款手机上的测试结果，结合这张效果图就可以很好的理解上面的三个示例了：
图片适配最佳实践
要想高清显示图片，如果条件允许(有单独的图片服务器)最直接的解决办法，肯定是根据设备的dpr，为不同dpr的设备加载不同倍率大小图片显示；没这种条件的或者对用户体验没有很高要求的，只能选一种折中的方案了，一般情况下只需要提供布局尺寸2倍大小的切图就可以了，也就是只高清适配dpr=2的设备，但是dpr为3或者4的设备展示效果也能接受，不容易看出来模糊现象。目前主流机型的dpr也就在2和3之间。
字体适配目标主要还是看设计要求，主要有两种：
1.不同屏幕下，字体显示大小都一样，即需要等宽显示字体；
2.不同屏幕下，一行能显示的字数固定，即需要按比例缩放字体大小；
开始分析之前，先看下这两种字体适配的示例：
第1种字体适配方案的示例
第2种字体适配方案的示例
下面就来具体分析下两种字体适配方案的原理以及优劣。
** 第1种字体适配方案原理 **
在开始分析这种方式的原理之前，先通过一张图理解下px和dp以及绝对长度之间关系。
由上图可知字体大小只与css单位px有关，而每个设备上px的绝对宽度又和设备的绝对宽度以及绝对宽度上划分出的设备无关像素点dp有关；只要设备的横向dp数量与绝对宽度的比值(dp/cm)相同，就可以保证px在不同设备上展示的绝对宽度是一样的；如果dp/cm的比值过大，那么px的绝对长度就会变小，看起来就会显小；如果dp/cm的比值过小，那么px的绝对长度就会变大，看起来就会显大；一般来说手机屏幕分辨率越高，相同px值的字体看起来就会越小。
iphone5和6的dp/cm比值十分接近，所以12px大小的字体在这两种手机上显示的大小基本一样，看不出来区别，但是iphone6+的dp/cm比值要比iphone5,6的略大，这就导致12px大小的字体在6+上显示的比5，6上显示的略小，上面的淘宝对比图仔细分辨可以看出来。
android的手机屏幕dp/cm比值在各个设备之间也有差异性，并且比较有多样性。所以同样12px大小的字体，各个设备显示时也是有差别的。
这种显示差别在iphone系列手机中可以忽略不计，但是android碎片化比较严重，完美兼容各种机型没有必要，主流机型中这种显示差别也可以忽略不计，所以采用这种方式进行字体适配只需要px值设置成一样的就可以了。
** 第1种字体适配方案优缺点**
优点：1.不同设备中字体大小显示一致，比较统一；2.大屏手机可以显示更多的文字；
缺点：1.由于单个字体宽度是定死的，所以在有些机型下可能会影响页面布局；
** 第2种字体适配方案原理 **
在设计稿中，计算出字体大小相对于基准字体大小（基准字体大小可以选择设计稿宽度，一般为了计算方便，会把设计稿宽度/10得到的值作为基准字体大小）的比值，然后在不同布局宽度下，先得到基准字体大小，再根据上面计算出来的比值，就可以计算出来不同布局宽度下的字体大小，也就是不同布局宽度下等比例缩放字体。
利用rem的特性，在页面的html标签上设置一个基准字体大小，就可以实现这种方式。
例如，宽是750px的设计图中，字体大小是32px，计算出基准字体大小为75px，比值为 32 * 10 / 75 = 0.426667。
如果布局宽度是414px，此时基准字体大小变成 414 / 10 = 41.4px，然后设置<html style="font-size:41.4px">，字体大小是0.426667rem，计算出来的字体大小为41.4x0.42667=17.66px。
如果布局宽度变成360px，此时基准字体大小变成36px，然后设置<html style="font-size:36px">，字体大小仍然用0.426667rem表示，计算出来的字体大小为36x0.42667=15.36px。
750/32 约等于 414/17.66 约等于 360/15.36，这样就做到了等比缩放字体了。
** 第2种字体适配方案优缺点**
缺点：1.小尺寸设备屏幕上字体显示小，大尺寸设备屏幕字体显示大，导致字体显示不一致；2.不能发挥大屏手机的优势（显示更多的字）；3.字体大小会出现奇数或者小数点大小的值，某些字体不支持这些值，渲染时增加计算量；
优点：1.适配简单，不同设备不会影响页面布局，可以和设计稿布局保持一致；
布局中对宽度的适配，也是采用rem来实现，和上面第2种字体大小适配方式中的原理类似，也是计算出一个比例值，然后不同布局宽度中等比缩放，这里偷下懒，不在赘述。
目前的解决方案有两类
第一类就是js动态生成viewport标签，标签中的initial-scale值根据设备的dpr计算，不同dpr设备的viewport值不同。
第二类就是js不操作viewport，每个设备都使用理想viewport来布局。
** 动态viewport解决方案分析 **
这里分析两个动态viewport解决方案：
1.手机淘宝的flexible方案；
2.hotcss方案；
手机淘宝的flexible方案 ，特点：
1.仅针对iphone生成动态viewport，因为目前iphone的dpr只有1，2，3三种，android的dpr很有多种，不具有一致性；
2.字体大小不用rem做缩放处理，仍然使用px单位，设置不同dpr下对应的字体大小；
3.宽度利用rem等比缩放；
4.允许强制定义dpr;
使用时页面头部需要引入 flexible.js .
hotcss方案 ，特点：
1.不区分iphone和android，dpr只取三种1,2,3，android的dpr做近似处理；
2.宽度以及字体利用rem等比缩放；
3.允许强制定义dpr;
使用时页面头部需要引入 hotcss.js
动态viewport方案之所以会称为动态viewport是因为，这个适配过程会根据系统dpr值设置initial-scale属性的大小，大小等于1/dpr。
** 静态viewport解决方案分析 **
利用rem特性，先根据标注图算出各元素相对于设计稿宽度的比值，这个比值就作为rem值，然后页面布局时就用算出的rem值表示，并且在html根元素设置当前布局页面宽度作为基准。更rem值计算具体的解释可以参考这篇文章 使用Flexible实现手淘H5页面的终端适配 。通过这种方式设置标签元素的宽高，位置以及字体大小，这样利用rem特性就可以在不同手机屏幕上实现等比缩放。
参考资料
https://github.com/amfe/article/issues/17
http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html
Ⅳ 移动端H5页面的设计稿尺寸（上）
由于HTML5和微信内置浏览器的火爆，移动端H5网页越发流行。在设计制作移动端网页的时候，你是否疑惑，这种网站设计稿应该做成的多少屏宽，是否应该跟手机的分辨率一致，还是应该按照iPhone的分辨率来设计（注意H5网页区别于APP，APP的设计稿直接按照手机分辨率来设计）？那么对于现在2K屏幕的手机，应该如何制作设计稿和前端稿呢？
作为本次文章系列的“上”部，将解决一些基本概念：像素（pixel）、ppi、分辨率、物理像素（physical pixel）、CSS像素、设备独立像素（deviceindependent pixel）等等。
为图像显示的基本单位，表示“图像元素”之意。 每个这样的信息元素不是一个点或者一个方块，而是一个抽象的采样。 仔细处理的话，一幅图像中的像素可以在任何尺度上看起来都不像分离的点或者方块；但是在很多情况下，它们采用点或者方块显示。
这一段是出自维基网络的解释。其实很多会Photoshop的人都有一个误区： 认为像素是一个宽高相等的小方块，并且的像素都是“那么大”，但是不知道这个宽高的具体数字。
像素是一个抽象概念，它是一个相对单位。
像素描述的是图像在某一点的颜色值。一般来说，一个像素只能描述一种颜色值。
先可以跳过这个话题，介绍ppi概念，像素没有大小就好理解了。
PPI的复杂之处在于如果他所属的上下文环境不同，意义也会完全不一样。 当我们在谈论显示设备的PPI时，它代指的屏幕的像素密度；当我们在谈论和图片相关时，我们谈论的是打印时的分辨率或者打印机的打印精度。这里我们主要描述的前一种情况。
PPI全称为Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。
举例1：
中的七张图，假设图片尺寸都为1x1寸，那么 PPI 分别为 1、2、5、10、20、50、100 。 在同一物理尺寸内 ，随着像素数的增大，图像细节越多， PPI 增大，图像越清晰，像素所占空间相对越小。
因此，从讨论像素大小的角度来说，图①中各个方框像素的宽度（单位为英寸）分别为：1、1/2、1/5、1/10、1/20、1/50、1/100。像素在每个不同ppi下大小都不同，因此讨论像素的大小也就变得无意义了。像素是没有大小的。像素是一个抽象概念，它是一个相对单位。
像素描述的是图像在某一点的颜色值。一般来说，一个像素只能描述一种颜色值。
举例②：
在photoshop中分别建立两个文档：①800x600px，72ppi，②800x600px，300ppi。那么这两个文档在PS或者生成图片时，显示的视觉效果是完全一样的，因为宽高的像素点数是完全一样的，在设备上渲染出来的效果图是一致的。当你把文档②中的任意图层复制到文档①中，从视觉上发现图层不会变大或者缩小。只有把这两个文档作为图片1:1打印出来时，才会发现72ppi的图片要大于300ppi的图片（注意ppi的含义），前者宽（高）大约是后者的4.16（300/72）倍。
任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，ppi对于图片来说时没有任何意义的，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有他的意义。
分辨率泛指显示系统对细节的分辨能力。能显示图像都能叫显示系统，比如显示器，投影仪，照片。
分辨率常用的单位有：dpi（点每英寸）、lpi（线每英寸）和ppi（像素每英寸）。从单位来看，分辨率是一个比值，与物理单位的比值。
日常所说的“这张图片的尺寸（或分辨率）是100x100像素”，一般都是在描述数字图片，这样的描述只是说明了图片文件包含多少个像素。比如图1中的七张图，我们习惯于说，第1张图的分辨率是1x1像素，第5张图的分辨率是20x20像素，其实只是说明了图片的像素数而已。
这是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。
最先使用retina屏幕是iphone 4，屏幕分辨率为960 * 640（326ppi）。
对比如下两幅图，可以清晰地看出是否 Retina 屏的显示差异：
图2 iPhone 3GS
图3 iPhone 4
两代iPhone 的物理尺寸（屏幕宽高有多少英寸）是一样的，从上图可以看出，iphone 4的显示效果要明显好于iphone 3GS，虽然 iPhone 4 分辨率提高了，但它不同于普通的电脑显示器那样为了显示更多的内容，而是提升显示相同内容时的画面精细程度。这种提升方式是靠提升单位面积屏幕的像素数量，即像素密度来提升分辨率，这样做的主要目的是为了提高屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display为例， 工作时显卡渲染出的2880x1880个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍。
注意：在桌面显示器中，我们调整了显示分辨率，比如从 800 * 600 调整到 1024 * 768 时，屏幕的文字图标会变小，显示的内容更多了。但 Retina 显示方式不会产生这样的问题，或者说， Retina 显示技术解决的是显示画面精细程度的问题，而不是解决显示内容容量的问题。
为什么是“每四个一组”？而且要让这四个一组来显示“原来屏幕的一个像素”？这大概就是 Retina 显示技术的一种表现吧。而这“每四个一组”的“大像素”，可以被称作“设备独立像素”， device independent pixel ，或者 density-independentpixel ， 它可以是系统中的一个点，这个点代表一个可以由程序使用的虚拟像素，然后由相关系统转换为物理像素。
“设备独立像素”也有人称为“CSS像素”，一种形象的说法，更倾向于表明与 CSS 中尺寸的对应。
设备独立像素与物理像素的对应关系，可以这样看：
图4
类似的每四个一组的对应关系，也许正是 Retina 显示技术所做的。
作为Web开发者，我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为CSS像素。
CSS像素有什么特别的地方？我们可以借用quirksmode中的这个例子：
假设我们用PC浏览器打开一个页面，浏览器此时的宽度为800px，页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。
但如果我们把页面放大（通过“Ctrl键”加上“+号键”），放大为200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。
吊诡的是此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。
CSS像素与屏幕像素1：1同样大小时：
图5
CSS像素(黑色边框)开始被拉伸，此时1个CSS像素大于1个屏幕像素
图6
也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。在后面你会看到更复杂的情况，在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。
从上面的例子可以看出，CSS像素从来都只是一个相对值。
设备像素比=设备物理像素/设备独立像素
设备像素比在 js 中可以通过 devicePixelRatio 的参数取得（需要页面的 viewport 设置为 content=”width=device-width” 此处为前端布局知识，较为专业，笔者也只是意会，无法说清楚，请自行网络）
iPhone 4 的设备像素比为2，线长（横向、纵向、对角线）上的物理像素数与设备独立像素数的对应关系即为2。
根据这个对应关系，一般可以通过屏幕的物理分辨率和设备像素比确定设备独立像素数。
那么在我们做移动端网站时，将viewport设置了content=”width=device-width”，设备独立像素也就等于CSS像素。
经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。
这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。笔者从其他文章中找到了一些答案。（原型图屏宽是320px是为了满足原型软件在1：1比例显示上适当，二是为了保证早期iphone320px屏宽的显示需求）
“其实这个属性值很有意思，字面意应该是 viewport 宽度等于设备宽度，但在实际中不同的浏览器都给出了个定值：320px；这个值还是源于 Apple ，因为早期 iPhone 的分辨率为 320px*480px ，大量为 iPhone 量身定制的网站都设置了 viewport:width=device-width ，并且按照宽度 320px 来设计制作，所以其他浏览器加入 viewport 支持时为了兼容性也将 device-width 定义为了 320px 。”
那么到了后来的iPhone4的屏幕是960x640px，几乎所有人都知道Retina显示屏，所有方向上的像素都成了原来的2倍。而设备独立像素的屏宽还是保持着320px。其它智能手机早期的分辨率基本上也使用了大致相同的屏幕尺寸与分辨率，因此才有了 320px 这个不约而同的约定。
当然，如果把 viewport 的 width 属性设置为一个定值，比如 320、 480、 700 等等，那 viewport 的宽度即为设定的宽度。此时，设备独立像素宽度，也即所设定的宽度，而物理像素与设备独立像素的比值，则不再是最初始的设备像素比值了（比如 iPhone 4 中的2）。
现在的智能手机屏幕尺吋多样，分辨率有很多种，相应地，设备像素比也不一致，有1、1.5、2、2.25、3等等，而在一般情况下（指 viewport 设置为 width=device-width 时）的设备独立像素宽度，也不再只是 320px 了，还有 360px 、 400px等等。 这是从 http://screensiz.es/phone 统计的大部分手机独立像素数据。
若设备像素比是N，就表示该手机屏幕上的N个物理像素来显示一个CSS像素。
本文对已移动端网站涉及到的一些概念进行了较为基础的解释，在下一篇中，会介绍H5网页在做设计稿以及前端布局时的最为省力的方法。
Ⅵ 移动端的h5页面的尺寸是多少
近来，大尺寸手机屏幕日趋主流，意派Epub360根据对主流大屏的计算，现新增大尺寸手机屏幕的画布，并命名为“微信Plus”。原来的普通微信尺寸将继续保留。
内容安全区：375*603（750*1206）
出血区：422*748（844*1496）
左右边框各：23.5px
上下边框各：72.5px
根据该画布，后续将会推出配套的layer组件等尺寸，即当选择使用该微信尺寸时，layer画布跟layer容器尺寸自动默认尺寸：375X603PX，方便调整。
Ⅶ h5页面设计的原理是什么
1、h5页面设计的原理——在代码中实现
设计人员创建了一个很好的层图，包括PSD文件、PNG剪贴图、适当的文件、MP3音频文件、视频文件等等，并将它们与他们的前端工程师同事打包在一起，由他们专门将它们放在服务器上。在代码编辑方面，元素被合并到我们通常看到的H5 web页面中。前端也是H5的最终执行者。它们对恢复设计非常重要。一个好的前端往往决定了一个作品的最终命运。前端工程师可以说是设计师最好的行业导师。我们必须虚心向他们学习网络编码技术。
整个H5页面将被推到互联网后，代码编辑和测试。有时，前端工程师的工作量远远高于设计，这取决于项目的形式和难度。
2、h5页面设计的原理——没有代码实现
没有代码并不意味着你不需要前端工程师，但现在互联网上有很多H5页面生成工具，以网站的形式，命名为第三方平台，由大量的工程师开发，以帮助没有前端资源的设计师。您可以将设计好的数据上传到第三方平台的服务器上，自己编辑发布。这个过程不涉及程序员，可以节省大量的人力成本，而且简单快捷。但缺点是平台功能单一，效果有限。它通常以幻灯片的形式出现。工程师生成的H5页面可以定制。现在市场上有很多这样的平台。
无论是第三方网站设计工具，还是诞生于H5的前端工程师，都需要h5页面设计的原理。与前端工程师的沟通应该从设计开始就开始。尽量避免所有设计都做得好，前端无法实现的尴尬局面。所以设计师和前端工程师之间的沟通是非常重要的。后续将会有更多关于ui设计中各个分类的设计技巧与资讯，可以点击本站的其他文章进行学习。
Ⅷ web前端只要会H5和css,加上js就可以了吗
刚刚入门web前端的同学，大多对前端学习路线有误解，认为前端=HTML+CSS+Javacript。但实际情况要比这要复杂多，下面就来真正了解一下Web前端学些什么内容吧！
1.入门篇：html基础、css基础、js基础、纯js操作dom和jquery。
2中级篇：深入css3、深入js、掌握主流mvc框架、升级后台语言nodejs、总结做项目。
3.进阶篇：掌握面向对象编程、函数式编程、MVC / MVVM / MVC。还需要把握好安全性、平台兼容等等。
所以说，Web前端的学习路程是路漫漫其修远矣，大家要靠不停地学习来充实自己的知识技能，才能在前端方向成为技术大牛！