移动端的响应式布局 | 电脑端PC开发的也会放到手机端

1. rem的应用

 rem是相对于根元素的相对长度单位  。响应式嘛，会想到百分比；rem，会想到px，所以

html{
  font-size：62.5%;//那么此时的1rem  10px
}

2. meta  | meadia queries

因为移动端的响应式的代码几乎是固定的，也会根据情况进行变化

2.1 head里面meta -一般用于页面的说明：

【1】user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 

2.2 media queries是响应式的核心

@media screen and (...)  ：是个大范围的小于980px生效 

@media only screen and (...)  and ...  ：特殊屏幕大小适用

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}


// ipad 和手机 ，具体大小看设计
/** iPad **/
@media only screen and (min-width: 768px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

3 图片的问题

太大了，会失真，就缩小。太小了，可能就没有内容了，就原尺寸输出。所以，最大是原尺寸，最小

img { width: auto; max-width: 100%; } //auto有多看显示多宽  100%不能超过所在空间的宽度