如何仅使用 CSS 移动屏幕进行检测

Question

我在这里发现了很多讨论 CSS 和移动屏幕的话题。

经过搜索，我找不到某些设备的解决方案。例如：摩托罗拉 Moto G4 Plus 使用全高清宽度（1080 像素），只有引导程序检测 xs-view 配置。

造型和尝试我无法设置一些样式。

那么，我如何制作与 Bootstrap 相同的程序来设置我的样式和所有设备的一般程序？

拜托，只有 CSS 或尽可能多的 JS（如果可能，不要），与引导程序相同。

我试过@media screen 和@media all 查询。不起作用。

谢谢阅读。

原文由 Max 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

@media 规则用于为不同的媒体类型/设备定义不同的样式规则。

如果它不起作用，请检查您的代码。你可能在某处打错了字。

例子：

 @media only screen and (max-device-width: 640px) {
    /* Styles */
}

@media only screen and (max-device-width: 768px) {
    /* Styles */
}

较早的帖子： 如何编写针对所有移动设备和平板电脑的 CSS 媒体查询？

W3schools： http ://www.w3schools.com/cssref/css3_pr_mediaquery.asp

原文由 VMeijer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

所有触摸屏和移动设备（包括平板电脑、智能手机）都可以使用带有以下@media 规则的 css 进行检测。

 @media only screen and (hover: none) and (pointer: coarse){

/* Regular CSS rules here*/

}

原文由 Effie13 发布，翻译遵循 CC BY-SA 4.0 许可协议