代码之家 › 专栏 › 技术社区 › Ashy Ashcsi

语义用户界面响应移动友好组件

semantic-ui-react responsive reactjs css

Ashy Ashcsi · 技术社区 · 7 年前

我正在为我的网站使用语义用户界面反应。我想使所有的组件都便于移动。但当我在手机上浏览网站时,所有的元素都变得非常小。请在下面找到图片:

如何使元素在移动设备上显得更大?我还想要手机版的响应菜单。有人能告诉我吗?

谢谢

3 回复 | 直到 7 年前

duc mai 7 年前

你已经有这个元标记了吗 <meta name="viewport" content="width=device-width, initial-scale=1"> 在你的html中?我想是错过了。

Laurens Deprost 7 年前

确保你有合适的 meta 在HTML中标记 <head></head> 当然还要引用CSS(导入js也可以):

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"
/>

Ashy Ashcsi 7 年前

谢谢劳伦斯·德普罗斯特的帮助!

我已经解决了这个问题。实际上有两个问题。

第一个是我在启用屏蔽的情况下使用来自godaddy的域转发。由于整个站点显示在框架集中,媒体查询无法工作。为了解决这个问题,我在Heroku中添加了一个自定义域,并在godaddy中将其用作CNAME记录。

然后我还将css应用于媒体查询: https://gist.github.com/phuphighter/ce980aaec1c7104846f7e944743a7e07

有了这两个补丁,网站运行良好。

谢谢

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前