当浏览器改变大小'squeezes'降低文字大小 [英] When the browser changes size 'squeezes' making the text size lower

问题描述

我想知道是否可以在更改浏览器大小时减小文本大小?

All i would like to know is it possible to make text size decrease as i make the browsers size change?

我这样做的原因是我正在用纯 CSS 创建一个菜单栏，当页面当前被挤压时，所有文本都相互重叠，我想在浏览器为 100% 18px 时设置文本大小，当它被挤压了，我希望文本减小到 12 像素.

The reason for me doing this is that i am creating a menu bar in pure CSS and when the page gets squeezed currently all the text overlaps each other, I would like to make the text size when browser is 100% 18px and when its squeezed i would like the text to decrease to 12px.

希望它只是一个简单的一行 CSS 代码，可以让我做到这一点，我不确定所以任何帮助将不胜感激，

Hopefully its just a simple one line piece of CSS code that allowes me to do this, i am not sure so any help would be appreciated,

感谢您的帮助

推荐答案

您需要设置媒体查询.

媒体查询让您可以根据页面的呈现方式定义 CSS 规则.因此，假设当窗口小于 1024 像素时，您的页面会中断.

Media Queries let you define CSS rules based on the way the page is being rendered. So lets say your page breaks when the window is smaller than 1024px.

.myClass { 

    //Default rules for .myClass

    font-size:18px;
  }

@media (max-width: 1024px) { 
    // The rules in here only apply if the window is less than/equal to 1024px
    // So we'll drop the font size so that it fits the smaller screen

  .myClass {
    font-size:12px;
  }
}

我在这里制作了一个 JSFiddle. 媒体查询的宽度基于结果"框架的宽度，所以滑动它，使其变宽/变窄，看看它是如何工作的.

I made a JSFiddle here. The media query bases the width off the width of the "Result" frame, so slide that around to make it wider/narrower to see how it works.

这篇关于当浏览器改变大小'squeezes'降低文字大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！