不同设备的不同样式表

Question

我有一个问题：如何根据设备类型自动更改网站外观？我知道有这样的东西

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

但我认为它可能会导致高分辨率移动设备和低分辨率桌面显示器出现问题。所以我想知道是否有任何方法可以根据设备类型（如智能手机、平板电脑或 PC）更改 css file/selecting 代码的确切部分 css？

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

Answer 1

您可以使用这些：

// 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) { ... }

不同设备的不同样式表

Different stylesheet for different device

html

javascript

css

mobile-website