html - 如何在移动媒体查询中减小占位符的字体大小

我这里有一个很奇怪的问题。对于桌面版本，我可以设法减小占位符的字体大小，而对于手机媒体查询，则不能减小。我首先从桌面版本开始，并使用以下代码使用最大宽度为480像素或更小的像素：

div.practice_diary input::placeholder {
    color: #6A5ACD ;
    opacity: 1;
    position:relative;
    left: 6em;
    font-size: .1em;
}

<div class="practice_diary">
  <form class="signup-form" action="practice_diary_form.php" method="POST">

    <label>User ID</label>
    <br></br>
    <input text="text" name="user_uid" placeholder="User ID">
    <br></br>
    <label>Student's First Name</label>
    <br></br>
    <input text="text" name="first_name" placeholder="Student's First Name">
    <br></br>
    <label>Student's Last Name</label>
    <br></br>
    <input text="text" name="last_name" placeholder="Student's Last Name">
    <br></br>
    <label>Lesson Title</label>
    <br></br>
    <input text="text" name="lesson_title" placeholder="Lesson Title">
    <br></br>
    <label>Describe Lesson: For example: Did you practice counting? fingering?</label>
    <br></br>
    <textarea name="describe_lesson" placeholder="Describe Lesson"></textarea>
    <br></br>
    <div class="practice_diary_last_two_questions">
    <label>Hours of practice</label>
    <br></br>
    <input text="text" name="hours_practice" placeholder="Hours of Practice">
    <br></br>
    <label>Date of Practice</label>
    <br></br>
    <input text="text"  placeholder="<?php echo htmlspecialchars($date); ?>">
    <br></br>
    </div>
    <button type="submit" name="submit">Enter Diary</button>
  </form>
</div>

但是从我的手机查看时似乎没有任何变化，但请记住它适用于桌面版本...

最佳答案

您可以在CSS文件中尝试类似的操作

@media only screen and (max-width: 600px) {
input::placeholder {
font-size: 1em;
}
    }

关于html - 如何在移动媒体查询中减小占位符的字体大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53791170/