Twenty Twelve是一款Responsive类型的主题,宽度定义在Media Queries中,仅当浏览器宽度大于600像素时生效,此时最大宽度为960像素。
如何修改最大宽度
需要修改两个地方。
第一,修改style.css
找到下面的地方(Line 1431-1436)
.site { margin: 0 auto; max-width: 960px; max-width: 68.571428571rem; overflow: hidden; }
max-width:960px就是宽度定义,如果要改成1000像素
.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
html { font-size: 87.5%; }
所以1000像素转换成rem就是1000/14 = 71.42857142,em是相对于父级元素,当结构复杂时用em计算字号或margin、padding将是一场噩梦,而rem不但保留了em的优势,还简化了数学计算。
第二,修改ie样式表
打开css/ie.css,找到line44-50
.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即可。
这个修改非常实用,现在的浏览器越来越大了