09月22日, 2014 217次
初次接触移动端，绝对单位的使用自己接触移动端开发是在2012年，那时候比较新潮的是制作WEB APP。什么是WEB APP呢？所谓的WEB APP就是用网页模拟出原生语言（如iOS）开发的APP交互效果。虽然在表现层面上，HTML5表现突出，但不得不承认的是，在系统性能层面，WEB APP明显要差于原生应用（即Native APP）。这也就使得WEB APP这条路暂时性的被堵住了。于是，移动端的开发方向逐渐向移动端网页倾斜。对于PC端，我们一直使用的是px（像素）进行代码的书写，但是到了移动端，需要面临不同的分辨率。在2012年的时候，自己和团队成员在写移动端的时候，由于是初次接触，还是在使用px（像素）作为单位。因为在2012年的时候，绝大多数的手机的屏幕大小都是320*480分辨率，所以，即便是使用像素作为单位进行移动端网页开发也是完全可以的。关于视口的知识，可点击查看——移动端H5知识-视口viewport横向百分比，纵向像素值随着移动端的继续发展，在2012年9月，iPhone5上市，开始引领“特殊分辨率”的发展，于是，320*480分辨率的手机屏幕在整个手机市场当中占有的份额越来越少，各种各样的分辨率如雨后春笋般冒了出来。此时我们再进行固定像素进行开发明显是不明智的。于是，我们开始采用百分比（相对度量单位）进行盒模型横向属性（width、左右内边距、左右外边距）的制作，使用em（相对度量单位）实现文字的处理。但盒模型纵向上还是使用固定像素作为单位。但是，这种操作导致了一个问题——主要表现在img标签的处理上。对于图片来说，只需要设置横向百分比，纵向会自动等比例缩放。在列表页以及内容页还好，毕竟内容是自动撑开父级高度的；但是在首页或者二级页，但凡涉及到父级元素高度固定的盒模型，里面的img就会出现变形（压缩或者拉伸）的问题。这个问题也是困扰了自己许久，但是一直没有找到一个非常好的解决办法。响应式布局当自己还在纠结img的处理时，2013年，在北京流行起了一种新的技术——响应式布局。通过媒体查询，针对不同大小分辨率的设备，设置不同的样式。应该说，对移动端页面的开发帮助不大，原因在于，响应式的出现主要是因为我们希望一段代码能够同时适配PC端、平板电脑以及手机。由于三种平台的样式以及用户体验应该是迥然不同的，那么此时，我们就需要有“断点”，在不同位置，有不同的样式，而在两个“断点”之间的样式，则使用相对单位做“渐变性的过渡”。应该说，响应式布局解决了典型的屏幕像素不同样式的问题，但是却依旧搞定不了之前的那个问题。关于CSS3媒体查询的知识，可点击查看——移动端H5知识-CSS3媒体查询横向纵向均百分比在横向百分比，纵向像素值的方法无效时，自己能够想到的就是纵向也设置为百分比了，但是却发现，盒模型属性在纵向上的一些设置上是存在问题的，如padding-top/bottom、margin-top/bottom等。而文本属性中line-height在设置百分比时也并e799bee5baa6e79fa5e98193e78988e69d8331333361323535不是按照当前元素高度计算的。于是，横纵向均设置为百分比的方法就破灭了~关于盒模型的一些问题以及背景的合理使用，可点击查看——移动端H5知识-百变盒模型以及移动端H5知识-背景的妙用横向纵向rem随着HTML5的发展，除了原来的em单位，又新增了rem单位。这两个单位都是相对单位。1em表示的是当前元素一个字体大小的尺寸；而1rem，也表示的是一个字体大小的尺寸，但是是针对html标签进行计算的。相比之下，rem的计算起来要简单很多。于是，自己尝试用rem解决横向以及纵向的设置，舍弃掉了百分比，发现还是挺不错的，算是兼容了绝大多数机型和浏览器。之后，在使用一款华为手机进行测试的时候，发现并不支持横向的rem。于是，又需要想办法啦~~~正解 —— 横向百分比，纵向rem针对华为手机，我尝试了横向百分比，发现还是能够支持的，于是就折中了一下，横向使用百分比进行控制，纵向使用rem作为单位。此时能够实现所有浏览器的兼容。优化正解 —— 横向百分比，纵向rem在横向使用百分比，纵向使用rem时，会由于计算产生一定的误差，于是，运用学习过的一些HTML5技术，进行移动端页面的优化，例如，使用CSS3的盒阴影替换掉边框。而对于rem，在计算中通常是存在一定的字体误差的（会计算出小数点），此时正好接触了一下淘宝的移动端页面，看到了一个不错的JS框架——flexible.js，通过这个框架对页面进行处理，能够防止小数点的出现。关于flexible.js框架的具体用法，可点击查看——移动端H5知识-处理rem小数点 flexible.js优化正解2 —— 任性的使用固定像素来实现上个月月初，发现网易移动端的制作方法有些特殊，查看代码时发现，网易采用了固定像素进行书写，而通过MetaHandler.js进行了页面的控制。最近尝试了一下，感觉还是挺不错的，兼容也是比较好的，不失为一种好方法。 追问 感谢您的回答，但我的需求是在线浏览编辑word、ppt等办公软件 在不使用插件的情况下 用h5+jq开发 谢谢-_- 本回答由提问者推荐
和其它的编辑器一样，用代码写
可以在网上直接将word文件转换成h5格式，通过软件九 云 图 就可以制作了。
可以用记事本写
我们一直在开发这方面的h5 ,可以聊聊 追问 哪个h5
display: block; -webkit-user-modify: read-write-plaintext-only}在css里边找zd到.x-input-el把下边-webkit-user-modify: read-write-plaintext-only这句回添加上答，就ok了。 本回答被网友采纳
H5是个标记语言，是依托在浏览器上的。离开浏览器什么都做不了的。PPT能插入的是单独文件，像FLASH，GIF或视频等。所以你说的这个插入是不成的
插入ppt，你都用了h5了，怎么还不懂h5的心啊？h5都抛弃zhidaoflash了。想在h5中插入ppt，word等这些，必须使用php,java,等语言读取文件专，生成纯文本，返回给html页面属。可以百度搜索 php,java读取ppt 本回答被提问者和网友采纳
有一种办法，就是通过OneDriver实现，ppt上传OneDriver，使用共享可以生成嵌入代码，将<iframe>嵌入代码放到页面上也是可以的。
目前找到的几种方式：1.像以前的百度文库那样，先转换成flash，然后放在网页上。说明：使用软件OpenOffice/LibreOffice，swftools。优点：在国内，由于Flash安装量很大，而且很多人用IE和Chrome内核的浏览器，所以是可以查看的。缺点：OpenOffice/LibreOffice转换的结果可能会丢失格式/排版（我没试过所以不知道会不会），7a686964616fe58685e5aeb931333363363466而且比较耗服务器资源，如果浏览器没装Flash就没法查看文档了，尤其是移动端。2.转换成PDF，然后用Mozilla的pdf.js查看。说明：转换成PDF的方法可以用OpenOffice/LibreOffice，也可以用七牛的第三方服务“文档转换”（由亿方云提供）。优点：如果是把文件存放在七牛云，用在线的服务会比较有保障，加载速度也快。缺点：收费，不过费用很低廉，pdf.js可能比较大，加载相对慢点，放到七牛上面会好些，对移动端支持不好。3.转换成HTML，像现在的百度文库那样。说明：使用PHPOffice和PDFtoHTML将文档转换成HTML直接在浏览器输出，类似现在的百度文库。优点：浏览器无需安装任何插件，也不用担心兼容性问题，还支持移动端。缺点：可能会丢失格式，而且用户可以直接拷贝文档内容，如果是扣积分下载的话，可能达不到目的。
在线查看office文件这种功能应该是需要插件支持的。
仿百度文库的？可以用FlexPaper+swfTools在页面打开直接放个地址链接就可以 追问 有链接么？详细点可以么 追答 CSDN http://blog.csdn.net/hil2000/article/details/8459940 本回答被提问者和网友采纳
这种问题你为什么不直接百度呢？百度上例子还少了吗？ 追问 查了没有想要的