1

我有基本的网页设计技能 atm，我正在处理我的投资组合，请在登陆页面方面提供帮助。

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

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

我有 2 个 div 标签和 CSS 的 ID 标签，就像这样。

<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 的值时，与桌面视图中的这些值不同，一切都会立即改变。我希望文本在桌面视图中保持不变，仅在平板电脑视图中更改大小。希望这是有道理的。

感谢回复。

4

3 回答 3

2

使用媒体查询

例如，

@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：像素值用作说明目的的近似值。您可以将它们替换为您想要的值。

于 2013-11-07T20:25:18.757 回答
0

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

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

因为 div 是一个 BLOCK 元素，它会占用 X 轴上的所有空间，所以你不必设置 width 属性。默认情况下它的 100% ;)

于 2013-11-07T20:27:08.623 回答
0

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

请注意，我目前只是更改标题的颜色，只需调整它以更改大小，并根据您的喜好调整以像素为单位的断点。

于 2013-11-07T20:27:39.237 回答