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

【问题标题】：How to reduce the font size of the placeholder in mobile media query如何减小移动媒体查询中占位符的字体大小
【发布时间】：2018-12-16 03:42:21
【问题描述】：

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

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

【问题讨论】：

请在没有媒体查询的情况下添加 HTML 和原始 CSS。
您可能想先开始并修复您的 html 标记
你指的是我对 br 标签的使用吗？我知道我应该使用
但我只是觉得使用旧格式有更好的换行符
在这里你用javascript添加了你的css

标签： html css

【解决方案1】：

你可以在你的css文件中尝试这样的事情

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

【讨论】：

【解决方案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 不可见，或者由于缓存问题，移动字体大小不适合您。所以，您也可以尝试清除浏览器缓存。

【讨论】：