rem布局

1.rem单位

2.媒体查询

2.1 什么是媒体查询

2.2 媒体查询语法规范

2.3 媒体查询+rem实现元素动态大小变化

2.4 引入资源

3. less 基础

3.1 维护css弊端

3.2 Less 介绍

1、Less安装

2、Less 变量

3、Less 编译插件

4、Less 嵌套

5、Less 运算

6、less导入

4. rem适配方案

4.1rem实际开发适配方案1

4.2 苏宁首页

4.3 rem 适配方案2

1、适配库flexible.js

2、插件 cssrem

响应式布局

1. 响应式开发原理

1.1 响应式开发原理

1.2 响应式布局容器

2. bootstrap的介绍

2.1Bootstrap简介

2.2 bootstrap优点

2.3 版本简介

2.4bootstrap基本使用

2.5 bootstrap布局容器

2.6 bootstrap栅格系统

1、介绍

2、栅格选项参数

3、栅格嵌套

4、列偏移

5、列排序

6、响应式工具

3. 阿里百秀案例制作

3.1 技术选型

3.2 屏幕划分方法

3.3项目结构搭建

rem布局

1.rem单位

rem (root em)是一个相对单位，类似于em

/* 根html 为 12px */
html {
   font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */       
div {
    font-size: 2rem;
}

rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

2.媒体查询

2.1 什么是媒体查询

媒体查询（Media Query）是CSS3新语法

使用 @media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

2.2 媒体查询语法规范

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

注意他们要加小括号包含
- width：定义输出设备页面可见区域的宽度
- min-width ：表示最小宽度(当设备屏幕大于min-width的值时，则满足条件)
- max-width : 表示最大宽度(当设备屏幕小于max-width的值时，则满足条件)

媒体查询书写规则

注意：为了防止混乱，媒体查询按照从小到大或者从大到小的顺序来写，一般从小到大来写，这样代码更简洁

/* 从小到大 */
@media screen and (max-width: 539px) {
 body {
        background-color: red;
    }
}
/* 由于冲突覆盖，下面一行相当于@media screen and (min-width: 540px) and (max-width: 969px) */

@media screen and (min-width: 540px) {
    body {
        background-color: blue;
    }
}
@media screen and (min-width: 970px) {
    body {
        background-color: green;
    }
}

2.3 媒体查询+rem实现元素动态大小变化

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
     
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
    </style>
    ...
    <div class="top">购物车</div>

2.4 引入资源

针对不同媒体类型和屏幕尺寸，引入不同的样式文件，同样建议从小到大

<link rel="stylesheet" type="text/css" media="screen and(min-width:320px)" href="style320.css">
<link rel="stylesheet" type="text/css" media="screen and(min-width:640px)" href="style640.css">

3. less 基础

3.1 维护css弊端

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

3.2 Less 介绍

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器

做为 CSS的一种形式的扩展，在现有的CSS语法上，为CSS加入程序式语言的特性

它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，Less可以让我们用更少的代码做更多的事情

Less中文网址：http://less css.cn/

常见的CSS预处理器：Sass、Less、Stylus

一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性

1、Less安装

①安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/

②检查是否安装成功，使用cmd命令 “node –v”查看版本即可

③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可

④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

2、Less 变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

@变量名:值;

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

@color: pink;

3、Less 编译插件

Easy LESS 插件用来把less文件编译为css文件

只要保存一下Less文件，会自动生成CSS文件

4、Less 嵌套

// 将css改为less
#header .logo {
  width: 300px;
}

#header {
    .logo {
       width: 300px;
    }
}

如果遇见（交集|伪类|伪元素选择器），利用&进行连接

a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  }
  &::before {
      content:"";
  }
}

5、Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;

color: #888 - #222;

width: 12rem / 78px;

乘号（*）和除号（/）的写法
运算符中间左右有个空格隔开 1px + 5
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位

6、less导入

在一个less文件导入另一个样式文件

/* index.less */
@import "common";
/* common.less是另一个样式文件 */

4. rem适配方案

当设备尺寸发生改变的时候，元素可以等比例适配当前设备
使用媒体查询，根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配

技术方案：

