前端学习笔记 - 移动端Web开发
移动端基础
浏览器现状
PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器
移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。
国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样
兼容移动端主流浏览器，处理Webkit内核浏览器即可
手机屏幕现状
移动端设备屏幕尺寸非常多，碎片化严重。
Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。
近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
作为开发者无需关注这些分辨率，因为常用的尺寸单位是px
常见移动端屏幕尺寸
| 设备 | 尺寸(英寸) | 开发尺寸(px) | 物理像素比 |
|---|---|---|---|
| iphone3G | 3.5 | 320*480 | 1.0 |
| iphone4/4s | 3.5 | 320*480 | 2.0 |
| iphone5/5s/5c | 4.0 | 320*568 | 2.0 |
| HTC One M8 | 4.5 | 360*640 | 3.0 |
| iphone 6 | 4.7 | 375*667 | 2.0 |
| Nexus 4 | 4.7 | 384*640 | 2.0 |
| Nexus 5x | 5.2 | 411*731 | 2.3 |
| iphone6 Plus | 5.5 | 414*736 | 3.0 |
| Samsung Galaxy Note4 | 5.7 | 480*853 | 3.0 |
| Sony Xperia Z Ultra | 6.4 | 540*960 | 2.0 |
| Nexus 7('12) | 7.0 | 600*960 | 1.3 |
| iPad Mini | 7.9 | 768*1024 | 1.0 |
作为前端开发，不建议纠结dp，dpi，pt，ppi等单位。
移动端调试方法
Chrome DevTools（谷歌浏览器）的模拟手机调试
f12→左上角小图标→可以选择型号，也可以edit添加
搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
使用外网服务器，直接IP或域名访问
视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
布局视口 layout viewport：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元 素看上去很小，一般默认可以通过手动缩放网页
视觉视口 visual viewport：是用户正在看到的网站的区域
可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度
理想视口 ideal viewport
使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局的视口就多宽
meta视口标签
<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） |
标准的viewport设置
视口宽度和设备保持一致
width=device-width视口的默认缩放比例1.0
initial-scale=1.0不允许用户自行缩放
user-scalable=no最大允许的缩放比例1.0
maximum-scale=1.0最小允许的缩放比例1.0
minimum-scale=1.0
二倍图
物理像素&物理像素比
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。
厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334
开发时候的1px 不是一定等于1个物理像素的
PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同
PC端 和 早前的手机屏幕 / 普通手机屏幕: 1CSS像素 = 1 物理像素的
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
iphone8的物理像素是750，1px开发像素等于2个物理像素(375宽的盒子就可以占满了)
Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从 而达到更高的分辨率，并提高屏幕显示的细腻程度
多倍图
对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
通常使用二倍图， 因为iPhone 6\7\8 的影响,但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求
背景图片 注意缩放问题
/* 在 iphone8 下面，需要一个50*50px的图片，直接放进去会被放大两倍，100*100就会模糊，所以要放一个100*100像素的图片，然后手动把这个图片的大小缩小为50*50px *//* 准备的图片比实际需要的大小大两倍，就是2倍图 */img {/*原始图片100*100px*/width: 50px;height: 50px;}/*或*/.box {/*原始图片100*100px*/background-size: 50px 50px;}
背景缩放 background-size
background-size 属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度;
单位： 长度|百分比|cover|contain;
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
只写一个参数，算作宽度，高度会等比例缩放
移动端开发选择
移动端主流方案
单独制作移动端页面（主流）
京东商城手机版、淘宝触屏版、苏宁易购手机版等
响应式页面兼容移动端（其次）
三星手机官网等
单独移动端页面（主流）
通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面
响应式兼容PC移动端
三星电子官网： www.samsung.com/cn/ ，通过判断屏幕宽度来改变样式，以适应不同终端。
缺点：制作麻烦， 需要花很大精力去调兼容性问题
移动端技术解决方案
移动端浏览器
移动端浏览器基本以 webkit 内核为主，因此就考虑webkit兼容性问题。
可以放心使用 H5 标签和 CSS3 样式。
同时浏览器的私有前缀只需要考虑添加 webkit 即可
CSS初始化 normalize.css
移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css：
保护了有价值的默认值
修复了浏览器的bug
是模块化的
拥有详细的文档
官网地址： Normalize.css: Make browsers render all elements more consistently.
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document========================================================================== */
/*** 1. Correct the line height in all browsers.* 2. Prevent adjustments of font size after orientation changes in iOS.*/
html {line-height: 1.15;/* 1 */-webkit-text-size-adjust: 100%;/* 2 */
}
/* Sections========================================================================== */
/*** Remove the margin in all browsers.*/
body {margin: 0;
}
/*** Render the `main` element consistently in IE.*/
main {display: block;
}
/*** Correct the font size and margin on `h1` elements within `section` and* `article` contexts in Chrome, Firefox, and Safari.*/
h1 {font-size: 2em;margin: 0.67em 0;
}
/* Grouping content========================================================================== */
/*** 1. Add the correct box sizing in Firefox.* 2. Show the overflow in Edge and IE.*/
hr {box-sizing: content-box;/* 1 */height: 0;/* 1 */overflow: visible;/* 2 */
}
/*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*/
pre {font-family: monospace, monospace;/* 1 */font-size: 1em;/* 2 */
}
/* Text-level semantics========================================================================== */
/*** Remove the gray background on active links in IE 10.*/
a {background-color: transparent;
}
/*** 1. Remove the bottom border in Chrome 57-* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.*/
abbr[title] {border-bottom: none;/* 1 */text-decoration: underline;/* 2 */text-decoration: underline dotted;/* 2 */
}
/*** Add the correct font weight in Chrome, Edge, and Safari.*/
b,
strong {font-weight: bolder;
}
/*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*/
code,
kbd,
samp {font-family: monospace, monospace;/* 1 */font-size: 1em;/* 2 */
}
/*** Add the correct font size in all browsers.*/
small {font-size: 80%;
}
/*** Prevent `sub` and `sup` elements from affecting the line height in* all browsers.*/
sub,
sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;
}
sub {bottom: -0.25em;
}
sup {top: -0.5em;
}
/* Embedded content========================================================================== */
/*** Remove the border on images inside links in IE 10.*/
img {border-style: none;
}
/* Forms========================================================================== */
/*** 1. Change the font styles in all browsers.* 2. Remove the margin in Firefox and Safari.*/
button,
input,
optgroup,
select,
textarea {font-family: inherit;/* 1 */font-size: 100%;/* 1 */line-height: 1.15;/* 1 */margin: 0;/* 2 */
}
/*** Show the overflow in IE.* 1. Show the overflow in Edge.*/
button,
input {/* 1 */overflow: visible;
}
/*** Remove the inheritance of text transform in Edge, Firefox, and IE.* 1. Remove the inheritance of text transform in Firefox.*/
button,
select {/* 1 */text-transform: none;
}
/*** Correct the inability to style clickable types in iOS and Safari.*/
button,
[type="button"],
[type="reset"],
[type="submit"] {-webkit-appearance: button;
}
/*** Remove the inner border and padding in Firefox.*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;
}
/*** Restore the focus styles unset by the previous rule.*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;
}
/*** Correct the padding in Firefox.*/
fieldset {padding: 0.35em 0.75em 0.625em;
}
/*** 1. Correct the text wrapping in Edge and IE.* 2. Correct the color inheritance from `fieldset` elements in IE.* 3. Remove the padding so developers are not caught out when they zero out* `fieldset` elements in all browsers.*/
legend {box-sizing: border-box;/* 1 */color: inherit;/* 2 */display: table;/* 1 */max-width: 100%;/* 1 */padding: 0;/* 3 */white-space: normal;/* 1 */
}
/*** Add the correct vertical alignment in Chrome, Firefox, and Opera.*/
progress {vertical-align: baseline;
}
/*** Remove the default vertical scrollbar in IE 10+.*/
textarea {overflow: auto;
}
/*** 1. Add the correct box sizing in IE 10.* 2. Remove the padding in IE 10.*/
[type="checkbox"],
[type="radio"] {box-sizing: border-box;/* 1 */padding: 0;/* 2 */
}
/*** Correct the cursor style of increment and decrement buttons in Chrome.*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {height: auto;
}
/*** 1. Correct the odd appearance in Chrome and Safari.* 2. Correct the outline style in Safari.*/
[type="search"] {-webkit-appearance: textfield;/* 1 */outline-offset: -2px;/* 2 */
}
/*** Remove the inner padding in Chrome and Safari on macOS.*/
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;
}
/*** 1. Correct the inability to style clickable types in iOS and Safari.* 2. Change font properties to `inherit` in Safari.*/
::-webkit-file-upload-button {-webkit-appearance: button;/* 1 */font: inherit;/* 2 */
}
/* Interactive========================================================================== */
/** Add the correct display in Edge, IE 10+, and Firefox.*/
details {display: block;
}
/** Add the correct display in all browsers.*/
summary {display: list-item;
}
/* Misc========================================================================== */
/*** Add the correct display in IE 10+.*/
template {display: none;
}
/*** Add the correct display in IE 10.*/
[hidden] {display: none;
}
CSS3 盒子模型 box-sizing
CSS3盒子模型： 盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding，也就是说，CSS3中的盒子模型， padding 和 border 不会撑大盒子了
/*CSS3盒子模型*/ box-sizing: border-box; /*传统盒子模型*/ box-sizing: content-box;
移动端可以全部CSS3 盒子模型
PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型
特殊样式
<style>div {/*CSS3盒子模型*/box-sizing: border-box;-webkit-box-sizing: border-box;}img,a {/*需要清除点击高亮,设置为transparent透明*/-webkit-tap-highlight-color: transparent;/*禁用长按页面时的弹出菜单*/-webkit-touch-callout: none;}input {/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/-webkit-appearance: none;}</style>
</head>
<body><div></div><a href="#">链接</a><input type="button" value="按钮">
</body>
移动端常见布局
移动端技术选型
单独制作移动端页面（主流）
流式布局（百分比布局）
flex 弹性布局（强烈推荐）
less+rem+媒体查询布局
混合布局
响应式页面兼容移动端（其次）
媒体查询
bootstrap
流式布局（百分比布局）
流式布局，就是百分比布局，也称非固定像素布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
主要是看宽度，不看高度
流式布局方式是移动web开发使用的比较常见的布局方式
max-width 最大宽度 （max-height 最大高度）
min-width 最小宽度 （min-height 最小高度）
京东移动端首页
访问地址：m.jd.com
技术选型
方案：单独制作移动页面方案
技术：采取流式布局
搭建相关文件夹结构
设置视口标签以及引入初始化样式
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 引入我们的css初始化文件 --><link rel="stylesheet" href="css/normalize.css"><!-- 引入我们首页的css --><link rel="stylesheet" href="css/index.css">
常用初始化样式
body {width: 100%;min-width: 320px;max-width: 640px;margin: 0 auto;font-size: 14px;font-family: -apple-system, Helvetica, sans-serif;color: #666;line-height: 1.5;
}
圣杯布局：左右固定，中间自适应
二倍精灵图做法
在firework里面把精灵图等比例缩放为原来的一半，之后再测量坐标
注意代码里面background-size也要写精灵图原来宽度的一半
图片格式
DPG图片压缩技术：京东自主研发推出DPG图片压缩技术，经测试，该技术可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。
webp 图片格式：谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并 能节省大量的服务器宽带资源和数据空间
flex弹性布局
传统布局与flex布局
| 传统布局 | flex 弹性布局 |
|---|---|
| 兼容性好 | 操作方便，布局极为简单，移动端应用很广泛 |
| 布局繁琐 | PC端浏览器支持情况较差 |
| 局限性，不能再移动端很好的布局 | IE 11或更低版本，不支持或仅部分支持 |
建议：
如果是PC端页面布局，我们还是传统布局。
如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局布局原理
布局原理
<!DOCTYPE html>
<html lang="en">
<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"><title>Document</title><style>div {display: flex;width: 80%;height: 300px;background-color: pink;justify-content: space-around;}div span {/* width: 150px; */height: 100px;background-color: purple;margin-right: 5px;flex: 1;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span></div>
</body>
</html>
flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局
当为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
子元素会被转换成块级元素
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成 员，称为 Flex 项目（flex item），简称"项目"
体验中 div 就是 flex父容器。
体验中 span 就是 子容器 flex项目
子容器可以横向排列也可以纵向排列
总结flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
常见父项属性
以下由6个属性是对父元素设置的
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex-direction 设置主轴的方向
主轴与侧轴：在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向，水平向右
默认侧轴方向就是 y 轴方向，水平向下
属性值
flex-direction 属性决定主轴的方向（即项目的排列方向）
注意：
主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴(如flex-direction: column;那么x轴就是侧轴)。而子元素是跟着主轴来排列的
| 属性值 | 说明 |
|---|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
justify-content 设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意： 使用这个属性之前一定要确定好主轴是哪个
| 属性值 | 说明 |
|---|---|
| flex-start | (默认值)从头部开始；如果主轴是x轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间（重要） |
flex-wrap 设置子元素是否换行
默认情况下，项目都排在一条线（又称”轴线”）上
flex-wrap属性定义，flex布局中默认是不换行的，如果装不开，会缩小子元素
| 属性值 | 说明 |
|---|---|
| nowrap | (默认值)不换行 |
| wrap | 换行 |
align-items 设置侧轴上的子元素排列方式（单行）
控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项（单行）的时候使用
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中（垂直居中） |
| stretch | 拉伸（默认值 ） |
让子元素既水平居中对齐又垂直对齐：在主轴(justify-content)，再在侧轴(align-items)
align-content 设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式 并且只能用于子项出现换行的情况（多行）(必须设置了flex-wrap :wrap;)，在单行下是没有效果的。
| 属性值 | 说明 |
|---|---|
| flex-start | (默认值)在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
align-content 和 align-items 区别
align-items 适用于单行情况下， 只有上对齐、下对齐、居中和拉伸
align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找 align-items 多行找 align-content
flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap;
常见子项属性
flex 属性
定义子项目分配剩余空间，用flex来表示占多少份数，也可以写百分比
.item {flex: <number>; /* default 0 */
}
<!DOCTYPE html>
<html lang="en"><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"><title>Document</title><style>section {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto;}section div:nth-child(1) {width: 100px;height: 150px;background-color: red;}section div:nth-child(2) {flex: 1;background-color: green;}section div:nth-child(3) {width: 100px;height: 150px;background-color: blue;}p {display: flex;width: 60%;height: 150px;background-color: pink;margin: 100px auto;}p span {flex: 1;}p span:nth-child(2) {flex: 2;background-color: purple;}</style>
</head><body><section><div></div><div></div><div></div></section><p><span>1</span><span>2</span><span>3</span></p>
</body></html>
align-self 控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
span:nth-child(2) {/* 设置自己在侧轴上的排列方式 */align-self: flex-end;}
order 属性定义项目的排列顺序
数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样
.item {order: <number>;
}
携程网移动端首页
访问地址：m.ctrip.com
技术选型
方案：单独制作移动页面方案
技术：采取flex布局
搭建相关文件夹结构
设置视口标签以及引入初始化样式
<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 {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft
Yahei",STXihei,hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
常见模块命名
常见flex布局思路
背景线性渐变
background: linear-gradient(起始方向, 颜色1, 颜色2, ...); background: -webkit-linear-gradient(left, red , blue); background: -webkit-linear-gradient(left top, red , blue);
背景渐变必须添加浏览器私有前缀
起始方向可以是： 方位名词或者度数 ， 如果省略默认就是 top
rem适配布局
rem单位
rem (root em)是一个相对单位，类似于em，em是父元素字体大小
不同的是rem的基准是相对于html元素的字体大小
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px
rem的优势：
父元素文字大小可能不一致， 但是整个页面只有一个html，可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制
/* 根html 为 12px */html {font-size: 12px;}/* 此时 div 的字体大小就是 24px */ div {font-size: 2rem;}
媒体查询
媒体查询（Media Query）是CSS3新语法
使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
语法规范
@media mediatype and|not|only (media feature) {CSS-Code;}
用 @media 开头 注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性 必须有小括号包含
mediatype 查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
| 值 | 说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等 |
关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
| 值 | 说明 |
|---|---|
| and | 可以将多个媒体特性连接到一起，相当于“且”的意思 |
| not | 排除某个媒体类型，相当于“非”的意思，可以省略 |
| only | 指定某个特定的媒体类型，可以省略 |
媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 注意他们要加小括号包含
| 值 | 说明 |
|---|---|
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域宽度 |
| max-width | 定义输出设备中页面最大可见区域宽度 |
/* 在屏幕上并且最大宽度是800像素，设置想要的样式 *//* 在屏幕上小于等于800px的时候背景颜色变色 *//* 可以根据不同的屏幕尺寸改变不同的样式 */ @media screen and (max-width:800px) {body {background-color: pink;}}@media screen and (max-width:500px) {body {background-color: skyblue;}}
根据页面宽度改变背景变色
① 按照从大到小的或者从小到大的思路 ② 注意最大值 max-width 和最小值 min-width都是包含等于的 ③ 当屏幕小于540像素， 背景颜色变为蓝色 （x <= 539） ④ 当屏幕大于等于540像素 并且小于等于 969像素的时候 背景颜色为 绿色 ( 540=<x <= 969） ⑤ 当屏幕大于等于 970像素的时候，背景颜色为红色 （ x >= 970）
注意： 为了防止混乱，媒体查询要按照从小到大或者从大到小的顺序来写,但推荐从小到大来写，这样代码更简洁
<style>/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 *//* 2. 小于540px 页面的背景颜色变为蓝色 */@media screen and (max-width: 539px) {body {background-color: blue;}}/* 3. 540 ~ 970 我们的页面颜色改为 绿色 *//* @media screen and (min-width: 540px) and (max-width: 969px) {body {background-color: green;}} */@media screen and (min-width: 540px) {body {background-color: green;}}/* 4. 大于等于970 我们页面的颜色改为 红色 */@media screen and (min-width: 970px) {body {background-color: red;}}/* 5. screen 还有 and 必须带上不能省略的 *//* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */</style>
媒体查询+rem实现元素变化
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化
<!DOCTYPE html>
<html lang="en"><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"><title>Document</title><style>* {margin: 0;padding: 0;}/* html {font-size: 100px;} *//* 从小到大的顺序 */@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;}</style>
</head><body><div class="top">购物车</div>
</body></html>
引入资源
当样式比较繁多的时候，可以针对不同的媒体使用不同 stylesheets（样式表）。
原理：直接在link中判断设备的尺寸，然后引用不同的css文件
语法规范：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">示例
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">
<!DOCTYPE html> <html lang="en"><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"><title>Document</title><style>/* 当我们屏幕大于等于 640px以上的，我们让div 一行显示2个 *//* 当我们屏幕小于640 我们让div一行显示一个 *//* 一个建议： 我们媒体查询最好的方法是从小到大 *//* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */</style><link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)"><link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)"> </head><body><div>1</div><div>2</div> </body></html>
style320.css
div {width: 100%;height: 100px;
}div:nth-child(1) {background-color: pink;
}div:nth-child(2) {background-color: purple;
}
style640.css
div {float: left;width: 50%;height: 100px;
}div:nth-child(1) {background-color: pink;
}div:nth-child(2) {background-color: purple;
}
Less 基础
维护 css 的弊端
CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目
Less 介绍
Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器。
做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为CSS加入程序式语言的特性。
它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。
Less中文网址： Less 中文网
常见的CSS预处理器：Sass、Less、Stylus
Less 是一门 CSS 预处理语言，它扩展了CSS的动态特性
Less 安装
如果使用vscode无需安装less：安装easy less插件
修改less自动生成的css的路径：easy less插件的设置图标，'扩展设置'，'在setting.json中编辑'，在''less.compile: {}''加上"out": "../css/"
未安装Vscode：
① 安装nodejs，可选择版本(8.0)，网址：下载 | Node.js 中文网 ② 检查是否安装成功，使用cmd命令（win10 是 window +r 打开 运行输入cmd） --- 输入“ node –v ”查看版本即可 ③ 基于nodejs在线安装Less，使用cmd命令“ npm install -g less ”即可 ④ 检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可
Less 变量
新建一个后缀名为less的文件， 在这个less文件里面书写less语句
变量是指没有固定的值，可以改变的。因为CSS中的一些颜色和数值等经常使用
@变量名:值;
变量命名规范
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感
@color: pink;
变量使用规范
//直接使用
body {color: @color;
}a:hover {color: @color;
}
Less 编译
本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则 最终会通过解析器，编译生成对应的 CSS 文件。
所以，需要把less文件，编译生成为css文件，这样html页面才能使用
vocode Less 插件
Easy LESS 插件用来把less文件编译为css文件
安装完毕插件，重新加载 vscode
只要保存Less文件，就会自动生成CSS文件(再保存，css文件也会自动更新)
Less 嵌套
经常用到选择器的嵌套
#header .logo {width: 300px;
}
Less 嵌套写法：子元素的样式直接写到父元素里面
#header {.logo {width: 300px;}
}
如果有 （交集|伪类|伪元素选择器）
内层选择器的前面没有&符号，则它被解析为父选择器的后代；
如果有& 符号，它就被解析为父元素自身或父元素的伪类。
.header {width: 200px;height: 200px;background-color: pink;// 1. less嵌套：子元素的样式直接写到父元素里面a {color: red;// 2. 如果有伪类、交集选择器、 伪元素选择器，内层选择器的前面需要加&&:hover { // 相当于a:hovercolor: blue;}}
}
.nav {.logo {color: green;}&::before { // 相当于.nav::beforecontent: "";}
}
Less 运算
任何数字、颜色或者变量都可以参与运算。Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
注意：
乘号（*）和除号（/）的写法
运算符中间左右有个空格隔开 如1px + 5
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位
新版本除法需要加括号 如width: (44rem / @baseFont);
@baseFont: 50px;
html {font-size: @baseFont;
}
@border: 5px + 5;
div {width: 200px - 50;height: (200px + 50px ) * 2;border: @border solid red;background-color: #666 - #222;
}
img {width: 82rem / @baseFont;height: 82rem / @baseFont;
}
// 1. 运算符的左右两侧必须敲一个空格隔开
// 2. 两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
// 3. 两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准
rem适配方案
适配的目标：让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
达成目标的方法：使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配
rem实际开发适配方案
① 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小（媒体查询） ② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；
rem适配方案技术使用（市场主流）
技术方案1
less
媒体查询
rem
技术方案2（推荐）
flexible.js
rem
总结：
两种方案现在都存在
方案2更简单
方案1(rem + 媒体查询 + less 技术)
设计稿常见尺寸宽度
| 设备 | 常见宽度 |
|---|---|
| iphone 4/5 | 640px |
| iphone 6/7/8 | 750px |
| Android | 常见320px、360px、375px、384px、400px、414px、500px、720px；大部分4.7~5寸的安卓设备为720px |
一般情况下，以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750px为准
动态设置html标签 font-size 大小
① 假设设计稿是750px ② 假设把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份） ③ 每一份作为html字体大小，这里就是50px ④ 那么在320px设备的时候，字体大小为320/15 就是 21.33px ⑤ 用页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
比如以750为标准设计稿
一个100*100像素的页面元素在750px屏幕下， 就是100/50转换为rem， 2 rem * 2 rem，比例是1比1
320屏幕下， html字体大小为21.33，则2rem = 42.66px，此时宽和高都是 42.66，但是宽和高的比例还是1比1
但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果
元素大小取值方法
最后的公式： 页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
屏幕宽度/划分的份数就是1rem，即html的font-size大小
或： 页面元素的rem值 = 页面元素值（px） / html font-size字体大小
<!DOCTYPE html>
<html lang="en"><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"><title>Document</title><style>@media screen and (min-width: 320px) {html {font-size: 21.33px;}}@media screen and (min-width: 750px) {html {font-size: 50px;}}div {width: 2rem;height: 2rem;background-color: pink;}/* 1. 首先我们选一套标准尺寸 750为准 2. 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 *//* 3. 页面元素的rem值 = 页面元素在 750像素的下px值 / html 里面的文字大小 */</style>
</head><body><div></div>
</body></html>
方案2 flexible.js
手机淘宝团队出的简洁高效移动端适配库
不需要在写不同屏幕的媒体查询，因为里面js做了处理
原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
确定好当前设备的html文字大小就可以了
比如当前设计稿是750px， 只需要把html文字大小设置为 75px(750px / 10) 就可以
里面页面元素rem值： 页面元素的px值 / 75
剩余的，让flexible.js来去算
VSCode - px转换rem插件：cssrem
插件默认的html文字大小 cssroot是16px
设置html字体大小基准值
打开 设置 快捷键是 ctrl + 逗号
或：右键插件，打开扩展设置，修改root font size
苏宁网首页案例
访问地址：m.suning.com
技术选型
方案：采取单独制作移动页面方案
技术：采取rem适配布局（less + rem + 媒体查询）
设计图： 本设计图采用 750px 设计尺寸
搭建相关文件夹结构
设置视口标签以及引入初始化样式
设置公共common.less文件
新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
常见的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
划分的份数定为15等份
因为pc端也可以打开苏宁移动端首页，默认html字体大小为 50px，注意这句话写到最上面
新建index.less文件
新建index.less 这里面写首页的样式
将刚才设置好的 common.less引入到index.less里面 语法如下：
// 在 index.less 中导入 common.less 文件 // @import可以把一个样式文件导入到另外一个样式文件里面 // link 是把一个样式文件引入到html页面里面 @import “common”;
生成index.css 引入到 index.html 里面
body样式
body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial,Helvetica;background: #F2F2F2;
}
flexible方案(与上面不同的地方)
body {min-width: 320px;max-width: 750px;/* flexible划分了10等份 */width: 10rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2;
}@media screen and (min-width: 750px) {html {font-size: 75px!important;}
}
黑马面面
一、目的
了解移动端页面开发流程
掌握移动端常见布局思路
1.1 技术方案
1. 弹性盒子 + rem + LESS 4. 最小适配设备为iphone5 320px 最大设配设备为iphone8plus(ipad能正常查看内容即可)
1.2 代码规范
1. 类名语义化,尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线“_” 连接 2. 类名嵌套层次尽量不超过三层 3. 尽量避免直接使用元素选择器 4. 属性书写顺序布局定位属性：display / position / float / clear / visibility / overflow尺寸属性：width / height / margin / padding / border / background文本属性：color / font / text-decoration / text-align / vertical-align其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow 5. 避免使用id选择器 6. 避免使用通配符*和!important
1.2 目录规范
项目文件夹：heimamm样式文件夹：css业务类图片文件夹：images样式类图片文件夹： icons字体类文件夹： fonts
二、流程开发
2.1 蓝湖/摹客协作平台
UI设计师 psd效果图完成后，会上传到蓝湖//摹客里面，同时会拉前端工程师进入开发
大部分情况下，UI会把图片按照前端设计要求给切好
UI设计师 上传蓝湖到或者/摹客（了解）
1. /摹客官网地址： https://www.mockplus.cn/ 注册一个账号 2. 下载moke ps插件 3. PS 安装/摹客/蓝湖插件 3. 打开PS/摹客/蓝湖插件 4. 上传（需要切图，需要先标注切图） 5. 查看项目 6. 邀请成员进入（分享按钮，链接地址）
前端设计师可以直接/摹客/蓝湖测量取值
2.2 适配方案
flex 布局
百分比布局
rem布局
vw/vh布局
响应式布局
本次案例 flex + rem + + flexible.js + LESS
2.3 初始化文件
引入 normalize.css
less 中 初始化body样式
约束范围
@media screen and (min-width: 750px) {html {font-size: 37.5px !important;} }
2.4 布局模块
头部模块 .header 高度为 80px
nav 模块制作 多用 flex
充电学习 阴影
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1)
2.5 swiper 插件使用
官网地址：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
下载需要的css和js文件 html页面中 引入相关文件
官网找到类似案例，复制html结构，css样式 js 语法
根据需求定制修改模块
2.6 图标字体上传下载
上传步骤：
让UI美工准备好 图标字体（必须是svg格式）
点上传按钮（保留颜色并提交）
生成之后加入购物车即可
点击下载 --- 下载代码
小技巧： 如何批量下载全部字体图标呢？
var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {console.log(span[i].querySelector('span').click());
}
2.7 上传码云并发布部署静态网站
准备工作： 需要下载git软件 需要码云注册账号
git 可以把我们的本地网站提交上传到远程仓库（码云 gitee）里面 类似以前的 ftp
码云 就是远程仓库， 类似服务器
码云创建新的仓库。 heimamm
利用git 提交 把本地网站提交到 码云新建的仓库里面
在网站根目录右键-- Git Bash Here
如果是第一次利用git提交，请配置好全局选项
git config --global user.name "用户名" git config --global user.email "你的邮箱地址"
初始化仓库
git init
把本地文件放到暂存区
git add .
把本地文件放到本地仓库里面
git commit -m '提交黑马面面网站'
链接远程仓库
git remote add origin 你新建的仓库地址
把本地仓库的文件推送到远程仓库 push
git push -u origin master
码云部署发布静态网站
在当前仓库中，点击 “服务” 菜单
选择 Gitee Pages
选择 “启动” 按钮
稍等之后，会拿到地址，就可以利用这个地址来预览网页了
也可以继续利用 草料二维码 把网址生成二维码 草料二维码生成器
响应式布局
响应式开发
响应式开发原理
使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备
| 设备划分 | 尺寸区间 |
|---|---|
| 超小屏幕（手机） | < 768px |
| 小屏设备（平板） | >= 768px ~ < 992px |
| 中等屏幕（桌面显示器） | >= 992px ~ <1200px |
| 宽屏设备（大桌面显示器） | >= 1200px |
响应式布局容器
响应式需要一个父级做为布局容器(一般叫做container)，来配合子级元素来实现变化效果
原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化
响应式尺寸划分：
超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
也可以根据实际情况自己定义划分
<!DOCTYPE html>
<html lang="en"><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"><title>Document</title><style>.container {height: 150px;background-color: pink;margin: 0 auto;}/* 1. 超小屏幕下 小于 768 布局容器的宽度为 100% */@media screen and (max-width: 767px) {.container {width: 100%;}}/* 2. 小屏幕下 大于等于768 布局容器改为 750px */@media screen and (min-width: 768px) {.container {width: 750px;}}/* 3. 中等屏幕下 大于等于 992px 布局容器修改为 970px */@media screen and (min-width: 992px) {.container {width: 970px;}}/* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */@media screen and (min-width: 1200px) {.container {width: 1170px;}}</style>
</head><body><!-- 响应式开发里面，首先需要一个布局容器 --><div class="container"></div>
</body></html>
响应式导航
① 当屏幕大于等于768像素，给container宽度为750px ②container里面包含8个小li盒子，每个盒子的宽度定为93.75(750/8)， 高度为30px，浮动一行显示。 ③ 当屏幕缩放，宽度小于768像素的时候， container宽度修改为100%宽度。 ④container里面的8个小li，宽度修改为 33.33%，这样一行就只能显示3个小li ，剩余下行显示
<!DOCTYPE html>
<html lang="en"><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"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.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 ul li {width: 33.33%;}}</style>
</head><body><div class="container"><ul><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li></ul></div>
</body></html>
Bootstrap前端开发框架
Bootstrap 简介
Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得Web开发更加快捷
网址
中文官网：Bootstrap中文网
官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.
推荐使用：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发
优点：
标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率
版本：
2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善。
3.x.x：目前使用最多,稳定,但是放弃了 IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的 WEB 项目。
4.x.x ：最新版，目前还不是很流行
Bootstrap 使用
控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
Bootstrap 使用四步曲：
创建文件夹结构：新建bootstrap文件夹，把下载下来的里面三个文件夹复制进去
bootstrap.min.css：经过压缩的
创建 html 骨架结构
基本模板
<!doctype html> <html lang="zh-CN"><head><meta charset="utf-8"><!--要求当前网页使用IE浏览器最高版本的内核来渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放--> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--解决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]--></head><body><h1>你好，世界！</h1><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。也可以根据需要只加载单个插件。 --><script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script></body> </html>
引入相关样式文件
书写内容
直接拿Bootstrap 预先定义好的样式来使用
通过类来控制，可以把类添加到想要效果的元素上
修改Bootstrap 原来的样式，注意权重问题
自己写一个新的类名，写样式，覆盖原来的
学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类
container类
响应式布局的容器 固定宽度
大屏 ( >=1200px) 宽度定为 1170px
中屏 ( >=992px) 宽度定为 970px
小屏 ( >=768px) 宽度定为 750px
超小屏 (100%)
container-fluid类
流式布局容器 百分百宽度
占据全部视口（viewport）的容器
Bootstrap栅格系统
栅格系统简介
栅格系统英文为“grid systems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数 的定义来模块化页面布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
rem是把整个屏幕(window)分成多少等份，而栅格系统是把页面分成等份，即把container分成12等份
Bootstrap里面container是固定的，但是在不同屏幕下，container的宽度不同，再把container分为12等份
栅格选项参数
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中
| 超小屏幕（手机）< 768px | 小屏设备（平板）>=768px | 中等屏幕（桌面显示器）>=992px | 宽屏设备（大桌面显示器）>=1200px | |
|---|---|---|---|---|
| .container 最大宽度 | 自动(100%) | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列(column)数 | 12 | 12 | 12 | 12 |
按照不同屏幕划分为1~12 等份
每一个元素占了几份
行（row）必须放到container布局容器里
行（row）可以去除父容器作用15px的边距
想实现列的平均划分，需要给列添加类前缀
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的padding
可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class="col-md-4 col-sm-6"
<!DOCTYPE html>
<html lang="en"><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]--><!-- 一定不要忘记引入bootstrap 的样式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title>Document</title><style>[class^="col"] {border: 1px solid #ccc;}.row:nth-child(1) {background-color: pink;}</style>
</head><body><div class="container"><div class="row"><!-- 宽屏里一个占3份，有4个盒子 --><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><!-- 如果孩子的份数相加等于12，则孩子能占满整个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><!-- 如果孩子的份数相加小于12，则占不满整个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-1">4</div></div><!-- 如果孩子的份数相加大于12，则多余的那一列会另起一行显示 --><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-3">4</div></div></div>
</body></html>
列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
列嵌套最好加1个行row，这样可以取消父元素的padding值，而且高度自动和父级一样高
<!DOCTYPE html>
<html lang="en"><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]--><!-- 一定不要忘记引入bootstrap 的样式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title>Document</title><style>.row>div {height: 50px;background-color: pink;/* margin: 0 10px; */}</style>
</head><body><div class="container"><div class="row"><div class="col-md-4"><!-- 列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 --><div class="row"><div class="col-md-4">a</div><div class="col-md-8">b</div></div></div><div class="col-md-4">2</div><div class="col-md-4">3</div></div></div>
</body></html>
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）
<!DOCTYPE html>
<html lang="en"><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]--><!-- 一定不要忘记引入bootstrap 的样式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title>Document</title><style>.row div {height: 50px;background-color: pink;}</style>
</head><body><div class="container"><div class="row"><div class="col-md-3">左侧</div><!-- 偏移的份数就是(12 - 两个盒子的份数 = 6) --><div class="col-md-3 col-md-offset-6">右侧</div></div><div class="row"><!-- 如果只有一个盒子，那么就偏移 = (12 - 8) /2 --><div class="col-md-8 col-md-offset-2">中间盒子</div></div></div>
</body></html>
列排序
通过使用 .col-md-push-(往右推)* 和 .col-md-pull-(往左拉)* 类就可以很容易的改变列（column）的顺序
<!DOCTYPE html>
<html lang="en"><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]--><!-- 一定不要忘记引入bootstrap 的样式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title>Document</title><style>.row div {height: 50px;background-color: pink;}</style>
</head><body><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>
</body></html>
响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示 或隐藏页面内容
| 类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|---|---|---|---|
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
与之相反的是
visible-xsvisible-smvisible-mdvisible-lg是显示某个页面的内容
Bootstrap 其他（按钮、表单、表格） 请参考Bootstrap文档
<!DOCTYPE html>
<html lang="en"><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]--><!-- 一定不要忘记引入bootstrap 的样式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title>Document</title><style>.row div {height: 300px;background-color: purple;}.row div:nth-child(3) {background-color: pink;}span {font-size: 50px;color: #fff;}</style>
</head><body><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-xs">我会变魔术哦</div><div class="col-xs-3">4</div></div></div>
</body></html>
阿里百秀移动端首页
技术选型
方案：响应式页面开发方案
技术：bootstrap框架
设计图： 本设计图采用 1280px 设计尺寸
页面布局分析
屏幕划分分析
① 通过屏幕缩放发现，中屏幕和大屏幕布局是一致的。 因此列定义为 col-md- 就可以了，md 是大于等于970 以上的 ②通过屏幕缩放发现，小屏幕布局发生变化，因此需要为小屏幕根据需求改变布局 ③ 通过屏幕缩放发现， 超小屏幕布局又发生变化，因此需要为超小屏幕根据需求改变布局 ④ 策略： 先布局md以上的pc端布局，最后根据实际需求在修改小屏幕和超小屏幕的特殊布局样式
container 宽度修改
因为本效果图采取 1280的宽度， 而Bootstrap 里面 container宽度 最大为 1170px，因此需要手动改下container宽度
/* 修改container的最大宽度为 1280 (根据设计稿来走的) */@media screen and (min-width: 1280px) {.container {width: 1280px;}
}
轮播图模块
引入jquery的js文件和bootstrap的js文件
<!-- 先引入jquery js文件 --><script src="bootstrap/js/jquery.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script>
2. 复制结构进去
3. 把复制进去的盒子和里面的图片的高和宽设置成与父盒子一致
4. 把下面的caption文字写进去并修改样式
5. 把mothods里面的定时播放js复制进去
vw/vh移动端布局
移动端布局主要使用flex布局，为了实现可以适配移动端，页面元素的宽度和高度可以等比例缩放，需要溪东段适配有如下方案：
rem(市场比较常见)
需要不断修改html文字大小
需要媒体查询media
需要flexible.js
vw/vh(未来趋势)
省去各种判断和修改
如b站等
vw/vh简介
是一个相对单位(类似于em和rem相对单位)
vw是viewport width 视口宽度单位
vh是viewport height 视口高度单位
相对视口的尺寸计算结果
1vw = 1/100视口宽度
1vh = 1/100视口高度
例如，当前屏幕视口是375像素，则1vw就是3.75像素，如果当前视口为414，则1vw就是4.14像素
与百分比有区别，百分比%是相对于父元素来说的，而vw和vh总是针对于当前视口来说的
vw/vh使用
元素单位直接使用新单位vw/vh即可
vw/vh是相对单位，所以不同视口(屏幕)下，宽高一起变化完成适配
<style>div {width: 10vw;height: 10vh;background-color: pink;}
</style><body><div></div>
</body>
还原设计稿：如果设计稿按照iPhone6/7/8来设计，有个盒子是50px*50px
美工是按照750px做的设计稿，做vw的时候是按照视口宽度来做的(iPhone6/7/8是375px)
Pxcook切换到'2x'模式，把它当做一个二倍图，然后选'vw/vh'
那么1vw就是375/100=3.75px
盒子宽高50/3.75=13.3333vw
注意：
因为涉及到大量的除法，所以常搭配less使用
本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用vw就基本够了，vh很少使用
兼容性：网站 Can I use... Support tables for HTML5, CSS3, etc
Vscode插件：px2vw
点设置图标，'拓展设置'，修改design width至我们需要的数值(这里是375)
移动端网页特效(JavaScript)
触屏事件
触屏事件概述
移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动 端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作
| 触屏touch事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开时触发 |
触摸事件对象（TouchEvent）
TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多 个触点，使开发者可以检测触点的移动，触点的增加和减少，等等
touchstart、touchmove、touchend 三个事件都会各自有事件对象
| 触摸列表 | 说明 |
|---|---|
| touches | 正在触摸屏幕的所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素的手指列表(如果侦听的是一个DOM元素，与touches是一样的) |
| changedTouches | 手指状态发生了改变的列表，从无到有，或从有到无变化 |
因为平时都是给元素注册触摸事件，所以重点记住 targetTocuhes
<style>div {width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div></div><script>// 触摸事件对象// 1. 获取元素// 2. 手指触摸DOM元素事件var div = document.querySelector('div');div.addEventListener('touchstart', function(e) {// console.log(e);// touches 正在触摸屏幕的所有手指的列表 // targetTouches 正在触摸当前DOM元素的手指列表// 如果侦听的是一个DOM元素，他们两个是一样的// changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无// 因为一般都是触摸元素，所以最经常使用的是 targetTouchesconsole.log(e.targetTouches[0]);// targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息，比如手指的坐标等});// 3. 手指在DOM元素身上移动事件div.addEventListener('touchmove', function() {});// 4. 手指离开DOM元素事件div.addEventListener('touchend', function(e) {// console.log(e);// 当手指离开屏幕的时候，就没有了 touches 和 targetTouches 列表// 但是会有 changedTouches});</script>
</body>
移动端拖动元素
touchstart、touchmove、touchend 可以实现拖动元素，但是拖动元素需要当前手指的坐标值，可以使用 targetTouches[0] 里面的pageX和pageY
移动端拖动的原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
手指移动的距离： 手指滑动中的位置 减 手指刚开始触摸的位置
拖动元素三步曲： （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置 （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子 （3） 离开手指 touchend
注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault();
<!DOCTYPE html>
<html lang="en"><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"><title>Document</title><style>div {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div></div><script>// （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置// （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子// （3） 离开手指 touchend:var div = document.querySelector('div');var startX = 0; //获取手指初始坐标var startY = 0;var x = 0; //获得盒子原来的位置var y = 0;div.addEventListener('touchstart', function(e) {// 获取手指初始坐标startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;x = this.offsetLeft;y = this.offsetTop;});div.addEventListener('touchmove', function(e) {// 计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标var moveX = e.targetTouches[0].pageX - startX;var moveY = e.targetTouches[0].pageY - startY;// 移动我们的盒子 盒子原来的位置 + 手指移动的距离this.style.left = x + moveX + 'px';this.style.top = y + moveY + 'px';e.preventDefault(); // 阻止屏幕滚动的默认行为});</script>
</body></html>
classList 属性
classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加，移除及切换 CSS 类
查看元素所有类名：
console.log(element.classList);查看元素的第一个类名：
console.log(element.classList[0]);添加类：
element.classList.add(’类名’);在后面追加类名，不会覆盖以前的类名移除类：
element.classList.remove(’类名’);切换类：
element.classList.toggle(’类名’);原来有这个类名，就删掉；原来没有这个类名，就加上注意：以上方法里面，所有类名都不带点
移动端轮播图
移动端轮播图功能和基本PC端一致。
可以自动播放图片
手指可以拖动播放轮播图
自动播放功能
开启定时器
移动端移动，可以使用translate移动
想要图片优雅地移动，要添加过渡效果(移动端不需要考虑兼容性，所以用css3的transform来做)
和pc端轮播图相同，先复制第一张图片到最后一个
移动端手指右滑会划出东西，所以也要把最后一张图片复制到第一个
自动播放功能-无缝滚动
注意，判断条件是要等图片滚动完毕再去判断，就是过渡完成后判断
此时需要添加检测过渡完成事件
transitionend
判断条件： 如果索引号等于3说明走到最后一张图片，此时索引号要复原为 0
此时图片去掉过渡效果，然后移动
如果索引号小于0， 说明是倒着走， 索引号等于2
此时图片，去掉过渡效果，然后移动
小圆点跟随变化效果
把ol里面li带有current类名的选出来去掉类名(remove)
让当前索引号的小li 加上 current (add)
但是，是等着过渡结束之后变化，所以这个写到 transitionend事件里面
手指滑动轮播图
本质就是ul跟随手指移动，简单说就是移动端拖动元素
触摸元素 touchstart： 获取手指初始坐标
移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
离开手指 touchend: 根据滑动的距离分不同的情况
如果移动距离小于 某个像素(这里是50px) 就回弹原来位置
如果移动距离大于某个像素就上一张下一张滑动。
滑动也分为左滑动和右滑动 判断的标准是 移动距离正负 如果是负值就是左滑 反之右滑
如果是左滑 就播放下一张 （index++）
如果是右滑 就播放上一张 (index--)
click 延时解决方案
移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
解决方案：
禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟：
<meta name="viewport" content="user-scalable=no">利用touch事件自己封装这个事件解决 300ms 延迟
原理：
当手指触摸屏幕，记录当前触摸时间
当手指离开屏幕， 用离开的时间减去触摸的时间
如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击
使用插件： fastclick 插件解决 300ms 延迟
//封装tap，解决click 300ms 延时function tap(obj, callback) {var isMove = false;var startTime = 0; // 记录触摸时候的时间变量obj.addEventListener('touchstart', function(e) {startTime = Date.now(); // 记录触摸时间});obj.addEventListener('touchmove', function(e) {isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击});obj.addEventListener('touchend', function(e) {if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms 算点击callback && callback(); // 执行回调函数}isMove = false; // 取反 重置startTime = 0;});} //调用tap(div, function() { // 执行代码 });
移动端常用开发插件
JS 插件是js文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。
特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
以前写的animate.js 也算一个最简单的插件
使用：
引入 js 插件文件
按照规定语法使用
fastclick插件
解决 300ms 延迟。 使用延时
GitHub官网地址： GitHub - ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIs
引入
<script type='application/javascript' src='/path/to/fastclick.js'></script>
在body里使用
<script>
if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);
}
</script>
Swiper 插件
中文官网地址： Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
使用：
下载Swiper压缩包
引入css文件和js文件(带min的是压缩过的，一般引入这个即可)(先引入swiper的js再引入自己的js)
<!-- 引入我们的css初始化文件 --><link rel="stylesheet" href="css/normalize.css"><!-- 引入我们首页的css --><link rel="stylesheet" href="css/index.css"><!-- 引入swipercss文件 --><link rel="stylesheet" href="css/swiper.min.css"><!-- 引入swiper js 文件 --><script src="js/swiper.min.js"></script><!-- 引入我们自己的js文件 --><script src="js/index.js"></script><title>Document</title>
打开Swiper演示，找到想要的轮播图样式，在下载的文件里的demos文件里找到，打开html文件
查看网页源代码，复制body里的结构部分到需要的地方，注意不要更改里面的结构和类名
把里面的“silde1”等文字替换成我们所需的img
继续复制html文件里style里有关silde的css样式部分到自己的index.css里
继续复制html文件里body里面的script部分到自己的index.js里
自行修改css样式或根据官网API文档可以按照需求修改js的参数
zy.media.js 移动端视频插件
H5提供了 video 标签，但是浏览器的支持情况不同。
不同的视频格式文件，可以通过source 解决。
但是外观样式，还有暂停，播放，全屏等功能只能自己写代码解决。这个时候可以使用插件方式来制作。
其他移动端常见插件
superslide： SuperSlide | TouchSlide 官方网站 大话主席
iscroll： GitHub - cubiq/iscroll: Smooth scrolling for the web
插件的使用总结
确认插件实现的功能
去官网查看使用说明
下载插件
打开demo实例文件，查看需要引入的相关文件，并且引入
复制demo实例文件中的结构html，样式css以及js代码
移动端常用开发框架
框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架 本身，使用者要按照框架所规定的某种规范进行开发。
前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端，也能开发移动端
前端常用的移动端插件有swiper、superslide、iscroll等。
插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
框架： 大而全，一整套解决方案
插件： 小而专一，某个功能的解决方案
Bootstrap(见响应式布局里)
Bootstrap 是一个简洁、直观、强悍的前端开发框架，它让 web 开发更迅速、简单。它能开发PC端，也能开发移动端
Bootstrap JS插件使用步骤：
引入相关js 文件
复制HTML 结构
修改对应样式
修改相应JS 参数
本地存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经 常性在本地存储大量的数据，HTML5规范提出了相关解决方案
本地存储特性
数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量较大，sessionStorage约5M、localStorage约20M
只能存储字符串，可以将对象JSON.stringify() 编码后存储
window.sessionStorage
生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
查看：f12，点击"application"，"Storage"，"Session Storage"
存储数据：sessionStorage.setItem(key, value);
获取数据：sessionStorage.getItem(key);
删除数据：sessionStorage.removeItem(key);
删除所有数据：sessionStorage.clear();
<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="del">清空所有数据</button><script>console.log(localStorage.getItem('username'));var ipt = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var del = document.querySelector('.del');set.addEventListener('click', function() {// 点击了之后，就可以把表单里面的值存储起来var val = ipt.value;sessionStorage.setItem('uname', val);sessionStorage.setItem('pwd', val);});get.addEventListener('click', function() {// 点击了之后，就可以把表单里面的值获取过来console.log(sessionStorage.getItem('uname'));});remove.addEventListener('click', function() {// sessionStorage.removeItem('uname');});del.addEventListener('click', function() {// 点击了之后，清除所有的sessionStorage.clear();});</script>
</body></html>
window.localStorage
生命周期永久生效，除非手动删除，否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用
存储数据：localStorage.setItem(key, value)
获取数据：localStorage.getItem(key)
删除数据：localStorage.removeItem(key)
删除所有数据：localStorage.clear()
<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="del">清空所有数据</button><script>var ipt = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var del = document.querySelector('.del');set.addEventListener('click', function() {var val = ipt.value;localStorage.setItem('username', val);})get.addEventListener('click', function() {console.log(localStorage.getItem('username'));})remove.addEventListener('click', function() {localStorage.removeItem('username');})del.addEventListener('click', function() {localStorage.clear();})</script>
</body></html>
记住用户名
如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名
① 把数据存起来，用到本地存储 ② 关闭页面，也可以显示用户名，所以用到localStorage ③ 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框 ④ 当复选框发生改变的时候 change事件 ⑤ 如果勾选，就存储，否则就移除
<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名<script>var username = document.querySelector('#username');var remember = document.querySelector('#remember');if (localStorage.getItem('username')) {username.value = localStorage.getItem('username');remember.checked = true;}remember.addEventListener('change', function() {if (this.checked) {localStorage.setItem('username', username.value);} else {localStorage.removeItem('username');}})</script>
</body>
前端学习笔记 - 移动端Web开发相关推荐
- Web前端学习笔记15：Web前端开发：jQuery总结
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
- CSS学习笔记(二) 移动WEB开发
思维导图 文章目录 思维导图 1. 移动端基础 1.1 浏览器现状 1.2 手机屏幕现状 1.3 移动端调试方法 2. 视口 2.1 布局视口 2.2 视觉视口 2.3 理想视口 2.4 视口总结 2 ...
- [学习笔记]python的web开发全家桶1-前端
源学习视频 目的:开发一个平台(网站) 前端开发:HTML.CSS.JavaScript Web框架:接收请求并处理 MySQL数据库:存储数据地方 快速上手: 基于Flask Web框架让你快速搭建 ...
- Web前端学习笔记01：Web标准_HTML_lang_字符集_HTML标签的语义化
文章目录 1认识WEB 1.1 认识网页 总结 1.2 浏览器(显示代码) 1.2.1 查看浏览器占有的市场份额 1.2.2 常见浏览器内核(了解) 1.3 Web标准(重点) 1.3.1 为什么要遵 ...
- Java学习笔记-全栈-web开发-02-css必备基础
说明: 如果您是后端开发人员,实际上这章只需要知道个大概即可,一般来说美化工作不需要我们完成. 但更多情况下,我们得能看懂这些css是如何美化的,美化的结果是什么. 因此,后端开发人员不必深入学习. ...
- Web前端学习笔记10：移动web开发流式布局_flex布局
文章目录 移动web开发之rem布局 1 rem基础 1.1 rem单位 2 媒体查询 2.1 什么是媒体查询 2.2 媒体查询语法规范 3 less 基础 3.1 维护css弊端 3.2 Less ...
- vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习 文章目录 vue学习笔记-01-前端的发展历 ...
- Web前端学习笔记11：JavaScript_注释_输入输出_变量_数据类型_关键字_保留字_运算符_流程控制
文章目录 JavaScript基础第01天 1 - 编程语言 1.1 编程 1.2 计算机语言 1.3 编程语言 1.4 翻译器 1.5 编程语言和标记语言区别 总结 2 - 计算机基础 2.1 计算 ...
- 蓝旭前端开发：GITtomcat+nginx原理移动端web 开发
蓝旭前端开发:GIT+移动端 web 开发 目录 一.==GIT== 1.1 ==Git与GitHub== 1.2 ==GitHub注册和Git的下载安装== 二.==Git的使用== 2.1 ==本 ...
- web前端学习笔记（最新）
web前端学习笔记 大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
最新文章
- SetRegistryKey函数
- Swift字典Dictionary快速文档
- php正则匹配价格,关于php：Laravel正则表达式验证价格或空
- 如何给PDF文件交换页面？操作方法你知道吗？
- 巧用枚举CommandBehavior关闭SqlDataReader联接数据库时的conn.open状态
- Spring AOP方法分析
- OpenStack是什么？
- WHERE和HAVING子句有什么区别？
- nginx http server
- C++调用matlab接口
- Android UI 调试常用工具（Dump view UI hierarchy for Automator）
- BLM战略规划的核心是业务模式创新
- 计算机服务大部分被禁用,Win10系统其中的服务被禁用无法打开系统功能解法
- java根据ip地址获取详细地域信息
- python-pygame小游戏之五子棋
- [ahk]热键呼叫QQ经常聊天的人
- 用VS2005打开方案出现“此安装不支持该项目类型
- Git操作不规范，战友提刀来相见。
- Win10 如何显示所有任务栏图标，不进行隐藏
- 川普撞脸希拉里(基于 OpenCV 的面部特征交换)-1