[移动开发]移动WEB开发

移动WEB开发

一、移动端基础

1、浏览器现状

(1)PC端常见浏览器

360、谷歌、火狐、QQ、百度、搜狗、IE

(2)移动端常见浏览器

UC、QQ、欧朋Opera、百度手机、360安全、谷歌、搜狗、猎豹等

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

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

2、手机屏幕现状

• 移动端设备屏幕尺寸非常多，碎片化严重
• Android设备有多种分辨率：480×800、480×854、540×960、720×1280、1080×1920等，还有传说中的2K、4K屏
• 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640×960、640×1136、750×1334、1242×2208等
• 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px

3、常见移动端屏幕尺寸

可以参考：常见移动端屏幕尺寸

作为前端开发，不建议去纠结dp、dpi、pt、ppi等单位。

4、移动端调试方法

• Chrome DevTools(谷歌浏览器)的模拟手机调试
• 搭建本地web服务器，手机和服务器在同一局域网中，通过手机访问服务器
• 使用外网服务器，直接IP或域名访问

二、视口

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

1、布局视口 layout viewport

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

2、视觉视口 visual viewport

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

3、理想视口 ideal viewport

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

4、meta视口标签

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

标准的viewport设置

1. 视口宽度和设备宽度保持一致
2. 视口的默认缩放比为1.0
3. 不允许用户自行缩放
4. 最大允许的缩放比1.0
5. 最小允许的缩放比1.0

三、二倍图

1、物理像素&物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了的，比如苹果6、7、8是750*1334

• 开发时1px不是一定等于1个物理像素的

• PC端页面，1px等于1个物理像素，但移动端就不尽相同

• 一个px所能显示的物理像素点的个数，称为物理像素比或屏幕像素比 (谷歌调试工具中显示的是开发尺寸)

  比如iPhone8中：1px的开发像素 = 2px的物理像素

为什么会出现手机中物理像素比不为1的情况？

• PC端和早期的手机屏幕/普通手机屏幕：1CSS像素 = 1物理像素
• Retina(视网膜屏幕)是一种显示技术，可以将更多的物理像素点压缩至一块屏幕中，从而达到更高的分辨率，并提高屏幕显示的细腻程度

2、多倍图

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

(1)二倍图的做法：

/* 我们需要一个50*50像素(css像素)的图片 */
/* 如果直接放到iPhone8中 会放大两倍 100*100  图片变模糊 */
/* 直接放一个100*100的图片，然后手动把图片缩小为50*50(css像素) */
/* 也就是我们准备的图片，是实际需要的图片大小的两倍，这就是二倍图 */

(2)背景缩放 background-size

规定背景图片的尺寸

background-size: 500px 300px;
background-size: 500px;
background-size: 50%;
/* cover要完全覆盖div盒子 可能有部分背景图片显示不全 */
background-size: cover;
/* contain当高度或宽度铺满div盒子就不再进行拉伸了，可能div盒子会有部分空白 */
background-size: contain;

背景图片也需要两倍图来避免图片模糊的效果。

使用切图神器cutterman可以轻松切出1倍图、2倍图和3倍图。

四、移动端开发选择

1、移动端主流方案

(1)单独制作移动端页面(主流)

例如：京东商城手机版、淘宝触屏版、苏宁易购手机版……

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

m.jd.com

(2)响应式页面兼容移动端(其次)

三星手机官网……

通过判断屏幕宽度来改变样式，以适应不同终端。**缺点：**制作麻烦，需要花很大的精力去调兼容性问题。

五、移动端技术解决方案

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。我们可以放心使用H5标签和CSS3样式。

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

1、CSS初始化 normalize.css

移动端CSS初始化推荐使用 normalize.css，官网地址：normalize.css官网

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

2、CSS3盒子模型 box-sizing

• 传统模型宽度计算：盒子的宽度=CSS中设置的width + border + padding

• CSS3盒子模型：盒子的宽度=CSS中设置的width包含了border和padding

  也就是说，CSS3盒子模型，padding和border不会撑大盒子了

传统盒子模型box-sizing: content-box;  从内容开始计算宽度
/* 传统盒子模型=width + border + padding */
        div:nth-child(1) {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
        }

