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

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

  •  0
  • Ashy Ashcsi  · 技术社区  · 7 年前

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

    enter image description here

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

    谢谢

    3 回复  |  直到 7 年前
        1
  •  1
  •   duc mai    7 年前

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

        2
  •  1
  •   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"
    />
    
        3
  •  0
  •   Ashy Ashcsi    7 年前

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

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

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

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

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

    谢谢