如何在顺风中设置移动设备的输入全宽度？

Question

我有一个输入元素。它占用50%的可用父本宽度。属性w-6/12.

如何为移动设备设置宽度满？

守则是：

<div class="mt-4 width">
   <div class="mt-1 w-6/12 sm:w-full">
      <select
         type="email"
         autocomplete="email"
         class="block w-full bg-gray input-color-gray input-color-gray font-roboto-100 rounded-md sm:text-sm p-3 bg-gray pr-4"
         >
         <option>Make</option>
      </select>
   </div>
</div>

我试过：

sm:w-full

Answer 1

解决问题的方法是交换w-6/12和sm:w-full。他们应该是w-full sm:w-6/12。

原因如下：

顺风文档特别建议不要使用sm前缀针对较小的屏幕。顺风是“移动第一”，这意味着你的默认(无前缀)风格应该是你的移动风格，你应该提供覆盖，以解决更高分辨率的额外空间。

这是移动-顺风文档的第一节的截图

​

​

由此得出的结论是，顺风断点作为>=运营商运行。当您前缀sm时，它的意思是“任何640 it或更高的值”。以下是顺风尺寸表断点：

​

​

Answer 2

尝试更改类的顺序，例如：

 <div class="mt-4 width">
    <div class="mt-1 w-full md:w-6/12">
       <select
          type="email"
          autocomplete="email"
          class="block w-full bg-gray input-color-gray input-color-gray font-roboto-100 rounded-md sm:text-sm p-3 bg-gray pr-4"
          >
          <option>Make</option>
       </select>
    </div>
 </div>

通过这种方式，您可以根据需要自定义宽度，并包括该类的其他断点：sm, md, lg, xl

Answer 3

你想要的是让它在移动设备上充满，这样你就可以使用w-full了。但也可以将其调整回大屏幕上的常规大小，在这种情况下，您可以依赖w-fit。因此，最终的结果是同时使用这两种方法：w-full md:w-fit

为了说明这一点，我已经将它用于下面的响应蓝色按钮。

守则如下：

<div class="pt-12 pb-24">
  <div class="px-3 mx-auto flex flex-wrap flex-col md:flex-row items-center">
    <!--Left Col-->
    <div class="flex flex-col w-full md:w-3/5 justify-center items-start">
      <h1 class="my-4 text-5xl font-bold leading-tight">Crie seu site de corretor em apenas 2 minutos</h1>
      <p class="leading-normal text-2xl mb-6">
        Ganhe acesso a mais de 150 anúncios de lançamentos no Rio de Janeiro prontos para começar a capturar leads e
        aumentar suas vendas.
      </p>
      <!--Responsive Blue Button-->
      <a href="/premium" class="btn-primary btn-lg w-full md:w-fit">Entenda mais</a>
    </div>
    <!--Right Col-->
    <div class="w-full md:w-2/5 py-6 text-center">
      <img class="w-full" src="https://www.tailwindtoolbox.com/templates/hero.png" />
    </div>
  </div>
</div>

桌面

​

​

莫比尔县

​

​

希望这是有用的信息。