我想借口没有标记最后一篇文章......我没有考虑过......我希望这个不需要它;）
我仍然遇到同样的问题......
我有一个问题。我已经构建了一个简单的图库，其中图像大小取决于设备分辨率，悬停效果显示有关悬停照片的详细信息。图像正在完美缩放，但我的文字覆盖了照片的问题，而不是。
要更改它，我使用@media，但之后悬停文本仅针对已建立的分辨率进行缩放。我的问题是当用户将窗口浏览器大小更改为自定义时，如何将文本缩小为照片？
<section id="gallery">
<ul class="large-block-grid-3 medium-block-grid-2 small-block-grid-1">
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_08.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_02.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_03.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_04.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_05.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_06.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_07.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_08.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_09.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_10.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_11.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_12.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
</ul>
</section>
答案 0 :(得分：0)
你头上有一个视口元标记吗？ 你尝试过使用百分比代替rem吗？ body标签的标准字体大小也可能有所帮助。
答案 1 :(得分：0)
以下是您问题的方向和解决方案：
我打赌你想做类似于Paravel's FitText的事情 这是一个jQuery插件。您需要运行jQuery才能运行它。
我没有完整的代码示例，而是先留下解决方案的方向和空间，让您首先进行探索，这可以帮助您长期学习。