//此次定义划分的份数为15
@no: 15;
//320
@media screen and (min-width: 320px) {
html {
font-size: 320px / @no;
}
}
// 引入:首页的样式 less 文件
// @import 导入的意思,可以把一个样式文件导入到另一个样式文件里面
@import "common";
min-width: 320px;
width: 15rem;
margin: 0 auto;
和上面的 rem+less媒体查询方案实现原理一样,都是通过改变 1rem(基础块)大小实现页面 整体元素改变;这个方案更为推荐
function setRemUnit () {
//docE1.clientWidth JS 获取当前屏幕的宽度
//除以10,得到基础块
var rem = docE1.clientWidth / 10
docE1.style.fontSize = rem + 'px'
}
介绍
操作
构建文件目录
准备工作
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
body {
width: 750px;
margin: 0 auto;
}
/* 1. 超小屏幕下 xs 小于 768 布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
}
/* 2. 小屏幕下 sm 大于等于 768 布局容器改为 750px */
@media screen and (min-width: 768px) {
}
/* 3. 中等屏幕下 md 大于等于 992px 布局容器修改为 970px */
@media screen and (min-width: 992px) {
}
/* 4. 大屏幕下 lg 大于等于 1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
}
/* 1. 超小屏幕下 xs 小于 768 布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
/* 2. 小屏幕下 sm 大于等于768 布局容器改为 750px */
@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}
/* 3. 中等屏幕下 md 大于等于 992px 布局容器修改为 970px */
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/* 4. 大屏幕下 lg 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
不同档位下,布局不同;
/* md 中屏以上 */
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
[class*="col-md-1"] {
width: 8.333333%;
}
[class*="col-md-2"] {
width: 16.666666%;
}
[class*="col-md-3"] {
width: 25%;
}
[class*="col-md-4"] {
width: 33.3333333%;
}
[class*="col-md-5"] {
width: 41.6666666666%;
}
[class*="col-md-6"] {
width: 50%;
}
[class*="col-md-7"] {
width: 58.33333333333%;
}
[class*="col-md-8"] {
width: 66.66666666666%;
}
[class*="col-md-9"] {
width: 75%;
}
[class*="col-md-10"] {
width: 83.33333333%;
}
[class*="col-md-11"] {
width: 91.66666666%;
}
[class*="col-md-12"] {
width: 100%;
}
}
// md档位
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
[class*="col-md-1"] {
width: 8.333333%;
}
}
// lg 档位
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
[class*="col-lg-1"] {
width: 8.333333%;
}
}
利用框架 bootstrap 可非常快地搭建出响应式页面;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 视口的设置:视口的宽度和设备一致,默认的缩放比例和PC端一致,用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Template</title>
<!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题-->
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- 条件注释:小于IE9的版本 -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
</body>
</html>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<p>...</p>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<!-- 上下文颜色 -->
<p class="text-muted">...</p>
<!-- 下拉三角 -->
<span class="caret"></span>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
作用:设置子元素在不同档位下的布局;
介绍
基本使用
<!-- 中屏和以上占有6份 -->
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<!-- 各个档位下,按照各个档位下布局 -->
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">1</div>
<div class="col-md-6 col-lg-8">2</div>
</div>
</div>
列嵌套
<!-- 直接嵌套 -->
<div class="col-sm-4">
<div class="col-sm-6">小列</div>
<div class="col-sm-6">小列</div>
</div>
<!-- 使用row嵌套 -->
<div class="col-sm-4">
<!-- 加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高; -->
<div class="row">
<div class="col-sm-6">小列</div>
<div class="col-sm-6">小列</div>
</div>
</div>
列偏移
<!-- 左右对齐-->
<div class="row">
<!-- 如果只有一个盒子 那么就偏移 = 12-4-4 -->
<div class="col-lg-4">1</div>
<div class="col-lg-4 col-lg-offset-4">2</div>
</div>
<!-- 居中-->
<div class="row">
<!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
<div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>
响应式工具