响应式网页设计_编写一个响应式网页,在大于或等于768px的屏幕设备上显示“这是大型或中型屏幕-CSDN博客

本文链接：https://blog.csdn.net/zouchao911/article/details/43308755

响应式网页设计(Responsive Web design)

1、什么叫响应式网页设计

可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。

2、设备检测

现在的市面上终端设备种类繁多，有PC、iPod、iPhone、Android、 BlackBerry Windows Phone 等等。

那么开发人员如何检测这些设备？

根据http协议，每台设备的浏览器发送http请求时，请求头都包含一个“user-agent”字段，该字段包含当前设备信息，浏览器内核信息，所使用的操作系统等信息。那么我们就可以根据这些信息来判断设备种类。

在前端页面可以通过js代码来获取"user-agent"信息

js： navigator.userAgent

在后台可以通过request对象的“ user-agent”字段来获取

下面介绍一个非常好用的设备检测的前端js库：device.js 下载地址： https://github.com/matthewhudson/device.js

device.js库的简单用法：

首先在页面中引入下载的device.js库：<script src="device.js"></script>

然后在页面的script脚本中加入判断代码：

device.mobile() 判断设备是否是手机，返回一个boolean值

device.ios() 判断是否是IOS设备

device.android() 判断是否是安卓设备

device.desktop() 判断是否是电脑

更多设备的检测方法，请参照给出的github上的下载地址。

3、根据屏幕宽度，更换样式表

1）js获取页面宽度和高度

document.documentElement.clientWidth（网页可见区域宽）

document.documentElement.clientHeight（网页可见区域高）

2）绑定页面大小改变事件

window.onresize = function(){}

实验：

1、编写两个css文件，文件1.css内容: body {background-color: orange;}，文件2.css内容： body {background-color: green;}

2、编写一个测试页面：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link id="stylelink" rel="stylesheet" type="text/css" href="1.css">
 <title></title>
</head>
<body>
 <script type="text/javascript">
  change();
  window.onresize = function() {
   change();
  };
  function change() {
   var width = document.documentElement.clientWidth;
   var styleLink = document.getElementById('stylelink');
//页面宽度大于600
   if (width > 600) {
    styleLink.href = '1.css';
   }
//页面宽度小于600的样式
   else {
    styleLink.href = '2.css';
   }
  }
 </script>
</body>
</html>

4、视口（viewport)

当我们的浏览器在窗口最大化的时候，此时屏幕的宽度，就是我们桌面的分辨率。这个规则仅仅适用于PC！

我们试图在iPhone中输出屏幕宽度，你会发现屏幕宽度是980！居然和PC屏幕差不多大！怎么可能？

viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。苹果主导的这些手机厂商，为了使用户获得完整web体验（就是让用户在手机屏幕上，也能够看见完整的PC网页），大部分设备都会欺骗浏览器返回一个数值较大的“视口”(viewport)，告诉浏览器，别以为我身子小，但是我想以980px宽度来显示这个页面。带来的后果就是浏览器会出现横向滚动条或页面文字图片变的很小，因为移动设备的浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

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

为了在移动设备上能够很好的显示网页效果，需要约束视口宽度。

约束视口宽度：

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视口约束标记！！！

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

在页面添加以下两行代码：