02 响应式设计基础

最新推荐文章于 2025-10-15 15:22:08 发布

原创最新推荐文章于 2025-10-15 15:22:08 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #Bootstrap

本文深入探讨响应式设计的核心概念，讲解如何使网页在不同设备上自适应显示，包括响应式图片、布局结构设计，以及栅格系统的应用，助力开发者构建跨平台的优质用户体验。

响应式设计

认识响应式设计
栅格系统

认识响应式设计

响应式设计可以使网页适应不同的设备，开发人员只需要正确地实现响应式Web设计，网站就可以很好地适合各种设备。在现阶段，响应式Web设计的实现途径包括：弹性网络、液态布局、弹性图片显示、使用CSS Media Query技术等，基本设计思路如下：

保证页面元素及布局具有足够的弹性来兼容各类设备平台和屏幕尺寸
增强可读性和易用性，帮助用户在任何设备环境中都能更容易地获取最重要的内容信息

设计响应式图片

首先应该设置图片具有弹性能力，弹性图片的设计思路：无论何时，都确保在图片原始宽度范围内，以最大的宽度同比完整地显示图片。不必在样式表中为图片设置宽度和高度，只需要让样式表在窗口尺寸发生变化时，辅助浏览器对图片进行缩放。比较流行的方法是使用CSS的max-width属性：

img{
	max-width: 100%
}

上面代码确保图片最大的宽度不会超过浏览器窗口或者是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄的时候，图片的最大宽度值也会相应减小，图片本身永远不会被容器边缘隐藏或覆盖。老版本的IE不支持max-width，对其可以单独设置为：

img{
	width : 100%
}

当windows平台缩放图片时，可能出现图像失真现象，这时可以尝试使用IE的专有命令：

img {
	-ms-interplation-mode : bicubic
}

如果有条件的话，最好能根据不同大小的屏幕，加载不同分辨率的图片。在iPhone、iPod Touch中页面会被自动同比例缩小至最合适屏幕大小的尺寸，X轴不会产生滚动条，用户可以上下拖拽浏览全部页面，或在需要时放大页面的局部。这里会产生一个问题，即使使用响应式Web设计的方法专门为iPhone输出小图片，同样会随着整个页面一起被同比缩小。针对这个问题，可以使用苹果专有meta标记来解决类似的问题，在head标签添加以下代码：

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

viewport是网页默认的宽度和高度，上面的代码的意思是，网页宽度默认等于屏幕宽度，原始缩放比例为1.0，即网页初始大小占屏幕面积的100%。在Bootstrap3.0中可以通过添加.img-responsive类样式，让Bootstrap3.0中的图片对响应式布局的支持更友好：

<img src="..." class="img-responsive" alt="Responsive image">

其实质就是为图片赋予max-wdith: 100%和height : auto属性，可以让图片按比例缩放，不超过其包含框的尺寸。

设计响应式布局结构

由于网页需要根据屏幕宽度自动调整布局，首先，不能使用绝对宽度的布局，不能使用具有绝对宽度的元素。具体来说，就是不能指定像素宽度，只能指定百分比。

/* 不能指定像素宽度 */
width : 940px;

/* 使用百分比宽度 */
width: 100%;

/* 或者 */
width : auto;

网页字体大小也不能使用绝对大小（px），而只能使用相对大小（em），例如：

/* 指定字体大小是页面默认大小的100%， 即16像素 */
body {
	font: normal 100% Helvetica, Arial, sans-serif;
}

/* 然后定义一级标题的大小是默认字体大小的1.5倍，即24像素 */
h1 {
	font-size : 1.5em;
}

流体布局是响应式设计中的一个重要方面，它要求页面中各个区块的位置都是浮动的，不是固定不变的。

.main {
	float : right;
	width : 70%;
}

.leftBar {
	float : left;
	width : 25%;
}

