响应式布局

标签：最小   语句   body   meta   .com   dia   line   3.0   案例   

1，需要在头部添加：<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no″>

• 否则媒体查询里的width条件不好用，因为CSS像素是不变的；

2，添加媒体查询：@media only screen and (min-width: 287px) and (max-width: 500px)

• only的作用是让那些不支持width条件但却支持screen的设备忽略该语句，否则所有screen设备都会应用该样式
• 可以应用not关键字取反

3，可以在页面的body上设置最小宽度：min-width: #px;

案例：知乎，m.baidu.com

响应式布局

标签：最小   语句   body   meta   .com   dia   line   3.0   案例   

原文地址：http://www.cnblogs.com/jacky1982/p/7750717.html