编写一个响应式网页过程

手机能自动适配需要加上下面这句话

(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){

          选择器(样式)

     }