WEB移动端布局

111—WEB移动端布局:

1 移动端基础

1. 能够知道移动web的开发现状！
2. 能够写标准的viewport！
3. 能够使用移动web的调试方法！
4. 能够说出移动端常见的布局方案！
5. 能够描述流式布局！
6. 能够独立完成京东移动端首页！

1.1浏览器现状

PC端：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、QQ浏览器、搜狗浏览器、IE浏览器

移动端：UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器、以及其他杂牌浏览器

国内的UC和QQ、百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。

1.2手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重

1.3常见移动端屏幕尺寸

数据参考网络

1.4移动端调试方法

• Chrome DevTools （谷歌浏览器）的模拟手机调试
• 搭建本地web服务器,手机和服务器个局域网内,通过手机访问服务器
• 使用外网服务器,直接IP或域名访问

1.5总结

• 移动端浏览器我们主要对webkit内核进行兼容
• 我们现在开发的移动端主要针对手机端开发
• 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一
• 学会用谷歌浏览器模拟手机界面以及调试

2 视口（3种）

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

布局视口 layout viewport

• 一般移动设备的浏览器都默认设置了一 个布局视口，用于解决早期的PC端页面在手机上显示的问题。
• iOS, Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，不 过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual viewport

• 字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。
• 我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。

理想视口 ideal viewport

• 为了使网站在移动端有最理想的浏览和阅读宽度而设定
• 理想视口，对设备来讲，是最理想的视口尺寸
• 需要手动添写meta视口标签通知浏览器操作
• meta视口标签的主要目的：布局视口的宽度应该与理想视C的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

总结

• 视口就是浏览器显示页面内容的屏幕区域
• 视口分为布局视口、视觉视口和理想视口
• 我们移动端布局想要的是理想视口就是手机屏幕有多宽,我们的布局视口就有多宽
• 想要理想视口，我们需要给我们的移动端页面添加meta视口标签

2.1meta视口标签

这是我们迄今为止学的最长的标签啦，不仅如此，它还是一个单标签。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

属性	解释说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

2.2标准的viewport设置

• 视口高度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

3 二倍图

3.1物理像素&物理像素比

• 物理像素点指的是屏常显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6\7\8是750* 1334
• 我们开发时候的1px不是一定等于1个物理像素的
• PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同
• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
• PC端和早前的手机屏幕 / 普通手机屏幕：1CSS像素 = 1 物理像素的
• Retina (视网膜屏幕) 是一种显示技术，可以将把更多的物理像索点压缩至一块屏幕里，从而达到更高的分辨率,并提高屏幕显示的细腻程度。

3.2多倍图

• 对于一张50px* 50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
• 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
• 通常使用二倍图，因为iPhone 6\7\8的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求
• 背景图片注意缩放问题

    /* 在 iPhone8 下面 */
        img {
            /* 原始图片100*100px */
            width: 50px;
            height: 50px;
        }
        .box {
            /* 原始图片100*100px */
            background-size: 50px 50px;
        }

3.3背景缩放 background-size

background-size属性规定背景图像的尺寸

background-size：背景图片宽度 背景图片高度；

• 单位：长度 | 百分比（相对于父盒子来说的） | cover | contain；
• cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
• contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

3.4多倍图切图 cutterman

• @3X 3倍图
• @2X 2倍图
• @1X 1倍图原图

3.5二倍精灵图做法

• 在firework里面把精灵图等比例缩放为原来的一半
• 之后根据大小测量坐标
• 注意代码里面background-size也要写：精灵图原来高度的一半。

4 移动端开发选择

4.1 移动端主流方案

1.单独制作移动端页面（主流）

京东商城手机版

淘宝触屏版

苏宁易购手机版

……

2.响应式页面兼容移动端（其次）

三星手机官网

……

4.2单独移动端页面（主流）

通常情况下，网址域名前面加m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

4.3响应式兼容PC移动端

三星电子官网：www.samsung.com/cn/ ,通过判断屏幕宽度来改变样式，以适应不同终端。

