本教程讲解如何在网页布局中应用响应式设计。在课程中,您将学到响应式 Web 设计。随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了。响应式 Web 设计就是为实现这个目的的有效方法。

什么是响应式 Web 设计

响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手机的屏幕尺寸远小于计算机显示器,但是你却没有感觉到任何差别,两者的用户体验几乎一样,这说明这个网站在响应式设计方面做得很好。

我们已经在我们的流动布局实例中应用了响应性能,并请您在不同的屏幕尺寸下进行浏览。您可以通过 Chrome 或 FireFox 的窗口大小调整的扩展来调整浏览器。

点击这里,可以查看 Bootstrap 响应式设计实例

响应式 Web 设计工作原理

为了应用响应式 Web 设计,您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载,该页面上使用了各种字体和 Web 开发技术,比如媒体查询(Media Queries),此时,会先检测设备的视口大小,然后加载特定于设备的样式。

深入研究响应式 Web 设计的 CSS

我们将通过 'bootstrap-responsive.css' 的学习,来了解"响应式设计"是如何实现细微差别的。在这之前,您必须在网页的头部区域加入下面这行代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

视口的 meta 标签,重写了默认的视口,并帮助加载与特定视口相关的样式。

width 属性设置屏幕宽度。它包含一个值,比如 320,表示 320 像素,或者值为 'device-width',用来告诉浏览器使用原始的分辨率。

initial-scale 属性是视口最初的比例。当设置为 1.0 时,将呈现设备的原始宽度。

当然,您必须添加 Bootstrap 的响应式 CSS,如下所示:

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

现在,如果您查找响应式 CSS 文件,您会发现,在一些公共的声明后边(从行号 10 到 22),有各种以 '@media' 开始的区域。这就是如何编写适用于各种设备的样式。

第一个区域以 '@media (max-width: 480px)' 开始,为最大宽度为 480 像素的设备设置样式。

第二个区域以 '@media (max-width: 767px)' 开始,为最大宽度为 767像素的设备设置样式。

第三个区域以 '@media (min-width: 768px) 和 (max-width: 979px)' 开始,为最大宽度为 768 像素和最大宽度为 979 像素的设备设置样式。

下一个区域是为最大宽度为 979 像素的设备设置样式。所以是以 '@media (max-width: 979px)' 开始。

最后两个区域分别以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 开始,前一个是为最小宽度为 980 像素的设备设置样式,后一个是为最小宽度为 1200 像素的设备设置样式。

所以,这样样式表的基本作用就是,通过使用 'min-width' 和 'max-width' 属性,来根据设备的最大宽度和最小宽度决定使用的样式。

解释

为了让布局更具响应性,Bootstrap 做了三件事情:

1. 修改了网格中列的宽度。

2. 只要有需要,它就使用堆栈元素,而不是浮动元素。如果您还不清楚什么是堆栈元素,下面来自 w3.org 的表单可能会提供一些帮助:

根元素(html)形成了堆栈上下文的根,其他堆栈上下文通过任意定位的元素生成(包括相对定位元素,有一个 'z-index' 的计算值,而不是 'auto')。堆栈上下文相对与包含的块不是必需的。

3.要正确地渲染标题和文字它们的尺寸。

更快地开发对移动设备友好的布局

Bootstrap 有几个实用的用于开发对移动设备友好的布局的类。这些类可在 'responsive.less' 上看到。

.visible-phone,在宽度为 767px 及以下的手机上可见,在 979px 到 768px 的平板上隐藏不可见,在桌面上隐藏不可见,这是默认的。

.visible-tablet,在宽度为 767px 及以下的手机上隐藏不可见,在 979px 到 768px 的平板上可见,在桌面上隐藏不可见,这是默认的。

.visible-desktop,在宽度为 767px 及以下的手机上隐藏不可见,在 979px 到 768px 的平板上隐藏不可见,在桌面上可见,这是默认的。

.hidden-phone,在宽度为 767px 及以下的手机上隐藏不可见,在 979px 到 768px 的平板上可见,在桌面上可见,这是默认的。

.hidden-tablet,在宽度为 767px 及以下的手机上可见,在 979px 到 768px 的平板上隐藏不可见,在桌面上可见,这是默认的。

.hidden-desktop,在宽度为 767px 及以下的手机上可见,在 979px 到 768px 的平板上可见,在桌面上隐藏不可见,这是默认的。

点击这里,下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。

Bootstrap 响应式设计的更多相关文章

  1. bootstrap响应式设计简单实践。

    首先需要熟悉Boostrap提供的响应式设施:http://getbootstrap.com/css/#responsive-utilities,BootStrap的响应式设施主要是利用媒体查询对元素 ...

  2. bootstrap响应式网页设计的9条基本原则!

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  3. paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54

    paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54 #-----响应式 设计框架 Bootstrap比较热门. Foundation 号称是世界上最先进的响应式前端框架. #---绝 ...

  4. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  5. CSS3知识点整理(五)----响应式设计及其他属性

    介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...

  6. Bootstrap & 响应式

    要了解一个东西 就是要知道 它是什么? 干什么 ? 怎么用 ? 1.Bootstrap 简介   Bootstrap 是由Twitter(著名的社交网站)推出的前端开源工具包,它基于Html.CSS. ...

  7. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  8. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

  9. Windows10 UWP开发 - 响应式设计

      Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结, ...

随机推荐

  1. Maya 脚本控制物体自转

    在Maya中,我们可以用脚本来控制物体的自转方向,速度等等,步骤如下: 选择需要操作的物体object,打开通道盒Channel Box,点击编辑Edit,打开表达式Expressions面板 选择需 ...

  2. PCL Show Point Cloud 显示点云

    在使用PCL库的时候,经常需要显示点云,可以用下面这段代码: #include <pcl/visualization/cloud_viewer.h> pcl::PointCloud< ...

  3. winform记事本初步实现

    public Form1() { InitializeComponent(); } private void 剪切TToolStripMenuItem_Click(object sender, Eve ...

  4. vsphere平台为win系统动态扩展磁盘

    1.关闭win虚拟机 2.在vcenter管理中加大磁盘空间 3.开启win虚拟机(此时磁盘并没有加大) 4.打开cmd命令行: 进入分区管理--->查看磁盘--->选择磁盘---> ...

  5. Android-----工程文件目录介绍

  6. JAVA6开发WebService (三)——几个概念

    转载自http://wuhongyu.iteye.com/blog/808922 要了解WebService,光能写代码不行啊,这说说WebService最基本的概念. 首先WebService要知道 ...

  7. c# select标签绑定枚举,并以Description做Text显示

    今天在做项目时遇到一个问题: 开发中有些字段是枚举类型如 Dept 企业表中可能有个字段 Property 性质 0:事业单位,1:私企,2:外企,但有时我们不会单独为性质这个字段定义一张表, 而是在 ...

  8. myeclipse + tomcat 项目自动部署

    在MyEclipse中设置项目的自动部署需要综合考虑两个方面: 1是MyEclipse本身,通过主菜单中project->auto ,另一个就是tomcat配置文件.配置文件包括 conf 下的 ...

  9. Android课程---单选框与复选框的实现

    <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="ht ...

  10. 实现memcpy

    memcpy的原型: SYNOPSIS #include <string.h> void *memcpy(void *dest, const void *src, size_t n); D ...