1、通过link方法
link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。这种方式引入媒体类型时常跟着引用的样式文件走，如下所示。
<!--手机端-->
<link rel="stylesheet" type="text/css" href="style_phone.css" media="screen and (max-width: 960px)"/>
<!--电脑端-->
<link rel="stylesheet" type="text/css" href="style_PC.css" media="screen and (min-width: 960px)"/>
2、使用@media
@media是CSS3中引进的一个特性，称为媒体查询，可以直接写在<style></style>中间或者外部样式文件中。例如，查询媒体是否是屏幕，屏幕尺寸是否小于960px：
@media screen and (max-width: 960px){
/* 手机端CSS代码 */
}
@media screen and (min-width: 960px){
/* 电脑端CSS代码 */
}
以上就是最经典判断是电脑端还是手机端。
备注：960px只是一个大概的数值，如果要做到完美适配还是要看显示屏。
---------------------
作者：为什么我要选择编程
来源：CSDN
原文：https://blog.csdn.net/weixin_35467885/article/details/80778992
版权声明：本文为博主原创文章，转载请附上博文链接！
------------------- 2.用js根据客户端输出对应样式 --------------------
/*事实上用asp、php后台判断更保险，js在前端，有可能被用户禁止*/
function loadCSS() {
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) {
document.write('<link href="css/pad-phone.css" rel="stylesheet" type="text/css" media="screen" />');
}
else {
document.write('<link href="css/pc.css" rel="stylesheet" type="text/css" media="screen" />');
}
}
loadCSS();
---------------------
作者：夏天想
来源：CSDN
原文：https://blog.csdn.net/qq_33769914/article/details/82752455
版权声明：本文为博主原创文章，转载请附上博文链接！
//根据设备加载不同的样式
var setStyle = function(cssArr){
var i= 0,len = cssArr.length;
for(i;i<len;i++){
document.write('<link href="'+cssArr[i]+'" type="text/css" rel=stylesheet>');
}
};
// 判断是否移动端
function goPAGE() {
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
// window.location.href="移动端url";
alert("mobile");
//判断访问环境是 移动端 则加载以下样式
setStyle(['css/public/base.css','css/layout.css','css/home.css']);
}
else {
// window.location.href="pc端url";
alert("pc")
}
}
goPAGE(); // 调用function
