javascript - 如何根据在移动设备或计算机上查看网站的 CSS 来更改网站的 CSS？

Question

我有一个网站，但我有两个样式表，一个用于计算机，另一个用于移动设备。

我希望如果用户使用移动设备查看网站，则使用适用于移动设备的 CSS，如果从桌面查看网站，则使用适用于桌面的 CSS。

有没有办法检测浏览器（手机或电脑）并相应地使用 CSS？

我可以使用 javascript 检测浏览器，但无法更改 CSS。

Answer 1

很好用媒体查询。例如：-

<!-- Phone -->
<link href="phon.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)">
<!-- Tablet -->
<link href="tab.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)">
<!-- Desktop -->
<link href="pc.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)">

Answer 2

您可以使用 CSS媒体元素来使用条件 CSS。它不完全是浏览器查询，而是根据需要使用屏幕尺寸：

 @media screen and (max-width: 765px){ /*..*/ }

或者

@media screen and (max-device-width: 480px){
 /* some css here */
}

这个网站上有很多很棒的提示： http ://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml