Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >材质UI网格在Chrome DevTools设备工具栏上不起作用

材质UI网格在Chrome DevTools设备工具栏上不起作用
EN

Stack Overflow用户
提问于 2021-09-17 15:16:36
回答 1查看 105关注 0票数 1

我正在使用MUI v5 + React + Typescript。

当我使用网格系统时,我定义了一些选项,如xs sm md lg等,用于设置项目的宽度等。如果我只设置xssm,效果会很好。但如果我设置了md,当我使用DevTool设备工具栏并设置一些移动响应时,md下的其他选项(如xs sm )不起作用。但是如果我没有使用DevTool,只是改变了一下Chrome的窗口大小,那就没问题了。它也不能在iOS和安卓手机上工作。

同样,当我使用useMediaQuery的时候,比如useMediaQuery('(max-width:576px)'),它也不能工作。如果我设置了max-width:960 (md属性),它可以正常工作。

当我创建一个空的MIU5 React TS项目,并使用这个网格系统,它的工作正常。

怎样才能发现我的项目出了什么问题?https://i.stack.imgur.com/7QifT.jpg

示例代码如下:

代码语言:javascript
运行
AI代码解释
复制
root: {
        flexGrow: 1
    },
代码语言:javascript
运行
AI代码解释
复制
<Grid
            container
            direction="row"
            justifyContent="space-between"
            className={classes.root}>
            <Grid item md={6} sm={6} xs={6} lg={6}>
                some inner code
            </Grid>
            <Grid item md={5} sm={6} xs={5} lg={4}>
                inner code
            </Grid>
        </Grid>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-18 15:40:08

我不知道它是如何工作的,但在构建应用程序之后,这个问题就解决了。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69230362

复制
相关文章
在 Chrome DevTools 中添加额外的 Device Mode 模拟移动设备
iPhone 11,414,896,2,"Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Mobile/15E148 Safari/604.1" iPhone 11 Pro,375,812,3,"Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Mobile/15E148 Safari/604.1" iPhone 11 Pro Max,414,896,3,"Mozilla/5.0 (iPhone; CPU iPhone OS 13_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1" "iPad 10.2"" (2019)",810,1080,2,"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15" iPhone Xs,375,812,3,"Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1" iPhone Xs Max,414,896,3,"Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1" iPhone XR,414,896,2,"Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1" iPhone X,375,812,3,"Mozilla/5.0 (iPhone; CPU iPhone OS 11_1 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0 Mobile/15B93 Safari/604.1" Samsung Galaxy Fold,586,820,2.625,"Mozilla/5.0 (Linux; Android 9; SM-F900U1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.93 Mobile Safari/537.36" Samsung Galaxy Note10,412,869,2.625,"Mozilla/5.0 (Linux; Android 9; SM-N970XU) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.93 Mobile Safari/537.36" Samsung Galaxy Note10+,412,869,3.5,"Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-N975XU) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/10.2 Chrome/71.0.3578.99 Mobile Safari/537.36" Samsung Galaxy A20,980,1734,2.25,"Mozilla/5.0 (Linux; Android 9; SM-A205U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.93 Mobile Safari/537.36" Samsung Galaxy S10,412,869,3.5,"Mozilla/5.0 (Linux; Android 9; SM-G973U) AppleWebKit/537.36 (KHTML
飞奔去旅行
2020/11/26
5K0
在 Chrome DevTools 中添加额外的 Device Mode 模拟移动设备
在 Chrome DevTools 中调试 JavaScript
由浅入深说一说怎么样在 Chrome DevTools 中调试 JavaScript。
从入门到进错门
2020/03/17
5.4K0
Chrome Devtools
(1)document.designMode = ‘on’ (2)打开任何网站,在网址栏输入:可手机端 javascdy.setAttribute(‘contentEditable’,’true’);
jinghong
2020/05/09
1.1K0
Chrome Devtools
【前端】Chrome DevTools 笔记
zhaokang555
2023/10/17
2710
【前端】Chrome DevTools 笔记
Devtools 老师傅养成[1] - Chrome Devtools介绍
国产的所有 “双核浏览器”,都是基于 Chromium 开发的,当然 Chrome 也是基于它。
scarsu
2020/10/22
1.2K0
Devtools 老师傅养成[1] - Chrome Devtools介绍
Unity Cutout材质 实现网格效果[通俗易懂]
大家好,又见面了,我是你们的朋友全栈君。 Cutout 🚀效果 🥩贴图准备 🍳材质制作 🚀效果 💡 如图所示铁丝网不是模型只是一张128*128的贴图制作的材质,这样可以极大的降低模型面数制作也很速度! 🥩贴图准备 💡 ps中制作一张128*128尺寸带透明通道的图,如下所示: 🍳材质制作 💡 设置 Rendering Mode 为 Cutout模式,并且把贴图放到Albedo槽中 💡 可以调节Tiling 属性增加或减少网格密度 版权声明:本文内容由互联网用户自发贡献,
全栈程序员站长
2022/11/09
6170
Unity Cutout材质 实现网格效果[通俗易懂]
使用 Chrome DevTools 调试 JavaScript
不要再使用 console.log! 学会在 Chrome Developer Tools 中使用断点来调试代码。 作为一名新的开发人员,发现和修复 bug 挺难的。 您可能会试图随意使用 console.log() 来调试代码使代码正常工作。 不要再这样了。 这篇文章将讲述正确调试的方法! 您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。这是更有效的在代码中查找和修复 bug 的方法。 本教程将向您展示如何调试一个具体 bug,您学到的方法将有助于您调试以后遇到的的 JavaS
wangxl
2018/03/29
2.4K0
使用 Chrome DevTools 调试 JavaScript
项目chrome安装react devtools
Download React Developer Tools 4.24.0 CRX File for Chrome - Crx4Chrome
五月
2022/11/15
6200
项目chrome安装react devtools
[UE4][Material] Spline样条网格材质消失问题记录
 在材质选项中开启 Used with spline Meshes √ 问题解决;
