对屏幕适配进行总结

[253867843]

对屏幕适配进行总结

• 本文不是做网页端和手机端之间的任意适配.
  1.代码

<div className='container'>
    <div className='leftContent'>
        <item></item>
        <item></item>
        <item></item>
        <item></item>
        <item></item>
        ...
    </div>
    <div className='rightSidebar'>
    </div>  
</div>

2.rightSidebar宽度固定, 不随网页宽度的变化而变化
3.container和leftContent宽度根据网页宽度的变化而变化
4.css代码:

<div className='container'>...</div>
@media screen and (max-width: 1400px) {
    width: 980px;
}
width: 1160px;
上述代码表示: 
    当网页宽度<=1400px时, width === 980px
    当网页宽度>1400px时, width === 1160px
    以1400px作为分界线

-----
<div className='leftContent'>    
@media screen and (max-width: 1400px) {
    width: 720px;
}    
width: 900px;
上述代码表示:
    当网页宽度<=1400px时, width === 720px
    当网页宽度>1400px时, width === 900px
    以1400px作为分界线
    
-----    
<item>...</item>
item盒子模型宽度 = item宽度(160px) + marginRight(20px) 
    + 没有marginLeft + 没有padding + 没有border
    = 180px

所以, 屏幕适配的结果是能够让 <div className='leftContent'> 在一行中多放置一个<item>盒子模型

网页宽度 <= 1400px时,
720px/180px = 4个<item>盒子模型;

网页宽度 > 1400px时,
<div className='container'>由 1160px - 980px = 180px;
<div className='leftContent'> 由 900px - 720px = 180px;
180px === 正好等于一个<item>盒子模型的宽度               

在之后使用时, 需要简单计算
1.计算<item>盒子模型的宽度
2.以网页的多少宽度(上面是1400px)作为分界线
3.根据<item>盒子模型的宽度, 来计算 <= 1400px 时宽度 和 > 1400px 时宽度
after - before = <item>盒子模型宽度