**缺点：**制作麻烦，需要花很大精力去调兼容性问题。

4.4总结

现在市场常见的移动端开发有单独制作移动端页面 和 响应式页面 两种方案

现在市场主流的选择还是单独制作移动端页面

5. 移动端技术解决方案

5.1移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。

我们可以放心使用H5和CSS3样式。

同时我们浏览器的私有前缀我们只需要考虑添加webkit即可

5.2CSS初始化　normalize.css

移动端CSS初始化推荐使用normalize.css／

• Normalize.css :保护了有价值的默认值
• Normalize.css :修复了浏览器的bug
• Normalize.css :是模块化的
• Normalize.css :拥有详细的文档

官网地址: http://necolas github.io/normalize.css/

5.3CSS盒子模型　box-sizing

• 传统模式宽度计算:　盒子的宽度= CSS中设置的width + border + padding
• CSS3盒子模型:　盒子的宽度= CSS中设置的宽度width里面包含了border和padding　也就是说，我们的CSS3中的盒子模型，padding 和border不会撑大盒子了

/* CSS3盒子模型 */
box-sizing: border-box;
/* 传统盒子模型 */
box-sizing: content-box;

• 移动端可以全部CSS3盒子模型
• PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3盒子模型

5.4特殊样式

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box; 
/*点击高亮我们需要清除清除　设置为transparent完成透明*/
-webkit-tap-highlight-color: transparent; 
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none; 
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

6. 移动端常见布局

移动端技术选型：

移动端布局和我们以前学的PC端有所区别

1.单独制作移动端页面（主流）

• 流式布局（百分比布局）
• flex 弹性布局（强烈推荐）
• less + rem + 媒体查询布局
• 混合布局

2.响应式页面兼容移动端（其次）

• 媒体查询、
• bootstarp

6.1流式布局

• 流式布局，就是百分比布局，也称非固定像素布局。
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
• 流式布局方式是移动web开发使用的比较常见的布局方式。
• max-width 最大宽度（max-height 最大高度）
• min-width 最小宽度 （min-height 最小高度）

6.2 flex布局

Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。

适用范围

任何一种元素都可以指定为flex布局

.wrap{
    display:flex;
}

   
   123123

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

   
   123123

Webkit内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

   
   12341234

1、flex布局的基本概念

容器和项目

容器：采用flex布局的元素被称作容器。

项目：在flex布局中的子元素被称作项目。

即父级元素采用flex布局，则父级元素为容器，全部子元素自动成为项目。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2、容器属性

有六个常用属性设置在容器上，分别为：

• flex-direction 设置主轴方向
• flex-wrap 设置子元素是否换行
• flew-flow 设置主轴上的子元素排列方式
• justify-content 设置侧轴上的子元素的排列方式（多行）
• align-items 设置侧轴上的子元素的排列方式（单行）
• align-content 复合属性，相当于同时设置了flex-direction和flex-wrap

1. 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
2. 每根轴都有起点和终点，这对于元素的对齐非常重要。
3. 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
4. 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

弹性容器的两根轴非常重要，所有属性都是作用于轴的。

主轴：

flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局。

也就是说，flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。

我们可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了，那么：

1. 交叉轴就会相应地旋转90度。
2. 弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。

flex-direction 属性

flex-direction 属性设置容器主轴的方向

.wrap{
    flex-direction:row | row-reverse | column | column=reverse;
}

   
   123123

包含四个属性值：

row: 默认值，表示沿水平方向，由左到右。

row-reverse ：表示沿水平方向，由右到左

column：表示垂直方向，由上到下

column-reverse:表示垂直方向，由下到上

flex-wrap属性

flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。

.wrap{
    flex-wrap:nowrap | wrap | wrap-reverse;
}

   
   123123

包含三个属性值：

nowrap：表示不换行

说明：设置的项目的宽度就失效了，强行在一行显示

wrap：正常换行，第一个位于第一行的第一个

wrap-reverse：向上换行，第一行位于下方

