摘要：
使用了两种方法。一种是在响应模式下使用bootstrap或直接使用@media media进行查询。另一种是使用两组样式来加载设备。它适用于简单的网页，如官方网站，开发和维护成本低。对于电子商务等复杂网站，两种风格更好，开发和维护成本更高。第一个具体的实施就不用提了。第二种方法是默认加载两个css，然后根据设备禁用其中一个。在这里，首先隐藏主体，以避免切换时未加载样式。12345678hello91011//移动电话页面rem适用于12（函数（doc，win）｛13varhtmlFont=function（）｛14vardocEl=doc.documentElement，l=docEl.clientWidth，f；15f=l/15；16l˃750？
用过的两种方式，一种是响应式用bootstrap或者直接用@media媒体查询，第二种是弄两套样式针对设备加载。针对简单的网页比如官网响应式比较适合，开发维护成本低。针对复杂的网站比如电商用两套样式比较好，开发维护成本较高
第一种具体的实现就不说了，第二种方式先默认加载两个css，然后根据设备disabled其中一个，这里body先隐藏为了避免切换的时候出现样式未加载的情况
1 <!doctype html> 2 <html> 3 <head> 4 <link href="index-mobile.css"title="mobile"rel="stylesheet"type="text/css" /> 5 <link href="index-pc.css"title="pc"rel="stylesheet"type="text/css" /> 6 </head> 7 <body style="display: none;"> 8 hello 9 </body> 10 <script> 11 //手机页面rem适配 12 (function(doc,win){ 13 varhtmlFont = function(){ 14 vardocEl=doc.documentElement, l=docEl.clientWidth, f; 15 f=l/15; 16 l>750?docEl.style.fontSize=50+"px":docEl.style.fontSize=f+"px"}; 17 htmlFont(); 18 win.addEventListener("resize",htmlFont,false) 19 })(document,window) 20 vartitle; 21 if(/mobile|phone|android|pad/.test(navigator.userAgent.toLowerCase())){ 22 title = 'mobile'; 23 }else{ 24 title = 'pc'; 25 } 26 setStyle() 27 functionsetStyle(){ 28 vari,links; 29 links =document.getElementsByTagName("link"); 30 for(i=0; links[i]; i++){ 31 if(links[i].getAttribute("rel").indexOf("style") != -1 &&links[i].getAttribute("title")){ 32 links[i].disabled = true; 33 if(links[i].getAttribute("title").indexOf(title) != -1){ 34 links[i].disabled = false; 35 document.body.style.display = "block"; 36 } 37 } 38 } 39 } 40 </script>