Question

我有基本的网页设计技巧，我正在研究我的投资组合，请在登陆页面上寻求帮助。

我希望我的页面上的标题和子标题在浏览器调整大小时调整大小，但它不起作用。

正文字体是12px，但我只希望字体在div标签中调整大小而不是正文文本。

我有2个带有ID标签的div标签，如此。

<div id="heading">
    this is my heading text
</div>

<div id="subheading">
    this is my subheading text
</div>

这是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;
}

我希望在调整窗口/浏览器大小时，两个标题的大小减少约20/30％但是当我更改平板电脑css的值时，与桌面视图中的这些值不同一切都会立即改变。我希望文本在桌面视图中保持不变，只在平板电脑视图中更改大小。希望这是有道理的。

感谢回复。

Answer 1

使用 Media Queries

对于实例，

@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：为了说明的目的，像素值用作近似值。您可以使用所需的值替换它们。

Answer 2

不要将宽度设置为100％！更好 - 删除宽度，它将工作; d

#heading {
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative; 
}

因为div是一个BLOCK元素，它将占用X轴的所有空间，所以你不必设置width属性。默认为100％;）

Answer 3

在此处查看媒体查询的工作示例： 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; }
}

注意我目前只是更改标题的颜色，只需调整它来改变大小，并根据自己的喜好调整像素的断点。

如何使div标签中的文本响应？

3 个答案: