当浏览器更改大小“挤压”时，文本大小会降低 [英] When the browser changes size 'squeezes' making the text size lower

问题描述

我想知道是否有可能让文字大小减少，因为我会让浏览器尺寸发生变化？

我这样做的原因是我在纯CSS中创建了一个菜单栏，当页面受到挤压时，所有文本都相互重叠，我想使浏览器为100％18px时的文本大小，当它挤压我想文本减少到12px。

希望它只是一个简单的一行CSS代码这允许我这样做，我不知道如此任何帮助将不胜感激，

感谢您的任何帮助

解决方案

您需要设置媒体查询。

媒体查询可让您根据页面呈现的方式定义CSS规则。所以可以说，当窗口小于1024px时，你的页面会被中断。

  .myClass {
 
 / / .myClass的默认规则
 
 font-size：18px; 
} 
 
 @media（max-width：1024px）{
 //这里的规则仅适用于窗口小于/等于1024px 
 / /所以我们将放大字体大小以适应更小的屏幕
 
 .myClass {
 font-size：12px; 
 
 
 
 
 $ b我做了一个JSFiddle  here。媒体查询的宽度与结果框架的宽度不相关，所以请将其放大以使其更宽/更窄，以查看它的工作原理。
 
All i would like to know is it possible to make text size decrease as i make the browsers size change? 

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.

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, 

Thank you for any help  
解决方案
You need to set up media queries. 

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;
  }
}
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.

                        
这篇关于当浏览器更改大小“挤压”时，文本大小会降低的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！