CSS3盒子模型box-sizing: border-box;  从边框开始计算宽度
/* CSS3盒子模型 */
        div:nth-child(2) {
            /* 有了这句话就让盒子变成了CSS3盒子模型 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* padding和border值都不会撑大CSS3盒子 */
            padding: 10px;
            border: 10px solid red;
        }

3、移动端特殊样式

(1)CSS盒子模型

-webkit-box-sizing: border-box;

(2)清除高亮

-webkit-tap-highlight-color: transparent;

(3)清除按钮和输入框默认样式

-webkit-appearance: none;

(4)禁用长按页面时弹出菜单

img,a {-webkit-touch-callout: none;}

六、移动端常见布局

1、移动端技术选型

(1)单独制作移动端页面(主流)

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

(2)响应式页面兼容移动端(其次)

• 媒体查询
• bootstarp

2、流式布局(百分比布局)

流式布局就是百分比布局，也称为非固定像素布局。通过将盒子的宽度设置成百分比，根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流失布局方式是移动web开发使用的比较常见的布局方式。

section {
    width: 100%;
    max-width: 980px;
    min-width: 320px;
}

section div {
    float: left;
    width: 50%;
    height: 400px;
}

• 每个元素各占50%
• 但是为了保护内容，我们需要设置最大宽度和最小宽度防止过度缩放

京东移动端首页demo

(1)技术选型

单独制作移动页面方案；流式布局。

(2)搭建文件夹

JD->css\ images(背景图等)\ upload(产品图)\ index.html

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

视口标签：

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

初始化样式：

	<!-- 引入css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入首页的css -->
    <link rel="stylesheet" href="css/index.css">

(4)二倍精灵图做法

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

(5)图片格式

• DPG图片压缩技术

  京东自主研发推出DPG图片压缩技术，经测试，该技术可以节省用户近50%的浏览流量，极大提升了用户的网页打开速度。

  兼容jpeg，实现全平台、全浏览器的兼容，压缩后的图片和webp的清晰度对比没有差距。

• webp图片格式

  谷歌开发的一种旨在加快图片加载速度的图片格式。

  图片压缩体积大于只有jpeg的2/3，并能节省大量的服务器宽带资源和数据空间。

3、flex布局

(1)传统布局与flex布局

• 传统布局

  兼容性好

  布局繁琐

  局限性，不能在移动端很好地布局

• flex弹性布局

  操作方便，布局极为简单，移动端应用广泛

  PC端浏览器支持情况较差

  IE11或更低版本，不支持或仅部分支持

(2)flex布局原理

flex是flexible Box的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当我们为父盒子设为flex布局以后，子元素的float、clear、和vertical-align属性将失效。
• 伸缩布局=弹性布局=伸缩盒布局=弹性布局=flex布局

采用flex布局的元素，称为flex容器(flex container)，简称“容器”，所有的子元素自动成为容器成员，称为flex项目(flex item)，简称“项目”。

		div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }

        div span {
            /* width: 150px; */
            flex: 1;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

• div就是flex父容器
• span就是子容器 flex项目
• 子容器可以横向排列，也可以纵向排列

总结flex布局原理：

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

(3)flex布局父项常见属性

以下6个属性是对父元素设置的：

1.主轴VS侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

• 默认的主轴方向就是x轴方向，水平向右
• 默认的侧轴方向就是y轴方向，垂直向下

/* 给父级添加flex属性 */
display: flex;
/* 默认的主轴是x轴 行row; 那么y轴就是侧轴 */
/* 元素是跟着主轴来排列的 */
flex-direction: row;
/* flex-direction: row-reverse;  简单了解 从右至左 */
/* 可以把主轴设置为y轴，那么x轴就变为了侧轴 */
flex-direction: column;

2.主轴上子元素排列方式 justify-content

注意：在使用这个属性之前一定要先确定好哪个是主轴

/* 默认的主轴是x轴 row  */
            flex-direction: row;
            /* justify-content:  设置主轴上子元素的排列方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 子元素居中对齐 */
            /* justify-content: center; */
            /* 平均剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边，再分配剩余空间 */
            justify-content: space-between;

/* 设置主轴为y轴 column  */
            flex-direction: column;
            justify-content: center;
            justify-content: space-between;

3.flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线(又称为"轴线")上。flex-wrap属性定义，flex布局中默认是不换行的。如果排不开，则会缩小子元素的宽度。

默认是不换行的，通过flex-wrap可以进行设置。

/* flex布局中，默认子元素是不换行的 */
/* flex-wrap: nowrap; */
flex-wrap: wrap;

4.align-items 设置侧轴子元素排列方式(单行)

该属性控制子项在侧轴上的排列方式，在子项为单项时使用。

/* 默认的主轴是x轴 row  */
justify-content: center;
/* 需要侧轴居中 */
align-items: center;

align-items: flex-start;
/* 拉伸，但是子盒子不要给高度 */
align-items: stretch;

拉伸会让子盒子沿着侧轴，拉伸到和父盒子一样高度。

/* 设置主轴为y轴 */
flex-direction: column;
justify-content: center;
align-items: center;

/* 如果主轴为y轴，则拉伸时子盒子不要给宽度 */
align-items: stretch;

5.align-content 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。

/* 换行 */
flex-wrap: wrap;
/* 因为有了换行，此时我么使用align-content进行设置侧轴子元素的对齐方式 */
/* align-content: flex-start; */
/* align-content: center; */
/* align-content: space-around; */
align-content: space-between;

6.flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性。

/* flex-direction: column;
flex-wrap: wrap; */
/* 把设置主轴方向和是否换行(或换列)简写 */
flex-flow: column wrap;

(4)flex布局子项常见属性

1.flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。默认为0

		section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            flex: 1;
            background-color: purple;
            margin: 0 10px;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: skyblue;
        }

