用过的两种方式，一种是响应式用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 var htmlFont = function(){ 14 var docEl=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 var title; 21 if(/mobile|phone|android|pad/.test(navigator.userAgent.toLowerCase())){ 22 title = 'mobile'; 23 }else{ 24 title = 'pc'; 25 } 26 setStyle() 27 function setStyle(){ 28 var i,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>