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-480px)" />
media="only screen and (max-480px)"表示,当浏览器显示窗口宽度小于480px的时候,就引用css.css文件
直接在head,style中编写
@media screen and (min-480px){
body{background-color:#ff00ff}
}