移动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差不多。