xekin
前端组饮水机管理员
|
求收留
人生就是要不断地超别人的车车！
获得徽章 0
你问 AI 都得不到好答案的问题：
前端 CSS 媒体查询怎么区分是使用电脑浏览器还是手机浏览器？
例如需求为：
移动端设备（手机、ipad 等）导航栏显示为底部 Tabs
电脑端设备导航栏显示为头部 Tabs
.
.
.
.
答案是使用
@media (hover: hover) {}
其本质上是区分输入设备是否为鼠标，这覆盖了绝大多数电脑跟手机的区分场景，上面场景的设置如下：
// 电脑端
@media (hover: hover) {
.nav { position: fixed; top: 0; left:0 width:100vw, height: 10rem }
}
// 移动端
.nav { position: fixed; bottom: 0; left:0 width:100vw, height: 10rem }
前端 CSS 媒体查询怎么区分是使用电脑浏览器还是手机浏览器？
例如需求为：
移动端设备（手机、ipad 等）导航栏显示为底部 Tabs
电脑端设备导航栏显示为头部 Tabs
.
.
.
.
答案是使用
@media (hover: hover) {}
其本质上是区分输入设备是否为鼠标，这覆盖了绝大多数电脑跟手机的区分场景，上面场景的设置如下：
// 电脑端
@media (hover: hover) {
.nav { position: fixed; top: 0; left:0 width:100vw, height: 10rem }
}
// 移动端
.nav { position: fixed; bottom: 0; left:0 width:100vw, height: 10rem }
展开
5
2
![[敲打]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_36.c31c83f.png)