开发者学堂课程【移动 Web 前端开发：首页-版心容器】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8402
首页-版心容器
一、版心容器介绍
首先分析一下京东页面结构，在 pc 端页面看到的页面：
固定像素容器并且居中，但是放在移动端就不是固定像素了，这时候不应该设置固定大小，因为当把界面拉到一定程度后就会固定住，说明有一个最大宽度限制。
当缩小到最小时出现滚动条，说明有一个最小宽度限制。所以要在最大和最小宽度内做一个自适应。
首先，需要一个版心容器，在 320-640 宽度之间自适应：
class="jd container">
这时候需要把页面修饰出来，在 index.css 中做一个版心容器：
.jd container {
//宽度肯定是百分百，最大和最小宽度的限制，并且在比较大的屏幕里居中显示，设置高度和背景颜色。
width:100%;
max-width: 640px;
min-width: 320px;
margin: o auto;
height: 200px;
background: yellowgreent；
}
刷新后会出现设置好的容器，按下 F12，在页面中拉界面，大于640居中在中间，当缩小到373出现滚动条，说明在范围内是一个自适应容器，在范围外是一个固定版心容器，在范围更小时出现滚动条。
版心容器的功能没有问题。
此时还有一个问题是 max-width 是640和设计稿大小有关系，（ psd 图）
京东网页是 640px 大小的设计稿设计出来的。市面上还有一种 750px 大小的设计稿
640px 宽度是早期标准，因为早期有标准参考设备：iphone 4
因为 640px 宽度压缩到 320px 宽度中是完美显示。
750px 宽度是现在主流标准，标准参考设备： iphone 6 也能达到完美显示。
所以 640px 基于设计稿，目的是不失真
为什么 min-width 是 320
是为了保证网页内容、布局不受太小屏幕影响。
