Question

我正在使用语义ui来开发网页。我希望他们能够做出回应。我尝试在手机上打开网页，但网格的大小变为最小，看起来不太好。我应该对我的代码做些什么改变？

<div class="ui six wide column
 segment" id="logBox"
 style="background-color: #F1F0FF;">

    <div class="ui centered
                header"><h1>Log-In to your 
    account</h1>
                   </div>

        <form class="ui form">
            <div class="field">
                <div class="ui left icon
                input">
                <i class="user icon"></i>
                <input type="text"
        placeholder="Email-id" >
                </div>
            </div>

            <div class="field">
                <div class="ui left icon   

                     input">
                    <i class="lock icon"></i>
                    <input type="password"     

            placeholder="Password">



           </div>
            </div>

CSS：

  @media only screen and (max-   
         width: 640px){

         #logBox{
            width:100%;
         }
       }

Answer 1

我会在某个断点后使元素全宽并删除任何浮点数。通常，您的所有网格元素都有一个共同的类，例如＆＃39; ui＆＃39;在上面的例子中，您可以这样使用：

.ui {
  display: block;
  float: none;
  width: auto;
}

如何使语义ui页面响应？

1 个答案: