1. 百科知识问答首页
  2. 经验知识

如何修改Twenty Twelve的宽度

穆小七 • • 经验知识 • 阅读 614

Twenty Twelve是一款Responsive类型的主题，宽度定义在Media Queries中，仅当浏览器宽度大于600像素时生效，此时最大宽度为960像素。

如何修改最大宽度

需要修改两个地方。

第一，修改style.css

找到下面的地方（Line 1431-1436）

1
2
3
4
5
6
.site {
        margin: 0 auto;
        max-width: 960px;
        max-width: 68.571428571rem;
        overflow: hidden;
}

max-width:960px就是宽度定义，如果要改成1000像素

1
2
3
4
5
6
.site {
        margin: 0 auto;
        max-width: 1000px;
        max-width: 71.42857142rem;
        overflow: hidden;
}

rem是CSS3引入的单位，跟em类似，可以理解为
em that relatives to ROOT

Twenty Twelve的ROOT字号是14px

1
2
3
html {
    font-size: 87.5%;
}

所以1000像素转换成rem就是1000/14 = 71.42857142，em是相对于父级元素，当结构复杂时用em计算字号或margin、padding将是一场噩梦，而rem不但保留了em的优势，还简化了数学计算。

第二，修改ie样式表

打开css/ie.css，找到line44-50

1
2
3
4
5
6
7
.site {
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    margin: 48px auto;
    max-width: 960px;
    overflow: hidden;
    padding: 0 40px;
}

将960px修改为1000px即可。

本作品（图文、音视频）由用户自行上传分享，仅供网友学习交流。若您的权利被侵害，请联系 yu.jianchun@qq.com

赞 (2)
穆小七穆小七认证作者
0
« 上一篇 2015-05-16 16:33
下一篇 » 2015-05-17 11:23

相关推荐