flex-flow属性

flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap];,

第一个属性值为flex-direction的属性值

第二个属性值为flex-wrap的属性值

justify-content 属性

(使用这一属性之前一定要确定好主轴是哪个)

justify-content属性用于设置项目在主轴上的的对齐方式。

属性值	说明
flex-start	默认值从头部开始，如果主轴是X轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间（重要）

.wrap{
    justify-content: flex-start | flex-end | center |space-between | space-around
}

   
   123123

该属性主要要五个属性值：

flex-start：默认值，左对齐

flex-end：右对齐

center：居中对齐

space-between：两端对齐

space-around：每个项目两侧的间距相等

align-items 属性

align-items定义了项目在交叉轴上是如何对齐显示的

.wrap{
    align-items:flex-start | flex-end | center | baseline | stretch
}

   
   123123

该属性主要有五个属性值：（以交叉轴从上向下为例）

flex-start:交叉轴的起点对齐

flex-end 交叉轴的终点对齐

center 交叉轴居中对齐

baseline 项目的第一行文字的基线对齐
stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

   
   123123

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

3、项目属性

设置在项目上的属性主要有：

order 属性
order属性
order属性设置项目排序的位置，默认值为0，数值越小越靠前

.item{
    order:<Integer>;
}

   
   123123
.green-item{
    order:-1;
}

   
   123123

flex-grow 属性

flex-group属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。

.green-item{
    order:-1;
    flex-grow:2;
}

   
   12341234

flex-shrink 属性

flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。

flex-basis属性

flex-basis属性表示表示项目占据主轴空间的值。默认为auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小。

flex属性

flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；

.item{
    flex:(0 1 auto) | auto(1 1 auto) | none (0 0 auto)
}

   
   123123

align-self 属性

align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式。它有六个可能的值。默认值为auto
　　　auto：和父元素align-self的值一致

flex-start：顶端对齐

flex-end：底部对齐

center：竖直方向上居中对齐

baseline：item第一行文字的底部对齐

stretch：当item未设置高度时，item将和容器等高对齐

.item{
    align-self: flex-start | flex-end | center | baseline | stretch 
}

   
   123123

背景渐变：

背景渐变必须添加浏览器的私有前缀

起始方向可以是：方位名词或者是度数，如果省略默认就是top

background:linear-gradient(起始方向，颜色1，颜色2，…);

background:-webkit-linear-gradient(left,red,blue);

background:-webkit-linear-gradient(left top,red,blue);

222—移动WEB开发之rem适配布局:

一、rem 基础

rem 单位

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

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

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

---

二、媒体查询

2.1 什么是媒体查询

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

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

---

2.2 语法规范

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

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

1. mediatype 查询类型

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

2. 关键字

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

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

3. 媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含

---

媒体查询从小到大优势代码分析

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

rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

---

2.4 引入资源（理解）

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。
原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

1. 语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
1

2. 示例

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">
1

---

三、Less 基础

3.1 维护 css 的弊端

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

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

---

3.2 Less 介绍

Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器。
做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为CSS加入程序式语言的特性。

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

Less中文网址： http://lesscss.cn/
常见的CSS预处理器：Sass、Less、Stylus
一句话：Less 是一门 CSS 预处理语言，它扩展了CSS的动态特性

---

3.3 Less 安装（注意如果使用vscode无需安装less）

① 安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/
② 检查是否安装成功，使用cmd命令（win10 是 window +r 打开 运行输入cmd） — 输入“ node –v ”查看版本即可
③ 基于nodejs在线安装Less，使用cmd命令“ npm install -g less ”即可
④ 检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

Less 使用

我们首先新建一个后缀名为less的文件， 在这个less文件里面书写less语句。

• Less 变量
• Less 编译
• Less 嵌套
• Less 运算

---

3.4 Less 变量

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

@变量名:值;

1. 变量命名规范

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

@color: pink;

2. 变量使用规范

//直接使用
body{
 color:@color;
}
a:hover{
 color:@color;
}
1234567

