响应式布局

一、开发原则

    1、移动优先，在设计初期，就要考虑页面如何在多终端显示

    2、渐进增强，充分发挥硬件设备的最大功能

二、如何实现相应布局方法

    1、css3-Media Query，最简单

    2、借助原生javascript，成本高

    3、开源框架，可以更好的支持多终端

三、CSS3-media Query

    常见属性：

        device-width,devic-height，根据屏幕宽高来做不同的展示

        width,height，渲染窗口宽高

        orientation，设备方向

        resolution，设备分辨率

四、实际案例

    css.css文件中写入

body{background-color:red;}

    在head中引用css

<link rel="stylesheet" type="text/css" href="css.css" media="only screen and (max-width:480px)" />

    media="only screen and (max-width:480px)"表示，当浏览器显示窗口宽度小于480px的时候，就引用css.css文件

    直接在head，style中编写

@media screen and (min-width:480px){
 body{background-color:#ff00ff}
}

来自为知笔记(Wiz)