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;
}
    }

Answer 2

        input {
            font-size: 24px;
            color: tomato;
            border: 1px solid;
        }

        div.practice_diary input::placeholder{
            font-size: 24px;
            color: tomato;
        }

    @media screen and (max-width: 30em) {

        input {
            font-size: 14px;
            color:slateblue;
        }

        div.practice_diary input::placeholder{
            font-size: 14px;
            color:slateblue;
        }

    }

<div>
  <div class="practice_diary">
    <input type="text" placeholder="hello there..."/>
  </div>
</div>

在您的代码中，尝试使用更大的字体，0.1em不可见，或者由于缓存问题，移动字体可能对您不起作用。因此，您也可以尝试清除浏览器缓存。

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

2 个答案: