Html 如何使 div 标签中的文本具有响应性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19845874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make text in a div tag responsive?
提问by user2966441
I've got basic web design skills atm, I'm working on my portfolio and need help with the landing page please.
我有基本的网页设计技能 atm，我正在处理我的投资组合，需要登陆页面方面的帮助。
I want the heading and sub heading on my page to resize when the browser resizes, but it's not working.
我希望页面上的标题和子标题在浏览器调整大小时调整大小，但它不起作用。
The body font is 12px but I only want the font to resize in the div tags not the body text.
正文字体为 12px，但我只希望字体在 div 标签中调整大小，而不是正文文本。
I have 2 div tags with ID tags for the CSS like so.
我有 2 个带有 ID 标签的 div 标签，用于 CSS。
<div id="heading">
this is my heading text
</div>
<div id="subheading">
this is my subheading text
</div>
This is the css.
这是css。
#heading {
float: left;
width: 100%;
padding-top: 3%;
padding-bottom: 1%;
font-size: 55px;
color: #FFF;
position: relative;
}
#subheading {
float: left;
width: 100%;
padding-top: 3%;
padding-bottom: 3%;
font-size: 36px;
position: relative;
}
I want both headings to reduce in size by about 20/30% when the window/browser is resized but when I change the values for the tablet css, different to these values in the desktop view everything changes straight away. I want the text to stay the same in desktop view and only change size in tablet view. Hope this makes sense.
当窗口/浏览器调整大小时，我希望两个标题的大小都减小约 20/30%，但是当我更改平板电脑 css 的值时，与桌面视图中的这些值不同，一切都会立即发生变化。我希望文本在桌面视图中保持不变，并且只在平板电脑视图中更改大小。希望这是有道理的。
Appreciate a reply.
感谢回复。
回答by Nitesh
Use Media Queries
使用媒体查询
For Instance,
例如，
@media only screen and (min-width: 1920px) {
#heading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
font-size: xxpt; /*put your size here*/
}
#subheading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:3%;
font-size:36px;
position:relative;
font-size: xxpt; /*put your size here*/
@media only screen and (min-width: 1024px) /* for ipad */ {
#heading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
font-size: xxpt; /*put your size here*/
}
#subheading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:3%;
font-size:36px;
position:relative;
font-size: xxpt; /*put your size here*/
}
PS:The pixel values are used as an approximation for illustrative purposes. You can replace them with your desired values.
PS：像素值用作说明目的的近似值。您可以将它们替换为您想要的值。
回答by Димитър Папазов
Don't set the width to 100% ever ! Even better - remove the width and it will work ;d
永远不要将宽度设置为 100%！更好 - 删除宽度，它会工作;d
#heading {
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
}
becouse the div is a BLOCK element, it will take all the space in X axis, so you dont have to set the width property. By default its 100% ;)
因为 div 是一个 BLOCK 元素，它将占用 X 轴的所有空间，因此您不必设置 width 属性。默认情况下是 100% ;)
回答by HaukurHaf
See a working example of a media query here: http://jsfiddle.net/fSYSJ/
在此处查看媒体查询的工作示例：http: //jsfiddle.net/fSYSJ/
body { background:silver; }
#heading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
}
#subheading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:3%;
font-size:36px;
position:relative;
}
@media screen and (max-width: 768px)
{
#heading { color:red; }
#subheading { color:red; }
}
@media screen and (max-width: 420px)
{
#heading { color:blue; }
#subheading { color:blue; }
}
Notice I'm currently just changing the color of the headings, just adjust it to change the size instead and also adjust the break points in pixels to your liking.
请注意，我目前只是更改标题的颜色，只需调整它以更改大小，并根据您的喜好调整像素的断点。
