html - 如何使语义 ui 页面响应？

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

我会在某个断点后使元素全宽并删除所有 float 。一般来说，你所有的网格元素都有一个共同的类，比如上面例子中的“ui”，你可以这样使用它:

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