同一页面，根据访问的是pc端还是移动端来展示对应的样式。以下提供两种方法：
1.利用js判断设备类型，应用不同样式文件
$(function(){ var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; //移动设备浏览器版本信息 return { //IE内核 trident: u.indexOf('Trident') > -1, //opera内核 presto: u.indexOf('Presto') > -1, //苹果、谷歌内核 webKit: u.indexOf('AppleWebKit') > -1, //火狐内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //是否为移动终端 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //ios终端 ios: !!u.match(/\(i[^;] ;( U;)? CPU. Mac OS X/), //android终端或者uc浏览器 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //是否为iPhone或者QQHD浏览器 iPhone: u.indexOf('iPhone') > -1 , //是否iPad iPad: u.indexOf('iPad') > -1, //是否web应该程序，没有头部与底部 webApp: u.indexOf('Safari') == -1 }; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase() } if(browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad){ cssChange(); } function cssChange(){ var link = document.getElementsByTagName('link')[0]; //PC端应用的样式文件：pc.css //alert('当前应用样式文件是：' link.getAttribute('href')); link.setAttribute('href','css/mobile.css'); //Mobile端应用样式文件：mobile.css //alert('当前应用样式文件是：' link.getAttribute('href')); } })
2.利用css3的媒体查询，在不同的分辨率下，调用不同的css文件
<!DOCTYPE html> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <title>用媒体查询做自适应页面</title> <!--添加视口--> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 320px) and (max-width:480px)"> <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 480px) and (max-width:600px)"> <link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (min-width: 600px) and (max-width:800px)"> <link rel="stylesheet" type="text/css" href="styleD.css" media="screen and (min-width: 800px)"> <!-- 创建4个css文件， styleA.css 中样式为// .div_1{width:320px;border:1px solid red} styleB.css 中样式为// .div_1{width:480px;border:1px solid blue} styleC.css 中样式为// .div_1{width:600px;border:1px solid pink} styleD.css 中样式为// .div_1{width:800px;border:1px solid black} --> </head> <body> <div class="div_1"> 我是Body下的第一个Div元素 </div> <!-- 当屏幕宽度介于 320px 与 480px 之间时 div元素宽度为320px,边框为红色 当屏幕宽度介于 480px 与 600px 之间时 div元素宽度为480px,边框为蓝色 当屏幕宽度介于 600px 与 800px 之间时 div元素宽度为600px,边框为粉色 当屏幕宽度大于 800px时 div元素宽度为800px,边框为黑色 --> </body> </html>