左右两侧盒子固定，中间盒子自适应宽度。

数值越大，分配的份数越多。

共3个span，1和3各占1份，2独占2份。

		p span {
            flex: 1;
        }

        p span:nth-child(2) {
            flex: 2;
            background-color: purple;
        }

2.align-self 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

/* 只让3号盒子下来到底侧 */
div span:nth-child(3) {
	align-self: flex-end;
}

3.order 属性定义项目排列顺序

数值越小，排列越靠前，默认为0。注意：和z-index不一样。

div span:nth-child(2) {
    /* 默认是0 越小越靠前 */
    order: -1;
}

不改变结构，通过样式属性修改项目排列的顺序。

携程网首页demo

访问地址：m.ctrip.com

采取单独制作移动页面方案，采取flex布局。

1. 常见flex布局思路：先把主轴设置为y轴，然后沿着侧轴居中对齐。就可以实现图片和文字上下显示。

2. 元素同时设置flex:1;和display:flex;是不冲突的，既充当父元素又充当子元素。

3. 背景线性渐变：

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

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

   div {
       width: 600px;
       height: 200px;
       /* 背景渐变必须添加浏览器私有前缀 */
       background: -webkit-linear-gradient(left, red, blue);
       /* 起始位置可以是方位名词，也可以是度数，还可以省略，默认从top开始 */
       background: -webkit-linear-gradient(red, blue);
       background: -webkit-linear-gradient(top left, red, blue);
   }
   

4、rem适配布局

(1)rem单位

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

不同的是rem的基准是相对于html元素的字体大小。比如，根元素(html)设置font-size=12px；非根元素设置width=2rem；则换成px表示就是24px。

		html {
            font-size: 14px;
        }

        div {
            font-size: 12px;
        }

        p {
            /* 1.em是相对于父元素div的字体大小 */
            width: 10em;
            height: 10em;
            /* 2.rem是相对于根元素html的字体大小 */
            width: 10rem;
            height: 10rem;
            background-color: pink;
        }

**rem的优势：**可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制。

(2)媒体查询语法

媒体查询(Media Query)是CSS3新语法。

• @media 可以针对不同的屏幕尺寸设置不同的样式

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

• @media开头 注意@符号

• mediatype 媒体类型

• 关键字 and not only

• media feature 媒体特性，必须有小括号包含

1.mediatype 查询类型

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

2.关键字

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

3.媒体特性

每种媒体类型都具有各自不同的特性，根据不同媒体类型的特性设置不同的展示风格。注意都要使用小括号进行包含。

/* 1.媒体查询一般按照从大到小或者从小到大的顺序来 */
        /* 小于540px 页面背景颜色变为蓝色 */
        @media screen and (max-width: 539px) {
            body {
                background-color: skyblue;
            }
        }

        /* 540-970px 改为绿色 */
        @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        }

        /* 大于等于970px 改为红色 */
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }

从小到大来写，可以使用CSS的层叠性来简化代码。最后的大于等于970px会层叠掉大于等于540px中的大于等于970px的部分。