---

3.5 Less 编译

本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则
最终会通过解析器，编译生成对应的 CSS 文件。

所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。

vocode Less 插件

• Easy LESS 插件用来把less文件编译为css文件
• 安装完毕插件，重新加载下 vscode。
• 只要保存一下Less文件，会自动生成CSS文件
  

---

3.6 Less 嵌套

我们经常用到选择器的嵌套

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

Less 嵌套写法

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

如果遇见 （交集|伪类|伪元素选择器）

• 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；
• 如果有 & 符号，它就被解析为父元素自身或父元素的伪类。

a:hover{
 color:red;
}
123

Less 嵌套写法

a{
 &:hover{
 color:red;
 }
}
12345

---

3.7 Less 运算

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

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

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

四、rem 适配方案

让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

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

4.1 rem 实际开发适配方案

① 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）
② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

---

4.2 rem 适配方案技术使用（市场主流）

技术方案1

• less

• 媒体查询

• rem

  技术方案2（推荐）

• flexible.js

• rem

总结：

1. 两种方案现在都存在。
2. 方案2 更简单，现阶段大家无需了解里面的js代码。

---

4.3 rem 实际开发适配方案1

rem + 媒体查询 + less 技术

1. 设计稿常见尺寸宽度

一情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果现在基本以750为准。

---

2. 动态设置 html 标签 font-size 大小
① 假设设计稿是750px。
② 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）。
③ 每一份作为html字体大小，这里就是50px。
④ 那么在320px设备的时候，字体大小为320/15 就是 21.33px。
⑤ 用我们页面元素的大小 除以不同的 html 字体大小会发现他们比例还是相同的。
⑥ 比如我们以 750为标准设计稿。
⑦ 一个100*100像素的页面元素 在 750屏幕下， 就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1。
⑧ 320屏幕下， html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1。
⑨ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果。

---

3. 元素大小取值方法
① 最后的公式： 页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
② 屏幕宽度/划分的份数 就是 html font-size 的大小
③ 或者： 页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

rem 适配方案2

简洁高效的rem适配方案flexible.js

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

我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理

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

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

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

里面页面元素rem值： 页面元素的px 值 / 75 剩余的，让flexible.js来去算

333—WEB开发之响应式布局:

1,1响应式开发原理:

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

尺寸区间	设备划分	常用尺寸划分
<768px	超小屏幕(手机)	设置宽度为100%
>=768px~<992px	小屏设备(平板)	设置宽度为750px
>=992px~<1200px	中等屏幕(桌面显示器)	宽度设置为970px
>=1200px	宽屏设备(大桌面显示器)	宽度设置为1170px

1,2响应式布局容器

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

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

1,3响应式布局有的方法有：

响应式布局方法一：媒体查询

使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

响应式布局方法二：百分比%

比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

height,width属性的百分比依托于父标签的宽高。但是，padding、border、margin等属性的情况又不一样

• 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
• 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width
• border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度

缺点

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

所以，不建议用%来做响应式布局。

响应式布局方法三：vw/vh

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

与百分比布局很相似，但更好用。

响应式布局方法四：rem

rem单位是相对于字体大小的html元素，也称为根元素。 默认情况下，html元素的font-size为16px。所以此时1rem = 16px。

优化版：

//动态为根元素设置字体大小

function init () {

 // 获取屏幕宽度

 var width = document.documentElement.clientWidth

 // 设置根元素字体大小。此时为宽的10等分

 document.documentElement.style.fontSize = width / 10 + 'px'

}

//首次加载应用，设置一次

init()

// 监听手机旋转的事件的时机，重新设置

window.addEventListener('orientationchange', init)

// 监听手机窗口变化，重新设置

window.addEventListener('resize', init)

理解：上面代码实现了，无论设备可视窗口如何变化，始终设置rem为width的1/10.即实现了百分比布局。就没有第一版的媒体查询那样僵硬。

以上代码需在dom之前写入（可放在head里面第一个script标签）

