juejin.cn
用户4360493362872
获得徽章 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_6.dde0d83.png)
赞了这篇沸点
![[可怜]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_5.ece2a96.png)
赞了这篇沸点
![[偷笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_20.7a46372.png)
，谁有平台可以测试一下
赞了这篇沸点
赞了这篇文章
赞了这篇文章
赞了这篇沸点
![[吃瓜群众]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_10.42a731c.png)
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
不知道为何，其实我是挺反感在技术群里没事什么都问，无论难易程度。有时候会想，有问的功夫自己多查查不就行了吗？但仔细一想，哪些我所认为基础的东西，可能在这个同学看来，其实挺复杂，所以就会尽可能详细的解释一下。也是这个时候，就会想到，自己的当时也是一步步过来，技术这东西，就是不断前行，对于难点，带着不确定的答案再去找别人解答，也许会更好，不知道为什么现在更多的小伙伴反而失去了这点基础沟通方式。也许是我一个人的牢骚，但也越来越感觉到，走的越远，身边的人也越少，越需要进入更深一点的圈子，又再从小白刷级到老手，然后往复循环。不想表达什么，从另一个层次去想，对于我个人而言，我也在经历转型，变成了那些曾经希望成为的那个技术前辈，但希望自己也能一直留下对于新同学的孜孜不倦。
展开
1
4
赞了这篇文章
赞了这篇沸点