移动端web头部header通用写法
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
- 2016-06-13 08:42:121047검색
移动端web头部header通用写法
1.head部分 通用写法；网上也有，不过有的可有有的可无；原理是兼容IOS透明栏目等问题，再者就是viewport（关键）<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li><head lang="en"><br /></li><li><meta charset="UTF-8"><br /></li><li><br /></li><li><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><br /></li><li><br /></li><li><meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><br /></li><li><br /></li><li><meta name="apple-mobile-web-app-title" content=""><br /></li><li><br /></li><li><meta name="apple-mobile-web-app-capable" content="yes"/><br /></li><li><br /></li><li><meta name="apple-mobile-web-app-status-bar-style" content="black"/><br /></li><li><br /></li><li><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"><br /></li><li><br /></li><li><meta name="format-detection" content="telphone=no, email=no"/><br /></li><li><br /></li><li><meta http-equiv="Pragma" content="no-cache"><br /></li><li><meta http-equiv="Cache-Control" content="no-cache"><br /></li><li><meta http-equiv="Expires" content="0"><br /></li><li><title>web前端-马乐</title><br /></li><li></head></li></ol>
2.引入引用flexible.js；这是淘宝的兼容解决方案，最大到5.5寸；用的时候把viewport去掉，flexible.js会动态添加；
主要讲一下用法，网上的讲的太细却使很多网友没懂；flexible.js只有4K，作用是：
1.动态改写 标签
2.给 元素添加 data-dpr 属性，并且动态改写 data-dpr 的值
3.给 元素添加 font-size 属性，并且动态改写 font-size 的值
接下来就可以用了，若你的图示640的 就设置1rem=64px如果是750的就设置1rem=75px；比如320X240的banner，那么就换算成5remX3.75rem(640为例)
下载地址http://www.w3cfuns.com/misc.php?mod=attach&genre=file&aid=1cec8fecbbaf2bf347f2a749486a6525
参考博文：http://www.w3cfuns.com/notes/20813/fecbb840a2574cf712a8625f88a7ab3a.html
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：微信公众号天气查询接口实例，公众天气查询实例다음 기사：PHP抽象类，php抽象