手机能自动适配需要加上下面这句话
(1)声明元标签 viewport (手机适配)
<meta name="viewport" content="width=device-width,initial-scale=1.0">
width=device-width 表示视口宽度就是设备宽度
initial-scale=1.0 表示视口宽度是否缩放1.0不缩放
(2)使用流式布局
实现方法:float:left;
(3)所有容器/文字/图片 使用相对大小尺寸不使用绝对大小
(4)最重要的原则,使用CSS3 Media Query技术(重点)
Media:指浏览网页的设备，如screen(pc/pad/phone),print,tv
Media Query:查询出当前浏览网页设备的类型，以及特性(解析度，尺寸，手持方向等)不同，而有选择性的执行某些CSS代码，而忽略另外一些.
#媒体查询两种方式
(1)根据媒体查询结果执行不同CSS文件
<link media="screen and (min-768px) and (max-991px)" rel="stylesheet" href="pad.css" />
(2)根据媒体查询结果执行不同CSS片段(重点)
@media screen and (min-768px) and (max-991px){
选择器(样式)
}