asp.net页面自定义布局。就是实现页面拖拉功能，用户根据自己需要设计不同的内容_百度知道
asp.net页面自定义布局。就是实现页面拖拉功能，用户根据自己需要设计不同的内容
主要想知道实现原理。。把代码实现动态拖拉页面，把坐标什么的保存到数据。。拖拉主键的时候，拖到页面的上的是什么？样式？代码，怎么运行的？需要用到模板引擎吗？ 求实现原理，有例子推荐也可以。谢谢 如果自己去设计的话，运行原理是什么？
我有更好的答案
要实现这个功能，你可以去看下web部件，也就是：webparts。这是一类web服务器控件，其实在工具箱上你就可以看得到。控件提供自定义布局功能，相关数据通过user profile保存。你可以去百度，比较好的视频资料，很早前有个：天轰穿web parts视频。
采纳率：70%
来自团队：
自己写的话比较麻烦。设计到很多数据接口和javascript特效问题。
你百度一下
看是不是你要的
其他1条回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。国内H5页面制作软件哪个比较实用？_百度知道
国内H5页面制作软件哪个比较实用？
现在市面上能搜到很多H5页面制作软件，傻傻分不清楚，初生牛犊应该选用哪个？
我有更好的答案
现在国内H5软件，比较受欢迎的就是iH5咯，功能强大嘛。以下摘取了一篇来自HTML5行业资讯的，关于这款软件的功能测评文章，题主可以参考参考~——————————分割线转载自搜狐新闻，作者：HTML5行业资讯你也许已经发现，我们正在向“人人做H5”的时代迈进。随着国内HTML5技术的成熟，越来越多H5页面制作软件崛起，H5制作不再是小众的玩物，而是互联网经济的新产物。据不完整统计，国内市面上存活的H5页面制作软件有超过50个，说是百家争鸣一点都不夸张。但用户量最多的当属iH5和Equb360两家，功能、技术水平等方面在国内都是屈指可数的。两者都向用户提供可视化的HTML5编辑框架，打开电脑端网页即做即用，但性能上却迥然不同。通过阅读这两家工具的相关资料，加上反复使用测试，以四大指标对比iH5和Equb360，重点在于帮助大家更客观地认识这两款H5页面制作软件：一、内容制作内容制作是使用H5页面制作软件的直接目的，这里把内容制作划分为两大评测模块：编辑方便度和功能覆盖度。编辑灵活程度越高，内容制作越高效；功能覆盖度越高，内容制作越有质量。（1）编辑灵活度iH5的对象管理系统完善，操作灵活度高，它封装了齐全的文档对象模型（DOM），提供的组件基本是对象类型的，比如全景容器、物理引擎、数据库等。它定义了所有HTML元素的对象和属性，以及相应的访问接口，这使不同对象间有了更多联动的可能。换句话说，它支持在对象树上自主获取、修改、添加或者删除对象，用户能对不同类型的对象组件进行灵活管理，同时支持PSD文件上传编译。Equb360的对象管理系统差强人意，操作灵活度低。它封装的是模块化（Modularization）模型，提供的组件框架格式基本是固定且相互割裂的，比如计时器、评论组件等。这就意味着，对组件的操作很大程度局限在修改内容上，基本丢失了H5交互的意义。受模型框架影响，并不支持PSD文件直接上传，而且当页面下多个对象重叠时，不能直接选取最底层对象，非得一层层挪开，这是最抓人的吧...（2）功能覆盖度按市面上H5在多媒体范畴的应用，摘取常用于H5设计的功能，以此作为凭据，对比两个H5页面制作软件的功能覆盖度——基于DOM封装开发的iH5组件功能数达到51个，比Equb360多出将近20个。另外，iH5的组件开发都基于交互基础，因此更能延伸出成千上万种复合型的交互可能，但模块导向的Equb360显然心有余而力不足。在上图中，表单类的基础多媒体组件服务，Equb360360跟iH5很接近，但在高级多媒体组件上，远不及iH5那么全能。特别是去年行业刚兴起的全景模式，iH5的功能开发可以说是紧追流行趋势。放眼数据应用组件，像输入框、文本框、数据提交这类底层的服务组件，Equb360虽然支持，但收费才开放似乎有些不合情理。二、学习成本对于初学者来说，会更倾向于选择学习成本低的H5页面制作软件，如果它的学习成本远高于学习期望值，那么注定会流失一部分没耐心的用户。按常理来说，H5页面制作软件的功能越丰富，学习成本越高。然而，iH5比Equb360多出20个功能，学习成本却远低于Equb360。这是为什么呢？（1）垂直化的视频教学iH5共收纳197个教学视频，内容垂直程度高，实用性高。教学视频涵括新手必学、进阶必备、特效使用、工具字典、案例学习五大类型。每个类型针对不同的功能，细分出不同的教学，方便用户各取所需、即学即用，比如想两分钟创建一个H5处女作，或者建立一个H5网站，都能在这里找到答案。Equb360共收纳48个教学视频，内容较发散，实用性低。教学视频只分为“初、中、高级教程”三种，学习路线下的教学视频纯粹是功能介绍，无实质性意义，用户看完还处于云里雾里的感觉。（1）系统化的教学闭环iH5除了教学视频，还设有线上直播课、线下学院课堂，形成从线上到线下的教学闭环。这系统化的教学闭环，简直是为了初学者量身定做——线上课程掌握基础功能，线下课程学习案例临摹，在最短时间内进阶成H5大神，毫无压力。Equb360除了教学视频，只剩下帮助文档和常见问题解答。想百分百掌握，还得靠自己连滚带爬地摸索...三、流量统计针对H5工具，流量分为两种：①网站活跃流量②H5案例流量数据前者反应网站有多少人浏览，即网站热度，观察网站首页的可视化数据可得；后者反应H5作品的有效数据统计，观察每个H5作品后台的数据统计结果可得。iH5跟Equb360在这两个维度上的对比尤为明显——（1）网站活跃流量iH5网站首页作品浏览量大部分超10万，网站热度高。iH5首页可以看成是一个完整的商业生态圈，因为iH5首页展示的作品基本属于优质营销类H5，吸引大批有深度营销需求的企业找设计师定制，形成“接单——合作——展示——接单”的闭环商业生态，创作技法越精湛的设计师，在iH5越吃香。Equb360网站首页作品浏览量最高2万，三位数浏览量占大多数。Equb360的日活跃数不低，但网站首页浏览量却低得离谱，这可能是它这款H5页面制作软件功能短板造成的，并不能吸引到有深度推广需求的企业，因此网站的流量增长只能依靠个人用户，作品曝光率低。（1）H5案例流量数据iH5的数据监测更精准，以每小时为单位监测。除了浏览量总量、各打开/转发方式占比，还涵括今日/昨日、最近一周、最近30天的数据对比。除此之外，iH5还向企业用户开放精准数据统计后台——H5VALUE，为单个案例分析地域流量、终端流量、浏览时段、传播指数、活跃用户量等细分化指标，也支持多个案例对比，在精细化数据面前，刷量原形毕露，剩下的只有真材实料的推广效果。Equb360的数据统计较粗略，只有数据总量。虽然在后台设有专门的“推广分析”栏目，但只统计了朋友圈、微信群、好友这三种H5传播方式的数据，统计效果是相形见绌的。四、付费相关让用户最头疼的莫过于H5页面制作软件的收费问题，明摆着一个功能，却需要付费才能使用，这是最纳闷的。以下针对个人和企业两种用户，将付费相关的评测分为三个方向——（1）模板商城的付费iH5针对不同场景，划分八大类共184个精美模板，价格低至1元/个，持续上新。Equb360可复制的模板只有14个，模板复用价值低，数量少，更新慢。（2）个人用户的付费iH5个人用户免费使用全部组件（51个），不限定作品创建数量。iH5所提供的全部功能，比如数据库、全景模式、物理引擎等高级交互功能，个人用户都能免费使用，没有任何收费门槛，只要有灵感，随意创作。Equb360个人用户需付费才能使用高级表单等组件，还限定10个作品创建数量。值得一提的是，它还规定储存空间为2GB，按10个作品来算，也就是说单个作品200MB，超过2MB的H5体量已经很大了，所以200M是个什么概念？这体验版的设定，有忽悠人付费的嫌疑。（3）企业用户的付费按账户类型分，iH5分为创业版、企业版、VIP企业版四类，VIP企业版（10账户）的年专属流量达500万次，其中去LOGO流量服务为1000元/10万次流量，微信授权费用为1元/月，无其他单独收取的费用。Equb360分为体验版、基础版、专业版、企业标准版、企业高级版（5账户，限制储存空间），分别增收年费最高19999元，套餐外单独收取费用的项目杂多，比如绑定独立域名需一次性支付2000元开通，案例导出另外收费。综上所述，这两个H5页面制作软件经过四个不同维度的综合评测，可以看出iH5在性能、服务上远高于Equb360。简单地说，Equb360适合低流量曝光的轻度营销，通过HTML5的跨平台特性，弱化交互的概念，强化模板式展示，凭借H5页面制作软件的壳，把传统离线PPT转换到手机上展示。而iH5以交互作为开发目的，让交互功能间的组合更具复合性和创造性，更适合高流量的深度营销，极大程度压缩开发成本的同时，干掉前端，取代程序员在H5页面开发中的角色。
采纳率：66%
一、Adobe Edge目前还处于预览阶段的Adobe Edge是用HTML5、CSS、JavaScript开发动态互动内容的设计工具。内容可以同时兼容移动设备和桌面电脑。Edge的一个重要功能是Web工具包界面，方便确保页面在不同浏览器中的架构一致性，此外Edge还将整合TypeKit这样的字体服务。动画和图形可以添加到HTML元素中，程序也能通过Edge自身的代码片段库或者JavaScript代码进行扩展。动画可以在独立的时间线上进行嵌套，还能实现互动功能。符合可以服用并通过API和代码片段控制。通过Edge设计的内容可以兼容iOS和Android设备，也可以运行在火狐、Chrome、Safari和IE9等主流浏览器。二、Adobe Dreamweaver CS6Adobe Dreamweaver CS6作为一个Web设计软件，提供了对HTML网站和移动程序的可视化编辑界面。其Fluid Grid排版系统整合CSS样式表功能，提供自适应版面的跨平台兼容性。开发者可以完全实现Web设计的可视化操作，无需为代码所困。用户不但还能在Live View中预览，还提供多屏幕预览功能。开发者可以通过MultiScreen预览面板查看HTML5内容的渲染效果。Live View通过WebKit渲染引擎支持HTML5。三、Adobe ColdFusion 10ColdFusion是用来开发企业Web程序的服务器端技术，通过Websockets、互动表单、视频和地理标签等HTML5技术创建富媒体用户体验。四、Sencha Architect 2在开发移动和桌面应用的工具中，Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发Sencha Touch2和Ext JS4 JavaScript应用，并实时预览。五、Sencha Touch 2Sencha Touch2是移动应用框架，也被看作是Sencha的HTML5平台。开发者可以用它开发面向iOS、Android和Blackberry、Kindle Fire等多种平台的移动应用。六、Dojo Foundation Maqetta来自于IBM的一个项目，Dojo Foundation Maqetta是为桌面和移动设备开发HTML5应用的开源工具，支持在浏览器中查看HTML5界面。用户体验设计师可以通过拖放组装UI样板七、微软Visual Studio 2010 ServicePack 1虽然一开始并不支持HTML5，但微软在2011年三月发布的Visual Studio 2010 SP1中提供了IntelliSense，追加了针对HTML5的一些元素。八、JetBrains WebStorm 4.0作为拥有HTML编辑器的JavaScript集成开发环境，WebStorm4.0提供了开发web应用的HTML5样板。开发者可以在创建HTML文档时可获得对HTML5文件的支持。例如砍伐者键入。开发者还可以在chrome浏览器中实时预览HTML文档。九、Google Web Toolkit该开发工具用于开发浏览器应用，但库中支持很多HTML5功能。包括对客户端或web存储的支持。其他HTML5功能还包括支持Canvas可视化，以及音频和视频widget。十、DCloud HBuilderHBuilder是当前最快的HTML开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛。
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。使用Flexible实现手淘H5页面的终端适配 - WEB前端 - 伯乐在线
& 使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？
那么趁此Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界中能过得更轻松。
拿一个双11的Mobile页面来做案例，比如你实现一个类似下图的一个H5页面：
目标很清晰，就是做一个这样的H5页面。
虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：
点击查看更多终端设备的参数。
再来看看手淘H5要适配的终端设备数据：
看到这些数据，是否死的心都有了，或者说为此捏了一把汗出来。
手淘团队适配协作模式
早期移动端开发，对于终端设备适配问题只属于Android系列，只不过很多设计师常常忽略Android适配问题，只出一套iOS平台设计稿。但随着iPhone6，iPhone6+的出现，从此终端适配问题不再是Android系列了，也从这个时候让移动端适配全面进入到“杂屏”时代。
上图来自于
为了应对这多么的终端设备，设计师和前端开发之间又应该采用什么协作模式？或许大家对此也非常感兴趣。
而整个手淘设计师和前端开发的适配协作基本思路是：
选择一种尺寸作为设计和开发基准
定义一套适配规则，自动适配剩下的两种尺寸(其实不仅这两种，你懂的)
特殊适配效果给出设计效果
还是上一张图吧，因为一图胜过千言万语：
在此也不做更多的阐述。在手淘的设计师和前端开发协作过程中：手淘设计师常选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变)。前端开发人员通过一套适配规则自动适配到其他的尺寸。
根据上面所说的，设计师给我们的设计图是一个750px * 1600px的页面：
前端开发完成终端适配方案
拿到设计师给的设计图之后，剩下的事情是前端开发人员的事了。而手淘经过多年的摸索和实战，总结了一套移动端适配的方案——。
这种方案具体在实际开发中如何使用，暂时先卖个关子，在继续详细的开发实施之前，我们要先了解一些基本概念。
一些基本概念
在进行具体实战之前，首先得了解下面这些基本概念(术语)：
视窗 viewport
简单的理解，viewport是严格等于浏览器的窗口。在桌面浏览器中，viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。
移动端的viewport太窄，为了能更好为CSS布局服务，所以提供了两个viewport:虚拟的viewportvisualviewport和布局的viewportlayoutviewport。
George Cummins在Stack Overflow上。
而事实上viewport是一个很复杂的知识点，上面的简单描述可能无法帮助你更好的理解viewport，而你又想对此做更深的了解，可以阅读。
物理像素(physical pixel)
物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。
设备独立像素(density-independent pixel)
设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。
CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。
屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。
设备像素比(device pixel ratio)
设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：
设备像素比 ＝ 物理像素 / 设备独立像素
设备像素比 ＝ 物理像素 / 设备独立像素
在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr。而在CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。
缩合上述的几个概念，用一张图来解释：
众所周知，iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素；而其dpr为2，根据上面公式，我们可以很轻松得知其物理像素为750pt * 1334pt。
如下图所示，某元素的CSS样式：
height: 2px；
width: 2px;height: 2px；
在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。
有关于更多的介绍可以详细了解。
看到这里，你能感觉到，在移动端时代屏幕适配除了Layout之外，还要考虑到图片的适配，因为其直接影响到页面显示质量，对于如何实现图片适配，再此不做过多详细阐述。这里盗用了根据翻译的一张信息图：
&meta&标签有很多种，而这里要着重说的是viewport的meta标签，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。在开发移动端页面，我们需要设置meta标签如下：
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&
代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。
留个悬念，因为后面的解决方案中需要重度依赖meta标签。
CSS单位rem
在规范中是这样描述rem的:
font size of the root element.
简单的理解，rem就是相对于根元素&html&的font-size来做计算。而我们的方案中使用rem单位，是能轻易的根据&html&的font-size计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。
前端实现方案
了解了前面一些相关概念之后，接下来我们来看实际解决方案。在整个手淘团队，我们有一个名叫的库，而这个库就是用来解决H5页面终端适配的。
lib-flexible是什么？
是一个制作H5适配的开源库，可以下载相关文件，获取需要的JavaScript和CSS文件。
当然你可以直接使用阿里CDN：
JavaScript
&script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"&&/script&
&script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"&&/script&
将代码中的{{version}}换成对应的版本号0.3.4。
库的使用方法非常的简单，只需要在Web页面的&head&&/head&中添加对应的flexible_css.js,flexible.js文件：
第一种方法是将文件下载到你的项目中，然后通过相对路径添加:
&script src="build/flexible_css.debug.js"&&/script&
&script src="build/flexible.debug.js"&&/script&
&script src="build/flexible_css.debug.js"&&/script&&script src="build/flexible.debug.js"&&/script&
或者直接加载阿里CDN的文件：
&script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"&&/script&
&script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"&&/script&
另外强烈建议对JS做内敛处理，在所有资源加载之前执行这个JS。执行这个JS后，会在&html&元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px。
如此一来，页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果。
除此之外，在引入需要执行的JS之前，可以手动设置meta来控制dpr值，如：
&meta name="flexible" content="initial-dpr=2" /&
&meta name="flexible" content="initial-dpr=2" /&
其中initial-dpr会把dpr强制设置为给定的值。如果手动设置了dpr之后，不管设备是多少的dpr，都会强制认为其dpr是你设置的值。在此不建议手动强制设置dpr，因为在Flexible中，只对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1。
JavaScript
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelR
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio &= 3 && (!dpr || dpr &= 3)) {
} else if (devicePixelRatio &= 2 && (!dpr || dpr &= 2)){
// 其他设备下，仍旧使用1倍的方案
scale = 1 /
12345678910111213141516171819
if (!dpr && !scale) {&&&&var isAndroid = win.navigator.appVersion.match(/android/gi);&&&&var isIPhone = win.navigator.appVersion.match(/iphone/gi);&&&&var devicePixelRatio = win.devicePixelRatio;&&&&if (isIPhone) {&&&&&&&&// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案&&&&&&&&if (devicePixelRatio &= 3 && (!dpr || dpr &= 3)) {&&&&&&&&&&&&&&&&&&&&&&&&&&&&dpr = 3;&&&&&&&&} else if (devicePixelRatio &= 2 && (!dpr || dpr &= 2)){&&&&&&&&&&&&dpr = 2;&&&&&&&&} else {&&&&&&&&&&&&dpr = 1;&&&&&&&&}&&&&} else {&&&&&&&&// 其他设备下，仍旧使用1倍的方案&&&&&&&&dpr = 1;&&&&}&&&&scale = 1 / dpr;}
flexible的实质
flexible实际上就是能过JS来动态改写meta标签，代码类似这样：
JavaScript
var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
documen.write(wrap.innerHTML);
1234567891011
var metaEl = doc.createElement('meta');var scale = isRetina ? 0.5:1;metaEl.setAttribute('name', 'viewport');metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');if (docEl.firstElementChild) {&&&&document.documentElement.firstElementChild.appendChild(metaEl);} else {&&&&var wrap = doc.createElement('div');&&&&wrap.appendChild(metaEl);&&&&documen.write(wrap.innerHTML);}
事实上他做了这几样事情：
动态改写&meta&标签
给&html&元素添加data-dpr属性，并且动态改写data-dpr的值
给&html&元素添加font-size属性，并且动态改写font-size的值
了解Flexible相关的知识之后，咱们回到文章开头。我们的目标是制作一个适配各终端的H5页面。别的不多说，动手才能丰衣足食。
创建HTML模板
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&meta content="yes" name="apple-mobile-web-app-capable"&
&meta content="yes" name="apple-touch-fullscreen"&
&meta content="telephone=no,email=no" name="format-detection"&
&script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"&&/script&
&link rel="apple-touch-icon" href="favicon.png"&
&link rel="Shortcut Icon" href="favicon.png" type="image/x-icon"&
&title&再来一波&/title&
&!-- 页面结构写在这里 --&
12345678910111213141516
&!DOCTYPE html&&html lang="en"&&&&&&head&&&&&&&&&&meta charset="utf-8"&&&&&&&&&&meta content="yes" name="apple-mobile-web-app-capable"&&&&&&&&&&meta content="yes" name="apple-touch-fullscreen"&&&&&&&&&&meta content="telephone=no,email=no" name="format-detection"&&&&&&&&&&script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"&&/script&&&&&&&&&&link rel="apple-touch-icon" href="favicon.png"&&&&&&&&&&link rel="Shortcut Icon" href="favicon.png" type="image/x-icon"&&&&&&&&&&title&再来一波&/title&&&&&&/head&&&&&&body&&&&&&&&&&!-- 页面结构写在这里 --&&&&&&/body&&/html&
正如前面所介绍的一样，首先加载了Flexible所需的配置：
&script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"&&/script&
&script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"&&/script&
这个时候可以根据设计的图需求，在HTML文档的&body&&/body&中添加对应的HTML结构，比如：
&div class="item-section" data-repeat="sections"&
&div class="item-section_header"&
&h2&&img src="{brannerImag}" alt=""&&/h2&
&li data-repeat="items" class="flag" role="link" href="{itemLink}"&
&a class="figure flag-item" href="{itemLink}"&
&img src="{imgSrc}" alt=""&
&div class="figcaption flag-item"&
&div class="flag-title"&&a href="{itemLink}" title=""&{poductName}&/a&&/div&
&div class="flag-price"&&span&双11价&/span&&strong&?{price}&/strong&&small&({preferential})&/small&&/div&
&div class="flag-type"&{activityType}&/div&
&a class="flag-btn" href="{shopLink}"&{activeName}&/a&
123456789101112131415161718
&div class="item-section" data-repeat="sections"&&&&&&div class="item-section_header"&&&&&&&&&&h2&&img src="{brannerImag}" alt=""&&/h2&&&&&&/div&&&&&&ul&&&&&&&&&&li data-repeat="items" class="flag" role="link" href="{itemLink}"&&&&&&&&&&&&&&a class="figure flag-item" href="{itemLink}"&&&&&&&&&&&&&&&&&&img src="{imgSrc}" alt=""&&&&&&&&&&&&&&/a&&&&&&&&&&&&&&div class="figcaption flag-item"&&&&&&&&&&&&&&&&&&div class="flag-title"&&a href="{itemLink}" title=""&{poductName}&/a&&/div&&&&&&&&&&&&&&&&&&div class="flag-price"&&span&双11价&/span&&strong&?{price}&/strong&&small&({preferential})&/small&&/div&&&&&&&&&&&&&&&&&&div class="flag-type"&{activityType}&/div&&&&&&&&&&&&&&&&&&a class="flag-btn" href="{shopLink}"&{activeName}&/a&&&&&&&&&&&&&&/div&&&&&&&&&&/li&&&&&&/ul&&/div&
这仅是一个示例文档，大家可以根据自己风格写模板。
为了能更好的测试页面，给其配置一点假数据：
JavaScript
//define data
var pageData = {
sections:[{
"brannerImag":"http://xxx.cdn.com/B1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg",
"itemLink": "##",
"imgSrc": "https://placeimg.com/350/350/people/grayscale",
"poductName":"Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093",
"price": "299.06",
"preferential": "满400减100",
"activityType": "1小时内热卖5885件",
"shopLink":"##",
"activeName": "马上抢！"
123456789101112131415161718
//define datavar pageData = {&&&&sections:[{&&&&&&&&"brannerImag":"http://xxx.cdn.com/B1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg",&&&&&&&&items:[{&&&&&&&&&&&&"itemLink": "##",&&&&&&&&&&&&"imgSrc": "https://placeimg.com/350/350/people/grayscale",&&&&&&&&&&&&"poductName":"Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093",&&&&&&&&&&&&"price": "299.06",&&&&&&&&&&&&"preferential": "满400减100",&&&&&&&&&&&&"activityType": "1小时内热卖5885件",&&&&&&&&&&&&"shopLink":"##",&&&&&&&&&&&&"activeName": "马上抢！"&&&&&&&&}&&&&&&&&&&&&....&&&&&&&&}]&&&&}]}
接下来的工作就是美化工作了。在写具体样式之前，有几个点需要先了解一下。
把视觉稿中的px转换成rem
读到这里，大家应该都知道，我们接下来要做的事情，就是如何把视觉稿中的px转换成rem。在此花点时间解释一下。
首先，目前日常工作当中，视觉设计师给到前端开发人员手中的视觉稿尺寸一般是基于640px、750px以及1125px宽度为准。甚至为什么？大家应该懂的（考虑Retina屏）。
正如文章开头显示的示例设计稿，他就是一张以750px为基础设计的。那么问题来了，我们如何将设计稿中的各元素的px转换成rem。
我厂的视觉设计师想得还是很周到的，会帮你把相关的信息在视觉稿上标注出来。
目前Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：
1rem = 75px
1a&& = 7.5px1rem = 75px
那么我们这个示例的稿子就分成了10a，也就是整个宽度为10rem，&html&对应的font-size为75px：
这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。
如何快速计算
在实际生产当中，如果每一次计算px转换rem，或许会觉得非常麻烦，或许直接影响大家平时的开发效率。为了能让大家更快进行转换，我们团队内的同学各施所长，为px转换rem写了各式各样的小工具。
是一个CSS的px值转rem值的Sublime Text3自动完成插件。这个插件是由编写。先来看看插件的效果：
有关于CSSREM如何安装、配置教程可以。
除了使用编辑器的插件之外，还可以使用CSS的处理器来帮助大家处理。比如说Sass、LESS以及PostCSS这样的处理器。我们简单来看两个示例。
使用的同学，可以使用Sass的函数、混合宏这些功能来实现：
@function px2em($px, $base-font-size: 16px) {
&a href='http://www.jobbole.com/members/jinyi7016'&@if&/a& (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return px2em($px + 0px); // That may fail.
} @else if (unit($px) == em) {
@return ($px / $base-font-size) * 1
@function px2em($px, $base-font-size: 16px) {&&&&&a href='http://www.jobbole.com/members/jinyi7016'&@if&/a& (unitless($px)) {&&&&&&&&@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";&&&&&&&&@return px2em($px + 0px); // That may fail.&&&&} @else if (unit($px) == em) {&&&&&&&&@return $px;&&&&}&&&&@return ($px / $base-font-size) * 1em;}
除了使用Sass函数外，还可以使用Sass的混合宏：
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
//Conver the baseline into rems
$baseline-rem: $baseline-px / 1rem * 1;
//Print the first line in pixel values
&a href='http://www.jobbole.com/members/jinyi7016'&@if&/a& $support-for-ie {
#{$property}: $px-
//if there is only one (numeric) value, return the property/value line for it.
&a href='http://www.jobbole.com/members/jinyi7016'&@if&/a& type-of($px-values) == "number"{
#{$property}: $px-values / $baseline-
//Create an empty list that we can dump values into
$rem-values:();
@each $value in $px-values{
// If the value is zero or not a number, return it
&a href='http://www.jobbole.com/members/jinyi7016'&@if&/a& $value == 0 or type-of($value) != "number"{
$rem-values: append($rem-values, $value / $baseline-rem);
// Return the property and its list of converted values
#{$property}: $rem-
123456789101112131415161718192021222324
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){&&&&//Conver the baseline into rems&&&&$baseline-rem: $baseline-px / 1rem * 1;&&&&//Print the first line in pixel values&&&&&a href='http://www.jobbole.com/members/jinyi7016'&@if&/a& $support-for-ie {&&&&&&&&#{$property}: $px-values;&&&&}&&&&//if there is only one (numeric) value, return the property/value line for it.&&&&&a href='http://www.jobbole.com/members/jinyi7016'&@if&/a& type-of($px-values) == "number"{&&&&&&&&#{$property}: $px-values / $baseline-rem;&&&&}&&&&@else {&&&&&&&&//Create an empty list that we can dump values into&&&&&&&&$rem-values:();&&&&&&&&@each $value in $px-values{&&&&&&&&&&&&// If the value is zero or not a number, return it&&&&&&&&&&&&&a href='http://www.jobbole.com/members/jinyi7016'&@if&/a& $value == 0 or type-of($value) != "number"{&&&&&&&&&&&&&&&&$rem-values: append($rem-values, $value / $baseline-rem);&&&&&&&&&&&&}&&&&&&&&}&&&&&&&&// Return the property and its list of converted values&&&&&&&&#{$property}: $rem-values;&&&&}}
有关于更多的介绍，可以进行了解。
PostCSS(px2rem)
除了Sass这样的CSS处理器这外，我们团队的同学还开发了一款npm的工具。安装好之后，可以在项目中直接使用。也可以使用。使用PostCSS插件：
JavaScript
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var px2rem = require('postcss-px2rem');
gulp.task('default', function() {
var processors = [px2rem({remUnit: 75})];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
12345678910
var gulp = require('gulp');var postcss = require('gulp-postcss');var px2rem = require('postcss-px2rem');&gulp.task('default', function() {&&&&var processors = [px2rem({remUnit: 75})];&&&&return gulp.src('./src/*.css')&&&&&&&&.pipe(postcss(processors))&&&&&&&&.pipe(gulp.dest('./dest'));});
除了在Gulp中配置外，还可以使用其他的配置方式，详细的介绍可以进行了解。
配置完成之后，在实际使用时，你只要像下面这样使用：
.selector {
width: 150
height: 64 /*px*/
font-size: 28 /*px*/
border: 1px solid # /*no*/
.selector {&&&&width: 150px;&&&&height: 64px; /*px*/&&&&font-size: 28px; /*px*/&&&&border: 1px solid #ddd; /*no*/}
px2rem处理之后将会变成：
.selector {
border: 1px solid #
[data-dpr="1"] .selector {
height: 32
font-size: 14
[data-dpr="2"] .selector {
height: 64
font-size: 28
[data-dpr="3"] .selector {
height: 96
font-size: 42
12345678910111213141516
.selector {&&&&width: 2rem;&&&&border: 1px solid #ddd;}[data-dpr="1"] .selector {&&&&height: 32px;&&&&font-size: 14px;}[data-dpr="2"] .selector {&&&&height: 64px;&&&&font-size: 28px;}[data-dpr="3"] .selector {&&&&height: 96px;&&&&font-size: 42px;}
在整个开发中有了这些工具之后，完全不用担心px值转rem值影响开发效率。
字号不使用rem
前面大家都见证了如何使用rem来完成H5适配。那么文本又将如何处理适配。是不是也通过rem来做自动适配。
显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。
如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。
.selector {
border: 1px solid #
[data-dpr="1"] .selector {
height: 32
font-size: 14
[data-dpr="2"] .selector {
height: 64
font-size: 28
[data-dpr="3"] .selector {
height: 96
font-size: 42
12345678910111213141516
.selector {&&&&width: 2rem;&&&&border: 1px solid #ddd;}[data-dpr="1"] .selector {&&&&height: 32px;&&&&font-size: 14px;}[data-dpr="2"] .selector {&&&&height: 64px;&&&&font-size: 28px;}[data-dpr="3"] .selector {&&&&height: 96px;&&&&font-size: 42px;}
为了能更好的利于开发，在实际开发中，我们可以定制一个这样的Sass混合宏：
@mixin font-dpr($font-size){
font-size: $font-
[data-dpr="2"] & {
font-size: $font-size * 2;
[data-dpr="3"] & {
font-size: $font-size * 3;
1234567891011
@mixin font-dpr($font-size){&&&&font-size: $font-size;&&&&&[data-dpr="2"] & {&&&&&&&&font-size: $font-size * 2;&&&&}&&&&&[data-dpr="3"] & {&&&&&&&&font-size: $font-size * 3;&&&&}}
有了这样的混合宏之后，在开发中可以直接这样使用：
&a href='http://www.jobbole.com/members/sanjiaomaohero'&@include&/a& font-dpr(16px);
&a href='http://www.jobbole.com/members/sanjiaomaohero'&@include&/a& font-dpr(16px);
当然这只是针对于描述性的文本，比如说段落文本。但有的时候文本的字号也需要分场景的，比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景，完全可以使用rem给slogan做计量单位。
本来想把这个页面的用到的CSS(或SCSS)贴出来，但考虑篇幅过长，而且这么简单的页面，我想大家也能轻而易举搞定。所以就省略了。权当是给大家留的一个作业吧，感兴趣的可以试试Flexible能否帮你快速完成H5页面终端适配。
最后来看看真机上显示的效果吧。我截了两种设备下的效果：
其实H5适配的方案有很多种，网上有关于这方面的教程也非常的多。不管哪种方法，都有其自己的优势和劣势。而本文主要介绍的是如何使用Flexible这样的一库来完成H5页面的终端适配。为什么推荐使用Flexible库来做H5页面的终端设备适配呢？主要因为这个库在手淘已经使用了近一年，而且已达到了较为稳定的状态。除此之外，你不需要考虑如何对元素进行折算，可以根据对应的视觉稿，直接切入。
当然，如果您有更好的H5页面终端适配方案，欢迎在下面的评论中与我们一起分享。如果您在使用这个库时，碰到任何问题，都可以在Github给我们提。我们团队会努力解决相关需Issues。