【1.7】Twenty Twelve宽度的修改
Twenty Twelve是一款Responsive类型的主题,宽度定义在Media Queries中,仅当浏览器宽度大于600像素时生效,此时最大宽度为960像素。要修改其宽度,需要更改media query中定义的宽度。为了兼容IE,还有修改ie.css中宽度的定义。
第一 修改style.css
找到下面的地方(Line 1483-1488)
.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即可。
参考资料:
http://www.solagirl.net/how-to-alter-the-width-of-twentytwelve.html
这里是一个广告位,,感兴趣的都可以发邮件聊聊:tiehan@sina.cn
个人公众号,比较懒,很少更新,可以在上面提问题,如果回复不及时,可发邮件给我: tiehan@sina.cn
个人公众号,比较懒,很少更新,可以在上面提问题,如果回复不及时,可发邮件给我: tiehan@sina.cn