Javascript 不同设备的不同样式表

我有一个问题：如何根据设备类型自动更改网站外观？我知道有点像

@media screen and (max-width:720px){/*code for mobile here*/}
@media screen and (min-width:1280px) {/*code for PC here*/}

---

但我认为这可能会给大分辨率移动设备和低分辨率桌面显示器带来问题。 所以我想知道有没有办法根据设备类型（如智能手机、平板电脑或PC）更改css文件/选择css代码的确切部分

任何有效的方法都会有帮助。如果有什么不清楚的地方，我会尽量解释得更好。如果我错了，请纠正我。

您可以使用这些：

// Large devices (desktops, less than 1200px)
 @media (max-width: 1199px) { ... }

 // Medium devices (tablets, less than 992px)
 @media (max-width: 991px) { ... }

 // Small devices (landscape phones, less than 768px)
 @media (max-width: 767px) { ... }

 // Extra small devices (portrait phones, less than 576px)
 @media (max-width: 575px) { ... }

---

“它会在大分辨率的移动设备和低分辨率的桌面显示器上引起问题”——以何种方式？但如果你有宽度约为1200像素的平板电脑或智能手机呢？如何自动切换到手机版？这些都是标准，你无法处理世界上任何定制尺寸。无论如何，您可以将第一个最大宽度更改为比标准更合理的值。试试我发布的那些查询，你会发现它“自动切换”，只要你在花括号中列出了正确的css样式。顺便问一下，你见过大小超过1200px的手机吗？如果是，它应该显示桌面的标准css，没有理由改变它。