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 media element来使用条件CSS。它不完全是浏览器查询，但如果您愿意，可以使用屏幕尺寸：

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

或者

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

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

如何根据是否在移动设备或计算机上查看网站的CSS？

2 个答案: