前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询
前端项目微金所笔记1
基础的bootstrap模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Compatible(兼容)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- 此属性为文档兼容模式声明,表示如果在IE浏览器下则使用最新的标准渲染当前文档
Viewport(视口)
<meta name="viewport" content="width=device-width, initial-scale=1">
- 视口的作用: 在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备那么大,然后展示
- 目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)
- width: 视口的宽度
- initial-scale: 初始化缩放
- user-scalable: 是否允许用户自行缩放(取值: yes/no;1/0)
- minimum-scale: 最小缩放,一般设置了
user-scalable = no(用户不允许缩放),就没有必要设置最小和最大缩放了 - maximum-scale: 最大缩放
条件注释
- 条件注释的作用是当判断条件满足的时候,就会执行注释中的HTML代码,不满足时会当做注释忽略掉
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
第三方依赖
Bootstrap框架中的所有JS组件都是依赖于jQuery实现
让低版本的浏览器可以识别HTML5的新标签,如header,footer,section等
让低版本的浏览器可以支持CSS媒体查询功能
MediaQuery媒体查询
@media (判断条件（针对于当前窗口的判断）){
/*这里的代码只有当判断条件满足时才会执行*/
}
- 最大宽度max-width - 媒体类型小于或等于指定的宽度时,执行代码
@media screen and (max-width:480px){
.ads {
display:none;
}
}
- 最小宽度min-width - 媒体类型大于或等于指定宽度时,样式生效
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
- 多个媒体特性使用 - 关键词
and,案例中的意思是当媒体宽度在768和922之间时,执行代码
@media (min-width: 768px) and (max-width: 992px) {
.container {
width: 750px;
}
}
Media所有参数汇总
- width:浏览器可视宽度。
- height:浏览器可视高度。
- device-width:设备屏幕的宽度。
- device-height:设备屏幕的高度。
- orientation:检测设备目前处于横向还是纵向状态。
- aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
- device-aspect-ratio:检测设备的宽度和高度的比例。
- color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
- color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
- monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
- resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
- grid:检测输出的设备是网格的还是位图设备。
