第一种方式：利用js判断设备类型，应用不同样式文件
<!DOCTYPE html><html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>JS判断设备类型，应用不同css文件</title>
<link rel="stylesheet" type="text/css" href="style_A.css" />
</head>
<body>
<div>
</div>
<script type="text/javascript">
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端应用的样式文件：style_A.css
alert('当前应用样式文件是：'+link.getAttribute('href'))
link.setAttribute('href','style_B.css')
//Mobile端应用样式文件：style_B.css
alert('当前应用样式文件是：'+link.getAttribute('href'))
}
</script>
</body>
</html>
第二种方式：利用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:320pxborder:1px solid red}
styleB.css 中样式为// .div_1{width:480pxborder:1px solid blue}
styleC.css 中样式为// .div_1{width:600pxborder:1px solid pink}
styleD.css 中样式为// .div_1{width:800pxborder: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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>A标签</title>
<style type="text/css">
*{ margin:0padding:0}
a{ color:#00Ctext-decoration:nonepadding:0 20px}/*整个页面A标签的属性*/
a:hover{ color:#F00text-decoration:underline}/*整个页面A标签鼠标滑过属性*/
.one,.two{ width:800pxmargin:20px autoline-height:36pxborder:1px solid green}
.two a{ color:#000}/*在.two这个div里面A标签的属性*/
.two a:hover{ color:#0F0}
</style>
</head>
<body>
<div class="one"><a href="#">百度</a><a href="#">新浪</a><a href="#">腾讯</a><a href="#">网易</a></div>
<div class="two"><a href="#">百度</a><a href="#">新浪</a><a href="#">腾讯</a><a href="#">网易</a></div>
</body>
</html>
CSS的调用，按照CSS出现在页面的不同位置，可以分为3种方法：元素中直接使用；
从页面头部调用；
采用链接的形式调用。
不同的调用方法有不同的写法和优先级。下面分别做一下介绍。
一、元素中直接使用
这种调用方式的写法如下：
<元素名称 style="属性:属性值"></元素名称>
在样式中直接使用CSS，语法是使用style标签，在双引号中，样式的语法结构和独立样式表中完全相同。例如：
<div style="width:240pxheight:80pxbackground-color:#cccccctext-align:centerfont-size:14px">
示例：元素中直接调用。</div>
该样式中定义了元素宽、高为360、80像素，背景色为灰色，字体大小为14像素。其应用到页面中的显示如图1。
二、从页面头部调用
从页面头部调用CSS是将CSS写在页面的head元素中，然后在页面中调用。其语法结构如下：
<style>
选择符{属性:属性值}
</style>
页面上的所有样式都可以写在<style>和</style>中。使用这种方式调用CSS，在页面中必须有相应的调用代码。
其中，类选择符的调用代码如下：
<元素名称 class="类选择符名称"></元素名称>
ID选择符的调用代码如下：
<元素名称 id="id 类选择符名称"></元素名称>
下面我们来用一个示例演示一下。
<head>
<title>CSS调用方法</title>
<style>
.content{
background-color: #cccccc
font-size: 14px
width: 240px
height: 80px
color: Blue
text-align: center
}
</style>
</head>
<body>
<div class="content">示例：从页面头部调用。</div>
</body>
该样式应用到页面的效果如图2所示。
三、采用链接的形式调用
采用链接的形式调用CSS通常有两种方法：
使用link元素
使用link元素调用CSS的语法如下：
<link rel="stylesheet" href="css文件路径" type="text/css"/>
其中rel="stylesheet"指这个link和其href之间的关联样式为样式表文件。type="text/css"指文件类型是样式表文本。
使用@import
使用@import调用和使用link元素调用的区别在于，使用@import的调用方法只能使用在样式文件中，即只能在调用的样式文件，或style元素中才能正常使用