/* 简化代码 */
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }

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

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

		@media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }

        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }

        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }

(4)引入资源

当样式比较多的时候，可以针对不同的媒体使用不同的stylesheets(样式表)。直接在link中判断设备的尺寸，然后引入不同的css文件。

	<style>
        /* 当屏幕小于640px 让div一行显示1个 */
        /* 当屏幕大于等于640px 让div一行显示2个 */
        /* 引入资源就是针对不同的屏幕尺寸 调用不同的css文件 */
    </style>
    <link rel="stylesheet" href="css/style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="css/style640.css" media="screen and (min-width: 640px)">

(5)less基础

为什么要学习less？

维护CSS弊端。 CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。

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

Less(Leaner Style Sheets)是一门CSS拓展语言，也称为CSS预处理器。常见的CSS预处理器还有:Sass、Stylus

作为CSS的一种拓展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特征。它在CSS语法基础上，引入了变量、Mixin(混入)、运算以及函数等功能，大大简化了CSS编写，并降低了CSS维护成本。

Less中文网址：Less官网

(6)less使用

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

1.less变量

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

@变量名：值；

命名规范：必须以@为前缀、不能包含特殊字符、不能以数字开头、大小写敏感。

@color: pink; @font14: 14px;

@color: deeppink;
@font14: 14px;
body {
    background-color: @color;
}
div {
    color: @color;
    font-size: @font14;
}

这样，如果想修改颜色，只需要修改color变量就好，方便维护。

2.less编译

vscode Less 插件 Easy LESS 插件用来把less文件编译成css文件。安装后，只要保存less文件，就会自动生成css文件。

3.less嵌套

后代选择器，子元素的样式直接写到父元素中。

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    a {
        color: red;
    }
}

如果有伪类选择器、伪元素选择器、交集选择器，内层选择器前面需要加&。

// 如果有伪类选择器、伪元素选择器、交集选择器，内层选择器前面需要加&
a {
    color: red;
    &:hover {
    	color: blue;
    }
}
.nav {
    &::before {
        content: '';
    }
}

4.less运算

任何数字、颜色或者变量都可以参与运算，less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

@baseFont: 50px;
html {
    font-size: @baseFont;
}

@border: 5px + 5px;
div {
    // 两个数参与运算，如果只有一个数有单位，则最后结果以这个单位为准
    width: 200px - 50;
    height: 200px * 2;
    border: @border solid red;
}
img {
    // 两个数参与运算，如果两个数单位不同，则按第一个单位为准
    width: (82rem / @baseFont);
    height: (82rem / @baseFont);
}

• 两个数参与运算，如果只有一个数有单位，则最后结果以这个单位为准
• 两个数参与运算，如果两个数单位不同，则按第一个单位为准

(7)rem实际开发适配方案

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

技术方案1：less + 媒体查询 + rem

设计稿常见尺寸宽度：

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

元素大小取值方法

1. 公式：页面元素的rem值 = 页面元素px值 / (屏幕宽度 / 划分的份数)
2. html 的font-size = 屏幕宽度 / 划分的份数
3. 也就是 页面元素的rem值 = 页面元素px值 / (html font-size)

具体

1. 首先选一套标准尺寸 750px为准

2. 用屏幕尺寸 / 划分的份数 (750px/15=50) 得到html中的文字大小

3. 页面元素rem值 = 页面元素在750像素宽度下的px值 / html里面的文字大小

技术方案2：flexible.js + rem 更简单

flexible.js是手机淘宝团队推出的简洁高效的移动端适配库，无需再写不同屏幕的媒体查询，因为里面js做了处理。原理是把当前设备划分为10等份，但不同设备下，比例还是一致的。

我们要做的就是确定好当前设备的html文字大小即可。比如当前设计稿是750px，那么我们只需把html文字大小设置为75px(750px / 10)；则里面元素的rem值 = 页面元素的px值 / 75，剩余的交给flexible.js来计算就好了。

flexible.js的下载地址：https://github.com/amfe/lib-flexible

其中，index.js是未经过压缩的，而index.min.js是经过压缩的。

使用适配方案1制作苏宁首页demo

网址：m.suning.com

单独制作移动页面方案 + 采取rem适配布局(less+rem+媒体查询) + 设计图采用750px设计尺寸