Ning@
2022/02/28
8230
[UE4][Material] Spline样条网格材质消失问题记录
使用 Chrome DevTools 调试 JavaScript
作为一名新的开发人员,发现和修复 bug 挺难的。您可能会试图随意使用 console.log() 来调试代码使代码正常工作。 不要再这样了。
用户5807183
2019/10/21
1.8K0
使用 Chrome DevTools 调试 JavaScript
Chrome Devtools 高级调试指南(新)
前言 本文暂未涉及Performance面板的内容。 后续会单独出一篇,以下是目录: 常用命令和调试 黑盒脚本:Blackbox Script 控制台内置指令 远程调试WebView 1. Chrome Devtools 的用处 前端开发:开发预览、远程调试、性能调优、bug跟踪、断点调试等 后端开发:网络抓包、开发调试Response 测试:服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试 其他:安装扩展插件,如AdBlock、Gliffy、Axure等 2. 菜单面板拆解
前端劝退师
2019/10/13
2.9K0
Chrome Devtools Performance使用指南
运行时性能表现(runtime performance)指的是当你的页面在浏览器运行时的性能表现,而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevTools Performance功能去分析运行时性能表现。在RAIL性能评估模型下,你可以在这篇指南中可以学到怎么去用这个performance功能去分析Response, Animation, 以及 Idle 这三个性能指标。
张晓衡
2019/09/11
2.7K0
Chrome Devtools Performance使用指南
DevTools(Chrome 85)的新功能
DevTools 是开发和测试 Web 应用时最有用的工具之一。在Chrome 85 中,DevTools 做了一些改进,例如:
疯狂的技术宅
2020/08/10
8060
Chrome DevTools开发者工具
Chrome DevTools是内嵌在Chrome浏览器里的一组用于网页制作和调试的工具。使用DevTools,可以在平时中的开发调试中极大的提高效率。
Cloud-Cloudys
2020/07/07
1.2K0
在 css 图层分析这方面,Chrome Devtools 属实不太行
我们通过 html、css 描述页面,浏览器会解析然后一帧帧渲染,通过 js 改变 dom 后,浏览器会重新计算布局信息然后渲染。
神说要有光zxg
2022/03/03
7300
在 css 图层分析这方面,Chrome Devtools 属实不太行
Android chrome 开启底部工具栏
然后选择 合适的样式,不过我这个版本的 Android chrome 文案和效果没对应(有 bug):
卓越笔记
2023/02/18
5.7K0
Android chrome 开启底部工具栏
自己实现 Chrome DevTools 的 Coverage 功能
Chrome DevTools 有一个覆盖率检测的功能,可以检测 JS、CSS 代码里有哪些执行了,哪些没执行。并且还会在 sources 里标记出来。
神说要有光zxg
2022/11/11
9310
自己实现 Chrome DevTools 的 Coverage 功能
基于 Chrome Devtools 的远程调试实现
看来远程调试是一大痛点。介绍了一个基于 Chrome Devtools 的远程调试工具,可以让前端开发者更好地调试远程 web 页面。今日文章由腾讯前端工程师 @Linkpan 分享。
五月君
2023/09/06
1.1K0
基于 Chrome Devtools 的远程调试实现
Chrome DevTools 一些隐藏技巧
如果你是一名 Web 开发人员,那么你肯定会花不少时间在浏览器开发工具或 Web 控制台中,审查元素、修改 CSS 或在控制台中运行命令,这些是每个 Web 开发都知道如何使用的一些基本操作,但其实上我们还可以在浏览器内完成很多其他事情,让你的调试、开发和网页设计更加高效。以下是 Chrome DevTools 的一些隐藏的或鲜为人知的功能......
我是阳明
2020/09/29
2K0
Chrome DevTools 一些隐藏技巧
几个非常实用的 Chrome Devtools 技巧
关于 Chrome 浏览器,如果你是一名前端开发者,相信对此并不陌生,我们可以用它来查看 网络请求、分析网页性能、调试 JavaScript 功能 等。
唐志远
2023/10/23
6770
几个非常实用的 Chrome Devtools 技巧

相似问题

kendo ui网格中的按钮在移动设备上不起作用

10

反应材质UI网格

128

Chrome DevTools仿真设备预置

15

材质UI网格对齐方式

214

angular.io材质垫-滑动-切换在android chrome上不起作用

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档