移动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">
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比 |
| minimum-scale | 最小缩放比 |
| user-scalable | 用户是否可以缩放，yes或no(1或0) |
标准的viewport设置
- 视口宽度和设备宽度保持一致
- 视口的默认缩放比为1.0
- 不允许用户自行缩放
- 最大允许的缩放比1.0
- 最小允许的缩放比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个属性是对父元素设置的：
| 属性 | 说明 |
|---|---|
| flex-direction | 设置主轴方向 |
| justify-content | 设置主轴上的子元素排列方式 |
| flex-wrap | 设置子元素是否换行，默认不换行 |
| align-content | 设置侧轴上的子元素排列方式(多行) |
| align-items | 设置侧轴上的子元素排列方式(单行) |
| flex-flow | 复合属性，相当于同时设置了flex-direction和flex-wrap |
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
注意：在使用这个属性之前一定要先确定好哪个是主轴
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，从头开始，如果x轴是主轴，则从左至右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐(如果主轴是x轴则水平居中) |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间(重要) |
/* 默认的主轴是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 设置侧轴子元素排列方式(单行)
该属性控制子项在侧轴上的排列方式，在子项为单项时使用。
| 属性 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中(垂直居中) |
| stretch | 拉伸(默认值) |
/* 默认的主轴是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-start | 默认从侧轴头部开始排列 |
| flex-end | 从侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
/* 换行 */
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布局子项常见属性
| 属性 | 说明 |
|---|---|
| flex | 子项目占的份数 |
| align-self | 控制子项自己在侧轴的排列方式 |
| order | 定义子项的排列顺序(前后顺序) |
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布局。
-
常见flex布局思路：先把主轴设置为y轴，然后沿着侧轴居中对齐。就可以实现图片和文字上下显示。
-
元素同时设置flex:1;和display:flex;是不冲突的，既充当父元素又充当子元素。
-
背景线性渐变：
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 查询类型
将不同的终端设备划分为不同的类型，称为媒体类型。
| 值 | 说明 |
|---|---|
| all | 所有设备 |
| 打印机和打印预览 | |
| screen | 电脑屏幕，平板电脑，智能手机等 |
2.关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。
| 关键字 | 说明 |
|---|---|
| and | 可以将多个媒体特性连接到一起，相当于“且” |
| not | 排除某个媒体类型，相当于“非” |
| only | 指定某个特定的媒体类型，可省略 |
3.媒体特性
每种媒体类型都具有各自不同的特性，根据不同媒体类型的特性设置不同的展示风格。注意都要使用小括号进行包含。
| 值 | 说明 |
|---|---|
| width | 定义输出设备中页面可视区域的宽度 |
| min-width | 最小宽度 |
| max-width | 最大宽度 |
/* 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实际开发适配方案
- 按照设计稿与设备宽度的比例，动态计算并设置html跟标签的font-size大小；(媒体查询)
- CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；
技术方案1：less + 媒体查询 + rem
设计稿常见尺寸宽度：
| 设备 | 常见宽度 |
|---|---|
| iPhone 4/5 | 640px |
| iPhone 6/7/8 | 750px |
| Android | 常见320px、360px、375px、384px、400px、414px、500px、720px 大部分4.7~5寸的安卓设备为720px |
一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果。现在基本以750为准。
元素大小取值方法
- 公式：页面元素的rem值 = 页面元素px值 / (屏幕宽度 / 划分的份数)
- html 的font-size = 屏幕宽度 / 划分的份数
- 也就是 页面元素的rem值 = 页面元素px值 / (html font-size)
具体
-
首先选一套标准尺寸 750px为准
-
用屏幕尺寸 / 划分的份数 (750px/15=50) 得到html中的文字大小
-
页面元素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)响应式开发原理
利用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
| 设备划分 | 尺寸区间 |
|---|---|
| 超小屏幕(手机) | size < 768px |
| 小屏设备(平板) | 768px <= size < 992px |
| 中等屏幕(桌面显示屏) | 992px <= size <1200px |
| 宽屏设备(大桌面显示器) | size >= 1200px |
(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开发更加快捷。
框架：就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
(2)优点
- 标准化的html+css编码规范
- 提供了一套简洁、直观、强悍的组件
- 有自己的生态圈，不断更新迭代
- 让开发更简单，提高了开发效率
目前使用最多的是v3.0版本的，稳定，但放弃了IE6-IE7。对IE8支持但界面效果不好，偏向于开发响应式布局、移动设备优先的WEB项目。
(3)Bootstrap使用
四部曲：1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容
-
创建文件夹结构的时候要单独建一个Bootstrap文件夹，用于存放Bootstrap的css+js+fonts
-
创建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]--> -
引入相关样式文件
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"> -
书写内容
-
可以直接将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)的组合来创建页面布局，内容就可以放入这些创建好的布局中。
| 超小屏幕(手机) | 小屏设备(平板) | 中等屏幕(桌面显示器) | 宽屏设备(大桌面显示器) | |
|---|---|---|---|---|
| .container最大宽度 | 自动100% | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列(column)数 | 12 |
-
行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.响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
| 类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|---|---|---|---|
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
<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？
- iPhone6/7/8，所以视口宽度尺寸为375px
- 那么1vw = 3.75px
- 元素 = 50px
- 所以元素 = 50/3.75 = 13.3333vw
注意事项：
- 开发中使用vw，需要将模式改为2×模式
- 因为涉及到大量除法，所以搭配LESS更好
- 本质是根据视口宽度来等比例缩放页面元素的宽高基本就够了，vh很少使用
- 兼容性：兼容性问题可以查看这个网站：https://caniuse.com/
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
