根据设备屏幕不同，加载不同的CSS，实现PC端和手机端页面
我们知道，现在手机端的用户非常多，一个网页总不能有PC端，但没有手机端吧？如果用户在手机端打开网页显示的是PC端的网页，显示效果不好，因为手机屏幕太小，网页的元素显示就太小了。我们要开发出自适应的网页，但是自适应的技术比较高，如果不懂的人，可以利用一段代码，实现同一个网站在不同设备上的显示，即加载不同的CSS。也就是说，我们只需要一个主页文件，网站的内容一样，只是显示的布局不一样。每次更新网站，网页的内容手机端，PC端都是一样的。
我们新建index.html、m.css、pc.css文件
index.html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>加载不同的页面</title>
<link rel="stylesheet" type="text/css" href="pc.css">
<link rel="stylesheet" type="text/css" href="m.css" media="only screen and (max-device-width:480px)">
</head>
<body>
<p style="text-align:center; margin-top: 300px; color:#fff; font-size:20px;">这是一个加载不同CSS的页面</p>
</body>
</html>
m.css代码
body{background:#39f;}pc.css代码
body{background:#f00;}
我们仔细观察一下index.html的代码，代码是连接到外部的pc.css，链接的是m.css，但后面多了一行代码media="only screen and (max-device-width:480px)"，意思是说当你的设备屏幕<=480px的时候，才加载这个css，当你的设备屏幕大于480px的时候，就加载上面的pc.css。
下面是手机打开http://www.likeyunba.com/test/device/时显示的效果
下面是电脑打开：http://www.likeyunba.com/test/device/显示的效果
这种方法就可以实现，大家可以这样去做网页，把用户体验做好！如果你学会了，别忘记顶贴！
页:
[1]