float的优势是如果宽度太小，并列显示不下两个元素，后面的元素会自动在前面元素的下方显示，而不会出现水平方向overflow（溢出），避免了水平滚动条的出现。另外，应该尽量减少绝对定位（postition: absolute）的使用。
在响应式网页设计中，除了图片方面，还应该考虑页面布局结构的响应式调整。一般可以使用独立的样式表，或者使用CSS Media Query技术。CSS3支持CSS1中定义的媒体类型，同时添加了很多涉及及媒体类型的功能属性，包括max-width（最大宽度）、device-width（设备宽度）、orientation（屏幕定向：横屏或竖屏）和color。用户可以创建多个样式表，以适应不同设备类型的宽度范围，更有效率的做法是，将多个Media Queries整合在一个样式表文件中：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
    /* Styles */
}
@media only screen and (min-width : 321px){
    /* Styles */
}

自适应显示页面

对于响应式Web设计，同比例缩放元素尺寸以及调整页面结构布局是两个重要的响应方法。但是对页面中的文字内容信息来说，则不能简单地以同比例缩小，或者调整布局结构的方法进行处理。对于手机移动设备来说，在文字内容方面，已经有很多最佳方式和指导原则：简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。针对这个问题，可以使用下面这条样式代码来解决：

display : none;

注意不能使用visiblity: hidden的方法，因为这只能使元素在视觉上不做呈现：display属性则可以帮助我们设置整块内容是否需要被输出。下面看一个简单的响应式页面的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* for 980px or less */
        @media screen and (max-width : 980px){
            #pagewrap {
                width : 94%;
            }
            #content {
                width : 65%;
                float: left;
            }
            #sidebar {
                width : 30%;
                float: right;
            }
            #footer{
                width: 100%;
                clear: both;
            }
        }

        /* for 700px or less*/
        @media screen and (max-width : 800px){
            #content {
                width: auto;
                float: none;
            }
            #sidebar {
                width: auto;
                float: none;
            }
        }
        /* for 480px or less*/
        @media screen and (max-width : 700px){
            #header {
                height: auto;
            }
            h1 {
                font-size: 24px;
            }
            #sidebar{
                display: none;
            }
        }
    </style>
</head>
<body>
    <div id="pagewrap">
        <div id="header">
            <h1>Header</h1>
            <p>text Header</p>
        </div>
        <div id="content">
            <h2>content</h2>
            <p>text content</p>
        </div>
        <div id="sidebar">
            <h3>sidebar</h3>
            <p>text sidebar</p>
        </div>
        <div id="footer">
            <h4>Footer</h4>
            <p>text footer</p>
        </div>
    </div>
</body>
</html>

栅格系统

栅格系统也称为网格系统，它运用固定的格子设计版面布局，以规则的网格阵列来指导和规范网页中的布局以及信息分布。栅格系统的优点是设计的网页版面工整整洁。

网页栅格系统设计基础

在网页设计中，如果把网页宽度平均分为N个网格单元，每个单元之间预留一定的空隙，此时整个页面就如同一个网格系统。如果把网页的宽度设置为W，页面分割成n个网格单元，每个单元假设为a，每个单元与单元之间的间隙设为i，同时把a+i定义为A，即一个单元宽度，则可以定义一个等式：W = ( a * n ) + ( n - 1 ) * i。由于a + i = A，可得( A * n ) - i = W，这个公式表述了网页布局与网页背后的栅格系统之间的某种关系。
在这里插入图片描述
在网页设计中，当创建网页结构复杂的门户型网站时，一般习惯地设置页面宽度为固定宽度，同时多选择宽度为950px / 960px。目前大多数显示器都支持 1024 * 768及其以上分辨率，为了有效利用屏幕宽度同时保证栅格的灵活度，可以看出960是非常合适的。
将页面总宽度设置为W，每一列的宽度设置为c，槽（每一列之间的距离）设置为g，Margin（两边的距离）的宽度设置为m，列的个数设置为N，可以得到公式： W = c * N + g * (N - 1) + 2 * m。一般来说槽的宽度是Margin宽度的2倍，上面的公式可以简化为： W = c * N + g * (N - 1) + g = (c + g) * N。
在这里插入图片描述