less+rem+媒体查询
flexible.js+rem

总结：

两种方案现在都存在
方案2 更简单

4.1rem实际开发适配方案1

1、选一套标准尺寸750px为准

①假设设计稿是750px

2、用屏幕尺寸 / 划分的份数 = html字体大小

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是 21.33px

3、元素在750px屏幕尺寸下的px / html字体大小 = 元素的rem值

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿

⑦一个100100像素的页面元素在 750屏幕下，就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1

⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1

⑨但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

总结：

①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

②屏幕宽度/划分的份数就是 html font-size 的大小

③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

4.2 苏宁首页

苏宁首页地址：苏宁首页

1、技术选型

方案：我们采取单独制作移动页面方案

技术：布局采取rem适配布局（less + rem + 媒体查询）

设计图：本设计图采用 750px 设计尺寸

2、搭建文件结构

3、设置视口标签以及引入初始化样式

<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">

4、设置公共common.less文件

新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
划分的份数我们定为 15等份
因为我们pc端也可以打开苏宁移动端首页，我们默认html字体大小为 50px，注意这句话写到最上面

4.3 rem 适配方案2

1、适配库flexible.js

手机淘宝团队出的简洁高效移动端适配库flexible.js

实现了不同屏幕的媒体查询，因为里面js做了处理

它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的

我们要做的，就是确定好我们当前设备的html 文字大小就可以了

比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以

里面页面元素rem值：页面元素的px 值 / 75 （插件cssrem可以实现）

剩余的，让flexible.js来去算

github地址：https://github.com/amfe/lib-flexible

总结：

因为flexible是默认将屏幕分为10等分

但是当屏幕大于750的时候希望不要再去重置html字体了，所以要自己通过媒体查询设置一下，并且要把权重提到最高

@media screen and (min-width: 750px) {
    html {
        font-size: 75px!important;
    }
}

2、插件 cssrem

VSCode px 转换rem 插件 cssrem

插件默认html font size 是16px转换的，所以需要自己配置

vs左下角设置--更多操作--打开setting.json--输入cssroot--修改fontsize--重启vs

响应式布局

1. 响应式开发原理

1.1 响应式开发原理

就是使用媒体查询，针对不同宽度的设备进行布局和样式的设置，从而适配不同设备

设备的划分情况：

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）

1.2 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

父容器版心的尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

但是我们也可以根据实际情况自己定义划分

2. bootstrap的介绍

2.1Bootstrap简介

Bootstrap 来自 Twitter（推特），Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷

中文网官网推荐网站

框架：它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发

2.2 bootstrap优点

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

2.3 版本简介

2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善

3.x.x：目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目

4.x.x：最新版，目前还不是很流行

2.4bootstrap基本使用

Bootstrap 使用四步曲：

创建文件夹结构

[图片上传失败...(image-db216e-1596527921884)]

创建 html 骨架结构

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <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="//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>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/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>

引入相关样式文件

<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

书写内容

直接拿Bootstrap 预先定义好的样式来使用bootstrap.css88.com

修改Bootstrap 原来的样式，注意权重问题

学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

2.5 bootstrap布局容器

Bootstrap 为页面内容和栅格系统包裹一个 .container （不能改样式名字，框架中定义了）或者.container-fluid 容器，它提供了两个作此用处的类

.container

响应式布局的容器固定宽度
大屏 ( >=1200px) 宽度定为 1170px
中屏 ( >=992px) 宽度定为 970px
小屏 ( >=768px) 宽度定为 750px
超小屏 (100%)

.container-fluid

流式布局容器百分百宽度
占据全部视口（viewport）的容器。

2.6 bootstrap栅格系统

1、介绍

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会将container自动分为最多12列

2、栅格选项参数

栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入创建好的布局中

	手机<768px	平板>=768px	中等屏幕>=992px	宽屏设备>=1200px
.container最大宽度	自动100%	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数	12	12	12	12

按照不同屏幕划分为1~12 等份
行（row）可以去除父容器作用15px的边距
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的另起一行排列，少于12的空着
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，class="col-md-4 col-sm-6"

3、栅格嵌套

就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内

