设计图分为版心一般为:
pc正常写(一般是在1920px的屏幕),版心w写最大宽度为当前设计图版心的宽度,注意不是宽度,而是最大宽度。最大宽度的意思是,当屏幕大于最大宽度时,网页就不会再随着屏幕拉升变大了,这就实现了版心的作用例如:1600px版心的设计图:
.w { max-width:1600px; margin:0 auto;}
在1600的版心:
1600px以上不用管
1600px一下
最大1600px—–版心改成1400 ———- 1600px以下
最大1400px—–版心改成1200 ———- 1400px以下
最大1200px—–版心改成1000 ———- 1200px以下
最大1000px—–版心改成100%,页面适当加padding ———-
1000px以下(就是手机端了,不写768px,直接1000以下都显示手机端的样式)
这样的分档,其实就把版心以下分为了4个屏幕显示,每一个都是衔接的,这样就不会出现某一个尺寸没有考虑进去的情况。
例:
@media screen and ( max-width:1600px )
{
.w { max-width:1400px; }
}
@media screen and ( max-width:1400px )
{
.w { max-width:1200px; }
}
@media screen and ( max-width:1200px )
{
.w { max-width:1000px; }
}
@media screen and ( max-width:1000px )
{
.w { max-width: 100%; }
}
在1520的版心:
1520px以上不用管
1520以下同上
在1440版心:
1440以上不用管
1440px以下
最大1440px—–版心改成1200
最大1200px—–版心改成1000
最大1000px—–版心改成100%,页面适当加padding,不要让宽度顶边
版心1400同上
在1200的版心:
1200px以上不用管
1200px以下
最大1200px—–版心改成1000
最大1000px—–版心改成100%,适当加padding,不要让宽度顶边
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
WX234.CN
暂无评论内容