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

Question

我在这里遇到了一个非常奇怪的问题。我可以设法减小桌面版占位符的字体大小，但不能减小手机媒体查询的字体大小。我首先从桌面版开始，使用以下代码使用 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>

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

Answer 1

你可以在你的css文件中尝试这样的东西

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