1.common.less用于存放公共样式，设置常见的屏幕尺寸 修改里面的html文字大小。先默认给一个html文字大小，然后根据屏幕尺寸的不同，层叠掉该属性样式。

// 如果屏幕尺寸大于750px，直接限定好默认的html字体大小为50px，后续层叠掉该属性
html {
    font-size: 50px;
}

// 划分份数定义为15
@no: 15;
// 320px
@media screen and (min-width: 320px) {
    html {
        font-size: (320px / @no);
    }    
}
......

屏幕尺寸有：320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px

2.index.less中将刚刚设置好的common.css引入

@import "common"; 后续只需要将index.css引入到html页面中就可以了。

使用适配方案2制作苏宁首页demo

采取单独制作移动端页面方案 + rem适配布局2(flexible.js + rem) + 设计图采用750px设计尺寸

1.引入flexible.js文件

<script src="js/flexible.js"></script>

2.vscode px转rem插件 cssrem

cssrem插件默认的html文字大小为 cssroot 16px，所以要手动将cssroot字体设置为75px。

设置方法：打开vscode中设置首选项按钮，点击设置，在搜索框中搜索cssroot，然后手动将其修改为75px即可。注意是要修改工作区中的cssroot。

3.如果屏幕超过了750px 则按照750设计稿来显示，不会让页面超过750px

/* 如果屏幕超过了750px 则按照750设计稿来显示，不会让页面超过750px */
/* 如果屏幕尺寸大于750px 则强制将html中的字体大小设置为75px */
@media screen and (min-width: 750px) {
    html {
        font-size: 75px!important;
    }
}

这里使用媒体查询来进行屏幕尺寸的测量，并使用important来提升权重。

5、响应式布局

(1)响应式开发原理

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

(2)响应式布局容器

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

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

常见的响应式尺寸划分

• 超小屏幕：width: 100%;
• 小屏幕：width: 750px; (比实际的屏幕尺寸小一些，是为了留白，视觉效果更好)
• 中等屏幕：width: 970px;
• 大屏幕：width: 1170px;

		.container {
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        /* 超小屏幕 小于768 布局容器宽度设置为100% */
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
        }

        /* 小屏幕 大于等于768 宽度为750px */
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
            }
        }

        /* 中等屏幕 大于等于992px 宽度修改为970px */
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
            }
        }

        /* 大屏幕 大于等于1200px 宽度修改为1170px */
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }

(3)响应式导航demo

• 屏幕尺寸大于等于768px时，给布局容器container宽度为750px
• container中包含8个li，每个li的宽度定为93.75px(750 / 8)，高度为30px，浮动一行显示
• 屏幕尺寸小于768px时，container宽度设为100%
• 里面的li宽度修改为33.33%，这样每行只能显示3个li，剩余的换行显示

		.container {
            width: 750px;
            margin: 0 auto;
        }

        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }

        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
            .container li {
                width: 33.3%;
            }
        }

6、Bootstrap框架

(1)简介

Bootstrap来着Twitter(推特)，是目前最受欢迎的前端框架，是基于HTML、CSS和JAVASCRIPT的，简单灵活，使得WEB开发更加快捷。

• 中文官网：http://www.bootcss.com
• 官网：http://getbootstrap.com/

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

(2)优点

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

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

(3)Bootstrap使用

四部曲：1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容

1. 创建文件夹结构的时候要单独建一个Bootstrap文件夹，用于存放Bootstrap的css+js+fonts

2. 创建html骨架结构

   <!-- 要求当前网页使用IE浏览器最高版本的内核edge进行渲染 -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
   <!-- 解决ie9以下浏览器对html5新增标签的不识别，并由此导致CSS不起作用的问题 -->
   <!-- 解决ie9以下浏览器对CSS3 Media Query的不识别 -->
   <!--[if lt IE 9]>
           <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
           <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
   <![endif]-->
   

3. 引入相关样式文件

   <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">

4. 书写内容

   • 可以直接将Bootstrap预先定义好的样式直接拿来使用

     <button type="button" class="btn btn-success">Success</button>

   • 修改Bootstrap原先的样式，但要注意权重问题

     <div class="btn btn-success login">登录成功</div>

     /* 利用自己写的样式对原先样式进行覆盖 */
             .login {
                 width: 100px;
                 height: 45px;
             }
     

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

