响应式设计概述

2017-05-11 15:04:36
admin
1035
最后编辑:admin 于 2017-05-11 16:18:08

响应式设计是针对浏览设备优化页面中既有内容的一种方法。比如,在桌面浏览器中既可以看到网站的常规版本,也可以在用户接入更大的显示器时看到针对宽屏的布局。在平板电脑中看到的是针对其横屏和竖屏模式优化之后的布局。而在手机上,则是能够适应更窄宽度的布局。为了适用不同的屏幕宽度,使用CSS的媒体查询(media query)来检测浏览器视口的宽度,然后再根据条件加载和应用调整布局的样式表。根据浏览器视口的宽度,CSS可以按照纵横比或宽度的范围来优化布局,但最主要还是使用min-width和maxwidth属性。

Bootstrap内部支持5种不同的布局,都依赖于CSS媒体查询。最大布局中每一列的宽度为70像素,而常规布局中每一列宽度是60像素。在适合平板电脑的布局中,列宽缩小为42像素,再窄一点,每一列就会流动起来,变成在垂直方向上堆叠,并且都与视口同宽(见表1-1)。

表1-1响应式媒体查询

目标设备 布局宽度 列 宽 列间距
大屏幕 至少1200px 70px 30px
常规 至少980px 60px 20px
平板竖屏 至少768px 42px 20px
手机到平板 至多767px 流式列,宽度不固定
手机 至多480px 流式列,宽度不固定

要根据媒体查询添加自定义的CSS,可以像下面这样把所有规则写到一个CSS文件中,也可以单写一个CSS文件:

/*大屏幕*/@media (min-width: 1200px) { ...}

/*平板竖屏到横屏到常规屏幕*/@media (min-width: 768px) and (max-width: 979px) { ...}

/*手机横屏到平板竖屏*/@media (max-width: 767px) { ...}

/*手机横屏及更小屏幕*/@media (max-width: 480px) { ...}

对于大型网站,应该把不同的媒体查询分别保存在单独的CSS文件中。而在HTML的<link>标签中,可以根据条件加载它们。这样可以保证加载的文件相对小,但在响应式布局中会增加HTTP请示。

<link rel="stylesheet" href="base.css" />

<link rel="stylesheet" media="(min-width: 1200px)" href="large.css" />

<link rel="stylesheet" media="(min-width: 768px) and (max-width: 979px)"

href="tablet.css" />

<link rel="stylesheet" media="(max-width: 767px)" href="tablet.css" />

<link rel="stylesheet" media="(max-width: 480px)" href="phone.css" />

  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227