<!-- 列嵌套 -->
 <div class="col-sm-4">
 <!-- 行（row） 可以去除父容器作用15px的边距 -->
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

<!-- col-sm-4相当于width: 33.3%，如果一行三个col-sm-4，不能用margin撑开缝隙，因为最后的col-sm-4会另起一行 -->

4、列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

 <!-- 列偏移 -->
  <div class="row">
      <div class="col-lg-4">1</div>
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>

5、列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序，左拉右推

 <!-- 列排序 -->
  <div class="row">
      <div class="col-lg-4 col-lg-push-8">左侧</div>
      <div class="col-lg-8 col-lg-pull-4">右侧</div>
  </div>

6、响应式工具

利用媒体查询功能，并使用这些工具类可以方便的针对不同设备，展示或隐藏页面内容

类名	xs超小屏	sm小屏	md中屏	lg大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

3. 阿里百秀案例制作

3.1 技术选型

方案：我们采取响应式页面开发方案

技术：bootstrap框架

设计图：本设计图采用 1280px 设计尺寸

3.2 屏幕划分方法

中屏幕和大屏幕布局一样，为列定义col-md-就可以了，之后再为小屏和超小屏重新布局

container宽度修改

3.3项目结构搭建

Bootstrap 使用四步曲：

创建文件夹结构 images css bootstrap index.html

创建 html 骨架结构

<head>
 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[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]-->
    <title>Document</title>
</head>
<body>
    <div class="container"></div>
</body>

引入相关样式文件

    <!-- 引入bootstrap 样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入我们自己的首页样式文件 -->
    <link rel="stylesheet" href="css/index.css">

书写内容

因为本效果图采取 1280的宽度，而Bootstrap 里面 container宽度最大为 1170px，因此我们需要手动改下container宽度

 /* 利用媒体查询修改 container宽度适合效果图宽度  */
  @media (min-width: 1280px) { 
    .container { 
    width: 1280px; 
     } 
   }

bootstrap存在clearfix类清除浮动

rem布局&响应式布局

rem布局

1.rem单位

2.媒体查询

2.1 什么是媒体查询

2.2 媒体查询语法规范

2.3 媒体查询+rem实现元素动态大小变化

2.4 引入资源

3. less 基础

3.1 维护css弊端

3.2 Less 介绍

1、Less安装

2、Less 变量

3、Less 编译 插件

4、Less 嵌套

5、Less 运算

6、less导入

4. rem适配方案

4.1rem实际开发适配方案1

4.2 苏宁首页

4.3 rem 适配方案2

1、适配库flexible.js

2、插件 cssrem

响应式布局

1. 响应式开发原理

1.1 响应式开发原理

1.2 响应式布局容器

2. bootstrap的介绍

2.1Bootstrap简介

2.2 bootstrap优点

2.3 版本简介

2.4bootstrap基本使用

2.5 bootstrap布局容器

2.6 bootstrap栅格系统

1、介绍

2、栅格选项参数

3、栅格嵌套

4、列偏移

5、列排序

6、响应式工具

3. 阿里百秀案例制作

3.1 技术选型

3.2 屏幕划分方法

3.3项目结构搭建

rem布局

1.rem单位

2.媒体查询

2.1 什么是媒体查询

2.2 媒体查询语法规范

mediatype 查询类型

关键字

2.3 媒体查询+rem实现元素动态大小变化

2.4 引入资源

3. less 基础

3.1 维护css弊端

3.2 Less 介绍

1、Less安装

2、Less 变量

3、Less 编译 插件

4、Less 嵌套

5、Less 运算

6、less导入

4. rem适配方案

4.1rem实际开发适配方案1

4.2 苏宁首页

4.3 rem 适配方案2

1、适配库flexible.js

2、插件 cssrem

响应式布局

1. 响应式开发原理

1.1 响应式开发原理

1.2 响应式布局容器

2. bootstrap的介绍

2.1Bootstrap简介

2.2 bootstrap优点

2.3 版本简介

2.4bootstrap基本使用

2.5 bootstrap布局容器

2.6 bootstrap栅格系统

3. 阿里百秀案例制作

3、Less 编译插件

3、Less 编译插件