(4)Bootstrap布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好这个类，叫.container，它提供了两个该用处的类。

1.container类

响应式布局的容器，固定宽度。和之前响应式布局中的参数设置相同。

2.container-fluid类

• 流式布局容器 百分百宽度
• 占据全部视口(viewport)的容器
• 适合于单独做移动端开发

(5)Bootstrap栅格系统

1.栅格系统简介

栅格系统(grid systems)，也称为"网格系统"，它是将页面内容划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。里面的container宽度是固定的，但是不同屏幕下，container的宽度不同，再把container划分为12等份。

注意：这个虽然和rem有些相似，但rem是将整个window划分成几等份，而这里是将页面内容container盒子划分。

2.栅格系统的简单使用

栅格系统用于通过一系列的行(row)和列(column)的组合来创建页面布局，内容就可以放入这些创建好的布局中。

• 行row必须放到container布局容器里面

• 要实现列的平均划分 需要给列添加 类前缀

• xs-extra small:超小；sm-small:小；md-medium:中等；lg-large:大；

• 列column大于12，多余的列所在的元素将被作为一个整体另起一行排列

• 每列默认有左右15px的padding 如果不想要，则通过CSS强制去掉就可以了

  行row可以去除父容器左右15px的边距

• 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6” 其中4和6表示份数

	<div class="container">
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
    </div>

这里份数不一定要一样，只要保证总和是12份就可以。

• 如果孩子的份数相加为12，则孩子可以沾满整个container的宽度；
• 如果孩子的份数相加小于12 则占不满整个container宽度 会有空白；
• 如果孩子的份数相加大于12 则多余的列会另起一行显示。

为一列指定多个设备的类名，以便划分不同份数：

<div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>

3.列嵌套

简单理解就是在列中再分为12等份，添加若干子元素。列嵌套最好加1个行，这样可以清除父元素15px的padding，且高度自动和父级一样高。

	<div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 列嵌套最好加1个行 这样可以清除父元素15px的padding 且高度自动和父级一样高 -->
                <div class="row">
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>

4.列偏移

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

	<div class="container">
        <div class="row">
            <div class="col-md-3">左侧</div>
            <div class="col-md-3 col-md-offset-6">右侧</div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>
    </div>

5.列排序

通过使用.col-md-push-*和.col-md-pull-*类可以很容易改变列column的顺序。

	<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>

6.响应式工具

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

	<div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-lg">我会显示哦</span>
            </div>
            <div class="col-xs-3 ">2</div>
            <div class="col-xs-3 hidden-md hidden-sm hidden-xs">我会变魔术哦</div>
            <div class="col-xs-3 ">4</div>
        </div>
    </div>

有隐藏，也有显示，显示就使用visible-*，可以针对不同设备显示元素。

七、移动端布局总结

1、移动端主流方案

• 单独制作移动端页面(主流)
• 响应式页面兼容移动端

2、移动端技术选型

• 流式布局(百分比布局)
• flex弹性布局(推荐)
• rem适配布局(推荐)
• 响应式布局

番外：vw和vh 未来趋势

但是不能用于pc端！！只能用于移动端

1、vw/vh是什么

• vw/vh是一个相对单位(类似于em和rem相对单位)

  vw: viewport width 视口宽度单位

  vh: viewport height 视口高度单位

• 相对视口的尺寸计算结果

  1vw = 1/100 视口宽度

  1vh = 1/100 视口高度

注意：和百分比是有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于当前视口来说的。

2、vw/vh的使用

元素单位直接使用新单位vw/vh即可。因为是相对单位，所以不同视口(屏幕)下，宽高一起变化完成适配。

		div {
            width: 10vw;
            height: 10vh;
            background-color: pink;
        }

如何还原设计稿?

• 前提：设计稿按照iPhone6/7/8来设计，有个盒子是50px*50px的，如何使用vw？
  1. iPhone6/7/8，所以视口宽度尺寸为375px
  2. 那么1vw = 3.75px
  3. 元素 = 50px
  4. 所以元素 = 50/3.75 = 13.3333vw

注意事项：

• 开发中使用vw，需要将模式改为2×模式
• 因为涉及到大量除法，所以搭配LESS更好
• 本质是根据视口宽度来等比例缩放页面元素的宽高基本就够了，vh很少使用
• 兼容性：兼容性问题可以查看这个网站：https://caniuse.com/