@windchimes
2018-03-27T03:41:34.000000Z
字数 2457
阅读 310
手机兼容性
<!doctype html><html class="no-js" lang="zh"><head><meta charset="utf-8"><meta name="format-detection" content="telephone=no" /><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge"><style>body,html{display: -webkit-box;-webkit-box-align: center;-webkit-box-orient: vertical;padding: 0px;margin: 0px;}img {width: 7.5rem;}</style></head><body><script>(function (doc, win) {var docEl = doc.documentElement,//方向改变事件resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),recalc = function () {var clientWidth = docEl.clientWidth;var clientHeight = docEl.clientHeight;if (!clientWidth) return;if(clientWidth >= 750 ){clientWidth = 750;doc.body.style.width = 750 + 'px';}else{doc.body.style.width = clientWidth + 'px';}docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';docEl.dataset.percent = 100 * (clientWidth / 750);docEl.dataset.width = clientWidth;docEl.dataset.height = clientHeight;};recalc();if (isIOS) {doc.documentElement.classList.add('iosx' + win.devicePixelRatio);}win.addEventListener(resizeEvt, recalc, false);})(document, window);</script><div><a href="http://3g.163.com/links/7314"><img src="http://cms-bucket.nosdn.127.net/105e255267324e05bbb1521c18e2359c20160902115412.png"></a></div></body></html>
理解：
rem：根元素（html）的字体大小，所谓的rem就是以元素的font-size作为单位的相对单位。如果根元素的font-size是100px，那么1rem就是100px。此处font-size为100px，那么1rem则为100px
注意：懒得转换rem和px时，可以用sublime text的插件cssrem https://github.com/flashlizi/cssrem
对应教程：http://www.cnblogs.com/wzls/p/5381478.html
http://www.cnblogs.com/beiz/p/5666477.html
<!doctype html><html class="no-js" lang="zh"><head><meta charset="utf-8"><meta name="format-detection" content="telephone=no" /><meta name="description" content=""><meta name="keywords" content=""><meta content="target-densitydpi=device-dpi,width=640" name="viewport"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge"><style>body,html{display: -webkit-box;-webkit-box-align: center;-webkit-box-orient: vertical;padding: 0px;margin: 0px;}img {width: 100%;}</style></head><body><div><a href="http://3g.163.com/links/7314"><img src="http://cms-bucket.nosdn.127.net/105e255267324e05bbb1521c18e2359c20160902115412.png"></a></div></body></html>
注意：
优点：简单快捷，能够随视觉稿的尺寸变化修改为640或者750
缺点：1）此种方法较老，且被iframe嵌套时适配样式会失效
2）width初始必须设置为100%，否则不能适配各种手机