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

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>

pink.css

body{
    background: pink;
}

yellow.css

body{
    background-color: yellow;
}

运行效果：

9.流式布局就是用百分比的形式。

标准流中如果不给块级元素给定宽度的话，默认就是撑满整个页面。

border是不能用百分比来表示的。

box-sizing：border-box //内减

不添加box-sizing的话就是外扩的

10.视口约束和媒体查询要结合在一起来使用

11.多加载一些样式表单的时候，就要做权重更高的设置

!important 来实现

特别说明：文中大部分的图片，均截自传智视频

来源：CSDN

作者：落花新月

链接：https://blog.csdn.net/luohuaxinyue/article/details/50945821

标签

视口