响应式布局方法五：flex弹性布局

弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。

尤其是现在类似于某宝、某东一类的电商web站或者手机app的页面，利用弹性布局是都可以很轻松的实现的。

弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”。

• 在父元素上，我们经常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，这几个属性分别从 主轴的方向、是否换行、项目在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。
• 在子元素上，我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，这几个属性分别从 项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性。

444—Bootstrap前端开发框架

1. bootstrap 简介

bootstrap 来自Twitter （推特），他是基于HTML、CSS、JavaScript的，使web开发更加快捷

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)

● 中文官网：http：//www.bootcss.com/
● 官网：http：//getbootstap.com/
● 推荐使用：http：//bootstrap.css88.com/

1.1 优点

• 标准化的html+css编码规范
• 提供一套简洁、直观的组件
• 不断迭代更新
• 响应式布局

1.2 版本

3.x.x：放弃ie6-7，对ie8支持但界面效果不好，偏向于开发响应式、移动设备优先的web项目

4.x.x： 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器，Bootstrap.min.css 的体积减少了40%以上。

5.x.x：最新版，最新稳定版本浏览器，但不支持 Internet Explorer 11 及以下版本，主要区别在于 Bootstrap5 不再依赖 jQuery，使用了原生的 JavaScript

2. bootstrap 使用

1. 创建文件夹结构

2. 创建html骨架结构

3. 引入相关的样式文件

4. 书写内容

   

2.1创建html骨架结构

<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta content="IE=edge" http-equiv="X-UA-Compatible">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<!--[if lt IE 9]>
 <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
        </script>
        <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
        </script>
    <![endif]-->

2.2 引入相关样式文件

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

<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

3.布局容器

3.1 container 类

bootstrap 为页面内容和栅格系统包裹的一个.container容器，.container 类用于固定宽度并支持响应式布局的容器

3.1.1 containner类

**注意：**宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。

3.1.2 contain-fluid 类

流式布局容器 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器，适合单独做移动端开发

4. 栅格系统（网格系统）

网格系统会随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

bootstrap 里面contain宽度是固定的，但是不同屏幕下，contain的宽度不同

4.1 网格系统的使用

4.1.1 栅格选项参数

参数通过行和列的组合来创建页面布局

• 行row必须放在contain 布局容器里面
• 实现列的划分，给列添加类前缀
• 如果孩子的份数相加等于12，则孩子占满contain的宽度
• 如果孩子份数相加小于12，则不会占满宽度
• 如果孩子份数大于12，则多出的列数会另起一行显示
• 可以同时为一列指定多个设备的类名，以便划分不同的份数，如 col-lg-3 col-sm-3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<style>
    .row div {
        border: 1px solid red;
    }
</style>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xxl-3">1</div>
            <div class="col-xxl-3">1</div>
            <div class="col-xxl-3">1</div>
            <div class="col-xxl-3">1</div>
        </div>
        <div class="row">
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
        </div>
        <div class="row">
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-7">2</div>
        </div>
    </div>
</body>
</html>

效果：

4.1.2 列嵌套

栅格系统将内容再次嵌套，可以使用一个新的.row元素，和一系列.col-cm-*元素

加row可以取消父元素的padding值，高度和父级一样

4.2 列偏移

使用 offset-md-类可以将列向右侧偏移，实际是使用选择去为当前元素添加左侧的边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <style>
        .col-sm-4 {
           background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- 列偏移 -->
    <div class="container">
        <div class="row">
            <div class="col-sm-4">1</div>
            <div class="col-sm-4 offset-sm-4">2</div>
        </div>
    </div>
</body>
</html>

一个盒子，也可以用列偏移实现水平居中的效果

4.3 列排序

.col-md-push-* 向左拉

.col-md-pull-* 向右推

上面两个类可以改变列的顺序

4.4 响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些功能可以方便的针对不同设备展示或隐藏页面内容。

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

与之相反，是visible-xs visible-sm visible-md visible-lg 是显示某个页面的内容。