Bootstrap响应式原理和设计

Posted 2022-12-04 Wendy-lxq

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap响应式原理和设计相关的知识，希望对你有一定的参考价值。

响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。

响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了

首先我们应该遵循移动优先原则，交互&设计应以移动端为主，PC则作为移动端的一个扩展；一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：

响应式布局
响应式内容（图片、多媒体）

响应式实现有3个主要的方法：

设备检测
通过JS检测屏幕宽度，更换样式表
CSS3中媒体查询，更换样式表

1、设备检测

我们访问新浪网的时候，当输入网址www.sina.com.cn的时候，检测用户的设备，如果用户用的是PC，那么留在原地。如果检测到用户是手机访问的，就跳转到https://sina.cn/?from=web这个网址去。那么为了实现这个效果，我们可以用一个库，device.min.js。这是一种最简单的方法。device.js库，不依赖jQuery框架。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/device.min.js" language="javascript"></script>
    <title>Title</title>
</head>
<body>
<h1 id="textH1"></h1>

<script>
    window.onload = function () 
        var oH1 = document.getElementById("textH1");
        if(device.mobile())
            oH1.innerText="哈哈，我是手机！";
        else if(device.ipad())
            oH1.innerText="哈哈，我是土豪，我有ipad！";
        else if(device.tablet())
            oH1.innerText="哈哈，我是大屏幕手机！";
        else
            oH1.innerText="哈哈，我是最普通的PC！";
        
    
</script>
</body>
</html>

罗列一下device.js中的几个设备检测参数：

device.portrait() → 检测设备是否是竖直的；
device.landscape() → 检测设备是否是水平的；
device.mobile() → 检测设备是否是手机；
device.ipad() → 检测设备是否是ipad；
device.iphone() → 检测设备是否是苹果手机；
device.android() → 检测设备是否是安卓手机；
device.tablet() → 检测设备是否是大屏幕手机（7寸以上）；

如果想要实现根据不同设备进行跳转不同页面，实现方法也很简单，只要通过window.location = “URL地址”就可以实现。这种方法需要制作两套站：PC站、手机站。存放在不同的服务器或者文件夹中。通过设备检测来实现自动跳转，也就是说，对于用户来说，没有必要去记忆两个网址，只需要记忆一个PC网址即可。手机中直接输入这个PC网址www.sina.com.cn，JavaScript设备检测，来实现跳转。

2、通过JS检测屏幕宽度，更换样式表

通过js检测当前屏幕的宽度，然后根据宽度进行样式的设计。接下来，我写一个最简单的代码来检测当前的屏幕宽度并显示当前的宽度，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/device.min.js" language="JavaScript"></script>
    <title>Title</title>
</head>
<body>
    <div id="msg"></div>
<script>
    window.onload = function () 
        changeScreenWidth();
        function changeScreenWidth()
            var width = document.documentElement.clientWidth;
            document.getElementById("msg").innerHTML="网页宽度：" + width;
        

        window.onresize = changeScreenWidth;
    
</script>
</body>
</html>

效果如下：

通过js检测屏幕宽度并更换样式表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/device.min.js" language="JavaScript"></script>
    <link id="csslink" href="css/c1.css" rel="stylesheet" type="text/css">
    <title>Title</title>
</head>
<body>
    <div id="msg"></div>
<script>
    window.onload = function () 
        changeScreenWidth();
        function changeScreenWidth()
            var width = document.documentElement.clientWidth;
            document.getElementById("msg").innerHTML="网页宽度：" + width;
            if(width > 700)
                document.getElementById("csslink").href="css/c1.css";
            else
                document.getElementById("csslink").href="css/c2.css";
            
        

        window.onresize = changeScreenWidth;
    
</script>
</body>
</html>

接下来总结一个很重要的概念：视口。

当我们的浏览器在窗口最大化的时候，此时屏幕的宽度，就是我们桌面的分辨率。这个规则仅仅适用于PC！我们试图在iPhone中输出屏幕宽度，你会发现屏幕宽度是980！居然和PC屏幕差不多大！怎么可能？！
苹果主导的这些手机厂商，为了使用户获得完整web体验（就是让用户在手机屏幕上，也能够看见完整的PC网页），就大部分设备都会欺骗浏览器返回一个数值较大的“视口”(viewport)，告诉浏览器，别以为我身子小，但是我想以980px宽度来显示这个页面。iPhone的分辨率1136*640，三星Note3的分辨率1920*1080。但是分辨率和视口没有关系。他们的视口都是980px。也就是说说，一个width值为980px的盒子，能够在这样的手机中撑满整个页面，并且恰好不出现横向滚动条。

