本文主要是介绍一个网页适应多种不同屏幕的H5开发，rem的终极用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
先普及一下知识：
html原生单位rem 即font size of the root element（相对于根元素font-size而变化的单位），
em是相对于其设置了font-size的父元素（如果直接父元素都没有设置，就一级一级往上找，如果没找到，就会采用默认值，其它都与rem的特性一样）。
适用范围：在手机端使用，因为手机中都是applewebkit内核（此时html的fontSize 不能小于12px，因其fontSize默认最小是12px这个可以设置）,1rem在火狐Gecko内核和IE（trident7.0内核）中表现相同，但并不等于applewebkit上显示的大小。
默认情况下不给html根元素设置font-size,则1rem会有默认值：
chrome,IE 9-11,Firefox: 1rem = 16px; IE8不支持rem
如果设置html根元素的font-size，由于浏览器的默认字体最小是12px,所以，
html的font-size:<12 则页面所有元素：1rem = 12px;
html的font-size:>=13 则页面所有元素：1rem = 13px;
原理：以720px（最大值）宽的手机为例，设它的fontSize:100px）为基准，通过控制html的fontSize(即宽每减小1px,相应的fontSize也减少)，就可以实现720~320宽的手机都展示一样的显示效果，
1.HTML
单位用rem，包括字体和所有长宽高单位都用rem, 在chrome中，当fontSize > 12px 时，1px of html === 1rem of any elements
下面设置viewport非常重要，没有的话$(window).width()恒等于980px.
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">css代码：
html{font-size:100px;
}
*{margin:0;padding:0;}
.og-layauto{width:auto;margin:0 auto;max-width:720px!important;background: green;
}
2.js代码：
jQuery写法：
$(function(){var winW = $(window).width();$('html').css({'fontSize':100 - (720-winW)* 0.1389 + 'px'});
})原生写法，增加了window.onresize = fn,如下所示：
window.onload = function(){initSize();window.onresize = function(){throttle(initSize,100);}function initSize(){var handleHtml = document.getElementById("html1");
//ie8 不支持window.innerWidth ie9+支持. 其余两个 ie8 ie8+ chrome firefox都兼容 var handle_windowW = window.innerWidth || document.documentElement.width || document.body.width;if(handle_windowW > 720){handle_windowW = 720;}handleHtml.style.fontSize = 100 - ( 720 - handle_windowW ) * 0.1389 + "px";
// handleHtml.style.cssText = "font-size:100px!important"; // 会将目标元素的所有样式清空，且设置为=右边的值。}function throttle(fn,time,context){clearTimeout(fn.t1);fn.t1 = setTimeout(function () {fn.call(context);},time);}
}
// 以下是最大兼容ipadpro1024px宽屏的算法，向下兼容时要用基准尺寸减去改变的尺寸。
问题 1 ：假如我要在针对iphone6 （375X667）上做开发， UI给的设计图一般都是基于750宽来设计的，我们除2就好了）
如何让iphone6手机的1rem = 100px; // 为什么是100（为了好计算呀），不能是10呢，因为浏览器默认最小字体就是12px,原因上面有细说
计算公式：设fs为基准font-size，目标font-size为100px，最大兼容尺寸：1024px，开发的手机尺寸375px
因为本来根据html的font-size变化的rem值，1rem = 1px的，但是我们做不到呀，即使是1rem = 10px 也做不到。只能让1rem = 100px呀。
公式 ：
100 = fs - (1024-375)*(fs/1024),
求得 ：fs = 273.066
看不懂没有关系，拿着代码，用得爽，开发好了你再慢慢想。
最终的核心代码：
function initFontSize(){var htmlDom = document.getElementById("html1");var currentW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var value = Number(273.066 - (1024-currentW) * 0.2667).toFixed(2);htmlDom.style.fontSize = value + "px";
}Ok,到此,一个完美适配多种手机屏幕的方案就完成了。大周末的，给你们写博客，记得给个赞哦！^_^^_^^_^
长得帅的需要比常人更努力，才对得起上天给你的那张帅脸。
这篇关于一个网页适应多种不同屏幕的H5开发，rem的终极用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
