响应式手机网站——视口约束&媒体查询

来源：互联网发布：js获取兄弟节点编辑：程序博客网时间：2024/05/22 03:42

1.http://mediaqueri.es/ 响应式网站

2.用谷歌浏览器模仿各种移动设备。

3.设备检测：

1）device.js库

（图片截自传智视频）

2）页面跳转：window.location=URL;

4.检测屏幕

更改页面的CSS样式：（有点像hao360换肤的效果）

（图片截自传智视频）

5.window对象的事件：

1）onload加载完成

2）onresize 尺寸更改

3）onscroll 滚动滚轮

6.视口

比如IPhone手机返回的视口宽度大于它实际的宽度的一个现象

如执行如下代码，就会返回窗口的宽度：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>媒体查询</title>    <!--<link rel="stylesheet" href="pink.css" media="(min-width:750px)">-->    <!--<link rel="stylesheet" href="yellow.css" media="(max-width:749px)">--></head><body>  <h1 id="test"></h1>  <script type="text/javascript">      document.getElementById("test").innerHTML=document.documentElement.clientWidth;  </script></body></html>

但是如果用模拟器打开浏览器后，会发现返回的视口宽度是980，而实际上屏幕的宽度是375：

分辨率和视口没有关系（下面的代码是用来规范和约束视口的）

<meta content="width=device-width,minimum-scale=1.00001,maximum-scale=1.00001,shrink-to-fit=no,user-scalable=no,minimal-ui" name="viewport"> （去哪儿的写法）

<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> （神州租车的写法）

约束视口的意义：

（图片截自传智视频）

7.媒体查询，更换CSS样式表：

（图片截自传智视频）

媒体查询是从IE9开始支持的，但是智能手机的浏览器都是支持的

媒体查询：更够智能地根据用户的浏览器的大小来选择加载不同的CSS样式表

8.内嵌式的媒体查询：

简单测试代码：

html页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>媒体查询</title>    <link rel="stylesheet" href="pink.css" media="(min-width:750px)">    <link rel="stylesheet" href="yellow.css" media="(max-width:749px)"></head><body>  </body></html>