视口对于我们实现响应式是很不方便的。980太大了，不符合我们心中的期待。我们心中认为手机屏幕尺寸应该小300~400之间。

我们在<head></head>中一般会加入这句进行约束视口。

viewport：词典原义是视角、视口、检测区。而网页中meta标签的viewport属性是什么含义、起着什么作用，下面简单讲述下，并实例说明。

页面viewport：它在页面中设置，是应对手机模式访问网站、网页对屏幕而做的一些设置。通常手机浏览器打开页面后，会把页面放在一个虚拟的“窗口”–这个比窗口大，也就是你常发现页面可以进行拖动、放大放小，这个窗口即viewport，meta的这个viewport属性基本所有手机浏览器皆支持。

viewport属性各个参数：
如实例： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

width：viewport 的宽度，可以指定为一个像素值，如：600，或者为特殊的值，如：device-width （设备的宽度）
height：viewport的高度。
initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。
maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0。
minimum-scale：允许浏览者缩放到的最小比例，一般设为1.0。
user-scalable：浏览者是否可以手动缩放，yes或no。

对于手机浏览器浏览页面，常对viewport进行如下设置即可：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1″>
含义为：宽为手机移动设备默认宽度，初始缩放比例为1.0，最大缩放比例为原始像素大小。

一个id和name为viewport 的meta元标记，就表示现在要约束视口了。具体约束规则，写在content中，每个约束规则，用逗号隔开。

width=device-width → 命令视口的宽度，变为设备的宽（以1024*768屏幕为标准。iPhone等手机通常为320~380之间不等）
initial-scale=1.0 → 命令视口默认的缩放等级为1
minimum-scale=1.0 → 命令视口最小缩放等级为1
maximum-scale=1.0, → 命令视口最大缩放等级为1
user-scalable=no → 不允许用户缩放页面

加上了meta视口约束标记之后，iPhone的视口宽度就是320px。所有的手机响应式界面，都要记得加上meta viewport视口约束标记！

3、CSS3中媒体查询，更换样式表

在说明这个之前，先来看2行代码：

还没开始写一句JS，让页面能够根据宽度来更换样式表了。方法就是用CSS3媒体查询！ media属性就是媒体查询的属性。其实并不是只有CSS3才支持Media的用法，早在CSS2开始就已经支持Media，具体用法，就是在HTML页面的heaad标签中插入如上的一段代码。
min-width:600px；用这个样式表的条件，就是屏幕的最小尺寸为600px。大于等于600px的时候，用C1.css样式表。
max-width:599px; 用这个样式表的条件，就是屏幕的最大尺寸为599px。小于等于599px的时候，用C2.css样式表。

完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/c1.css" rel="stylesheet" type="text/css" media="(min-width:700px)">
    <link href="css/c2.css" rel="stylesheet" type="text/css" media="(max-width:699px)">
    <title>通过css3媒体查询修改样式</title>
</head>
<body>
    <div>通过css3媒体查询修改样式</div>
</body>
</html>

媒体查询的兼容性：IE9开始兼容的！ JavaScript检测宽度更换样式表，是IE6也兼容。媒体查询是CSS3中新特性。除了可以通过改变还外部样式表进行设计之外，还可以用在内嵌式。如下：

	<style type="text/css">
		@media (min-width: 800px)
			div
				width: 200px;
				height: 200px;
				background: red;
			

		

		@media (max-width: 799px)
			div
				width: 100px;
				height: 600px;
				background: blue
			
		
	</style>

具体的使用方法如下：

当浏览器尺寸小于960px时候的代码：

@media screen and (max-width:960px)
    body
         background:red;

当浏览器尺寸大于960px时候的代码：

@media screen and (min-width:960px) 
     body
           background:orange;

我们还可以混合使用上面的用法：

@media screen and (min-width:960px) and (max-width:1200px)
      body
              background:yellow;

上面的这段代码的意思是当页面宽度大于960px小于1200px的时候执行下面的CSS。

以上是关于Bootstrap响应式原理和设计的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap和flex的比较，清除浮动的实现原理

面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？