Question

我在html页面中有一个部分，它有一个背景图像，左边是标题文本，右边是一个注册表单。

我正在使用媒体查询来使其响应。即使在触发媒体查询之前，我也面临着这个问题。

当屏幕尺寸为768 + px时（就像在我的小提琴中，在表格滑到下一行之前），标题的宽度很好，为15％（因为它避免了与图像和表格中女性脸部的重叠））。但随着屏幕尺寸的增大，它看起来太小了，线条也可以在同一条线上。

当媒体查询屏幕大小介于506px和768px之间时，也会发生这种情况。

有没有办法解决这个问题而不必使用anotehr媒体查询？

非常感谢任何帮助。

谢谢，

<section class="imageform">

<div class="container">
<div class="title">
<h1>  Title Title Title Title </h1>
<h3> Title Title Title, Title Title </h3> 
</div>

<form class="signup_form">

 <label for="Name"><strong> Your Name:</strong></label>
 <input type="text" id="Name_First" name="Name_First" required>
 <input type="text" id="Name_Last" name="Name_Last" required>   

 <label for="Email">Email Address:</label>
 <input type="email" id="Email" name="Email" vrequired>

 <label for="RegPassword">Password:</label><input type="password" id="RegPassword" name="RegPassword" required>
</form>

 </section>  <!--End of imageform section -->

JS小提琴：http://jsfiddle.net/fwkqos0c/6/

Answer 1

这里的一个简单解决方案是在title课程上发送相对字体大小。亲戚我的意思是em。这意味着您的标题字体大小会自动调整为父对象的大小。

更多帮助：

http://css-tricks.com/why-ems/

（如果我的回答有帮助，我会感激批准）

响应式页面中的响应div宽度，而不使用其他媒体查询

1 个答案: