移动web
建议使用H5的api 或使用zepto.js的库（基于高版本浏览器开发）。
适配问题
使用百分比布局（也叫流式布局），还需对移动端的viewport视口进行设置。
视觉窗口：viewport，是移动端特有。这是一个虚拟的区域，承载网页的。
承载关系：浏览器→viewport→网页。
适配方案（标准）
- 网页宽度必须和浏览器保存一致。
- 默认显示的缩放比例和PC端保存（缩放比例1.0）。
- 不允许用户自行缩放网页。
适配设置
如果没有设置，则默认是viewport的默认设置。
<meta name="viewport" content=""> 设置视口的标签，在head里面紧挨编码后设置。
viewport功能(content:使用以下参数)：
- 设置宽度
width、高度height。（device-width当前设备宽度，device-height当前设备高度） - 设置默认的缩放比例
initial-scale。 - 设置是否允许用户自行缩放
user-scalable。 - 设置最大
maximum-scale和最小minimum-scale缩放比例。
PS：在webstorm快捷方式meta:vp+tab键。
<!--标准设置-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
非主流适配方案（淘宝，了解）
- 页面的真实尺寸会比在设备上尺寸要大几倍。
- 缩放操作有2倍3倍，和屏幕像素比有关系。
- 屏幕像素比（1px宽的屏幕能放几个物理像素）。
初始化
与pc端略不同，一般还要加上 box-sizing: border-box;。
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
font-size: 14px;
/*sans-serif如果没有前者字体则使用手机默认字体*/
font-family: "Microsoft YaHei", sans-serif;
color: #333;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
input, textarea {
border: none;
outline: none;
/*不允许改变尺寸*/
resize: none;
/*元素外观 none没有任何样式*/
-webkit-appearance: none;
}
清除点击高亮效果
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
注意问题
取消图片下间隙
/*在图片的css中设置*/
font-size: 0;
/*或*/
display:block;
/*或*/
vertical-align: middle;
按钮不可做太小
touch滑动事件（重要）
touch是移动端的触摸事件，而且是一组事件，实现移动端常见滑动效果和移动端常见手势事件。
- touchstart 当手指触摸屏幕的时候触发。
- touchmove 当手指在屏幕来回的滑动时候触发。
- touchend 当手指离开屏幕的时候触发。
- touchcancel 当被迫终止滑动的时候触发（来电，弹消息）。
事件对象属性：
TouchList 触摸点（一个手指触摸就是一个触摸点，即和屏幕的接触点的个数）的集合。
- changedTouches 记录改变后的触摸点集合
- targetTouches 记录当前元素的触摸点集合
- touches 记录页面上所有触摸点集合
手势事件
就是利用原生touch事件，判断滑动距离，方向来封装某一函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.onload = function (ev) {
// 手势事件
// swipe swipeLeft swipeRight swipeUp swipeDown
// 左滑右滑实现
var bindSwipeEvent = function (dom, leftCallback, rightCallback) {
// 手势的条件
// 1. 必须滑动过
// 2. 滑动的距离50px
var isMove = false;
var startX = 0;
var distanceX = 0;
dom.addEventListener('touchstart', function (e) {
startX = e.touches[0].clientX;
});
dom.addEventListener('touchmove', function (e) {
isMove = true;
var moveX = e.touches[0].clientX;
distanceX = moveX - startX;
});
dom.addEventListener('touchend', function (e) {
// 滑动结束
if (isMove && Math.abs(distanceX) > 50){
if (distanceX > 0){
rightCallback && rightCallback.call(this);
} else {
leftCallback && leftCallback.call(this);
}
}
// 重置参数
isMove = false;
startX = 0;
distanceX = 0;
});
};
bindSwipeEvent(document.querySelector('.box'), function () {
console.log(this);
console.log('左滑');
}, function () {
console.log(this);
console.log('右滑');
});
}
</script>
</body>
</html>
tap事件（轻触，轻击）
在移动端也有click事件，但移动端为了区分是滑动还是点击，click点击会延时300ms。
**注意：**在chrome模拟手机界面看不到300ms的效果，在真机上才看到延时效果。
- 解决方法
- 使用tap事件（不是原生事件，通过touch相关事件衍生过来）。
- 使用fastclick.js 插件——加快响应速度。
<!--方法一，使用tap事件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.onload = function () {
var bindTapEvent = function (dom, callback) {
var startTime = 0;
var isMore = false;
dom.addEventListener('touchstart', function () {
startTime = Date.now();
});
dom.addEventListener('touchmove', function () {
isMore = true;
});
dom.addEventListener('touchend', function (ev) {
// 判断是否已经滑动过和点击的时间
if ((Date.now() - startTime) < 150 && !isMore) {
callback && callback.call(this, ev);
}
// 重置参数
startTime = 0;
isMore = false;
});
};
bindTapEvent(document.querySelector('.box'), function (e) {
console.log(this);
});
}
</script>
</body>
</html>
<!--方法二，使用fastclick.js 插件-->
<script src="js/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
}, false);
}
/*实现click点击事件*/
</script>
iscroll.js区域滚动效果
使用条件：一个容器装着一个容器html结构。
响应式布局开发（重要）
一个网页能够兼容多个终端，即网页随浏览器大小进行变化兼容，称为响应式布局开发。
适合新建的网站，不建议把原有网站做修改，成本会很高。
原理
- 主要使用css3中的@media媒体查询。
- 通过查询screen（屏幕）的宽度来指定某个宽度区间的网页布局。
- 超小屏幕（移动设备）768px以下
- 小屏幕 768px-992px
- 中等屏幕 992px-1200px
- 宽屏设备 1200px以上
语法：@media 关键字 [and (条件), [and (条件),…]] ｛ 样式 ｝
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 1000px;
margin: 0 auto;
height: 1000px;
background: pink;
}
/*使用媒体查询，针对不同屏幕区间设置不同的布局和样式*/
/*语法@media 关键字 [and (条件), [and (条件),...]] ｛ 样式 ｝ */
@media screen and (max-width: 768px) {
.container{
width: 100%;
background: blue;
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
.container{
width: 750px;
background: green;
}
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
.container{
width: 970px;
background: red;
}
}
@media screen and (min-width: 1200px) {
.container{
width: 1170px;
background: yellow;
}
}
</style>
</head>
<body>
<!--
在超小屏设备的时候 768px以下，当前容器的宽度100% 背景蓝色
在小屏设备的时候 768px-992px，当前容器的宽度750px 背景绿色
在中屏设备的时候 992px-1200px，当前容器的宽度970px 背景红色
在大屏设备的时候 1200px以上，当前容器的宽度1170px 背景黄色
-->
<div class="container"></div>
</body>
</html>
bootstrap框架
所有样式及交互都建立在模板上，即需引进库。
解读基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 要求当前网页使用浏览器最高版本的内核来渲染 -->
<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 href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[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"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
响应式容器
<div class="container"></div>
流式布局容器
<div class="container-fluid"></div>
栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合（即网格状）来创建页面布局 。
- “行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中 。 - .container容器默认有15px的左右内间距，.row填充父容器的15px的左右内间距margin-left，margin-right为-15px。
.row定义行。.col_*_*定义行。- 前者*代表屏幕的大小（lg：大屏设备以上生效；md：中屏设备以上生效；sm：小屏设备以上生效；xs：超小屏设备以上生效）。
- 后者*代表占该行几等分，每行默认为12等分。
扩展
-
栅格系统支持嵌套。
-
列的偏移 使用col-*-offset-*样式表
<div class="row"> <div class="col-xs-3"></div> <div class="col-xs-6 col-xs-offset-1"></div> </div> -
列的排序
-
col-*-push-* 向右移几等分
-
col-*-pull-* 向左移几等分
<div class="row"> <div class="col-xs-3 col-xs-push-9"></div> <div class="col-xs-6 col-xs-pull-6"></div> </div>
-
响应式工具
- visible-*
- *时显示其他时候隐藏（不推荐使用）。
- hiddent-* （推荐使用）
- *表示lg大屏、md中屏、sm小屏、xs超小屏。
- 例：
.hiddent-lg大屏隐藏其他屏幕时显示。
使用bootstrap框架注意问题
- 修改bootstrap默认样式时，注意样式覆盖问题。
-
- 拷贝源码的模块（需要修改的模块）样式到项目css中：准确定位到所有元素的选择器并且能保证优先级比源码高。
- 针对功能进行覆盖：更改模块名称（防止影响到后面使用此框架该样式时再被覆盖到）。
- 删除html待覆盖的框架样式模块名称，改用自己修改后的样式模块名称。
rem单位
- rem是相对单位，基于根元素（html标签）的字体大小。
- em大小是基于父元素的字体大小
常用适配方案
- 伸缩布局 flex
- 流式布局 百分比
- 响应布局 媒体查询（超小屏设备的时间：流式布局）
- 共同点：元素只能做宽度的适配（排除图片）
适配方案rem：宽度和高度都能做到适配（等比缩放，但不好维护，因而一般采取less+rem来适配进行维护）
rem布局：通过控制html上的字体大小去控制页面上所有以rem为单位的基准值控制尺寸。
- 把页面上px单位转换成rem单位。
- 页面制作的适配psd上量取的px转成rem使用。
- 预设一个基准值（即html的font-size的值）。
- 换算公式：rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度。
- 通过js换算
- 通过媒体查询换算（推荐）
Zepto.js库
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库。用法jQuery差不多。
2661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
