简述响应式页面

个人理解

• 响应式页面的核心就是在不同的分辨率下改变内容宽度。

实现响应式页面四大要点

• 在html头部加上
  
  • <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  • viewport代表视图，width=device-width代表当前页面宽度=设备可用区域宽度，initial-scale=1.0代表页面初始缩放比例为100%，minimum-scale-1.0和maximum-scale=1.0分别代表页面最小缩放和最大为100%,最后user-scalable=no表示用户不能缩放页面。
• 用css3.0的媒体查询media，以下是参考的媒体查询分界
  
  • @media screen and (max-width:959px){
#top,#header,#content,#footer{width:800px;}
}
@media screen and (max-width:799px){
#top,#header,#content,#footer{width:640px;}
}
@media screen and (max-width:639px){
#top,#header,#content,#footer{width:480px;}
}
@media screen and (max-width:479px){
#top,#header,#content,#footer{width:400px;}
}
@media screen and (max-width:399px){
#top,#header,#content,#footer{width:320px;}
}
• 页面字体使用rem，会跟着页面的变化。使用rem最好是先定义页面字体为62.5%即10px，之后使用rem就很方便了，1.1rem=11px，1.2rem=12px。
• 页面使用伸缩布局flexBox，具体的flexBox使用方法参见使用flexBox布局