如何减小移动媒体查询中占位符的字体大小
如何减小移动媒体查询中占位符的字体大小
提问于 2018-12-15 09:33:45
我遇到了一个非常奇怪的问题。我可以设法减小我的桌面版本的占位符的字体大小，但不能减小我的手机媒体查询的字体大小。我首先从桌面版本开始，我使用的是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>
但从我的手机上看它似乎没有什么变化，但请记住，它适用于桌面版本……
回答 2
Stack Overflow用户
发布于 2018-12-15 12:02:59
您可以在css文件中尝试如下所示的内容
@media only screen and (max-width: 600px) {
input::placeholder {
font-size: 1em;
}
}Stack Overflow用户
发布于 2018-12-15 19:42:22
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不可见，或者移动字体大小可能因为缓存问题而不适用于你。因此，您也可以尝试清除您的浏览器缓存。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53791170
复制相关文章
相似问题
腾讯云开发者
