目录
移动端基础
大纲：视图、rem布局、媒体查询
手机浏览器的内核是什么？
产业概况:全球仅有四大浏览器内核
目前全球仅有四个独立的浏览器内核，分别为微软1E的Trident、网景最初研发后卖给Mozilla基金会并演化成火狐的Gecko., KDE的开源内核Webkit以及Opera(欧朋)的Presto。 其中，Presto是历史最悠久的内核。
具前微软的Trident在移动终端上主婴为WP7系统内置浏览器，Opera的Presto内 核在所有联网设备上都使用，移动终端上主要为Opera Mobile、OperaMini、 欧朋浏览器以及欧朋HD Beta版，Webkit内核的适用范围则较为广泛，Android原生浏览器、苹果的Safari、 谷歌的
Chrome(Android4.0使用)都是基于Webkit开源内核开发的。
四大浏览器内核优缺点
- 1.Trident:因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。
- 2.Gecko:优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。
- 3.Webkit:优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。
- 4.Presto: Presto内 核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。
国内现在大多数都是基于Webkit开发的
视口viewport
移动端屏幕比pc端屏幕小很多，因此- - 个针对桌面设计的界面不一一定(或完全不)能很好的使用到移动端。所以，响应式来了!
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。
而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）。
两种像素
像素是计算机屏幕中显示特定颜色的最小区域。屏幕中的像素越多，同一范围内能看到的内容就越多。或者说，当设备尺寸相同时，像素越密集，画面就越精细。
那么，当我们在 CSS 中为一个元素设置属性 width: 250px; 时，会发生什么？这个元素的宽度究竟是多少像素呢？
事实上，这里已经涉及了两种不同的像素：物理像素和 CSS 像素。
物理像素（设备像素，device pixels）
指的是设备屏幕的物理像素，任何设备的物理像素数量都是固定的。
CSS 像素（CSS pixels）
是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。
在 Apple 的视网膜屏（Retina）中，每 4 个像素为一组，渲染出普通屏幕中一个像素显示区域内的图像，从而实现更为精细的显示效果。此时， 250px 的元素跨越了 500 个物理像素的宽度。
三种视口
移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。
因此，引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。
- 布局视口（layout viewport）
一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height 获取。
可以看到，默认的布局视口宽度为 980px。如果要显式设置布局视口，可以使用 HTML 中的 meta 标签：
<meta name="viewport" content="width=400">
布局视口使视口与移动端浏览器屏幕宽度完全独立开。CSS 布局将会根据它来进行计算，并被它约束。
- 视觉视口（visual viewport）
视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。
视觉视口和缩放比例的关系为：
当前缩放值 = 理想视口宽度 / 视觉视口宽度
所以，当用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。
- 理想视口（ideal viewport）
布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。
理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素（device independent pixel, dip）。dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。
例子：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
#box{
margin: 0 auto;
background-color: gray;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#box div{
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
}
运行结果：
例子：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<ul id="list">
<li class="cell1">
<div></div>
<div></div>
</li>
<li class="cell2">
<div></div>
<div></div>
</li>
<li class="cell3">
<div></div>
<div></div>
</li>
<li class="cell1">
<div></div>
<div></div>
</li>
</ul>
<nav id="tab">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">闪送超市</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">我的</a></li>
</ul>
</nav>
</body>
</html>
CSS：
*{
padding: 0;
margin: 0;
}
#list{
width: 100%;
height: 80px;
}
#list>li{
display: flex;
width: 100%;
height: 80px;
margin-bottom: 1px;
}
#list>li>div:nth-child(1){
background-color: greenyellow;
width: 25%;
height: 100%;
}
#list>li>div:nth-child(2){
background-color: royalblue;
width: 75%;
height: 100%;
}
#tab{
width: 100%;
height: 50px;
position: fixed;
bottom: 0px;
}
#tab>ul{
display: flex;
height: 100%;
/*justify-content: space-around;*/
}
#tab>ul>li{
list-style: none;
width: 25%;
height: 100%;
background-color: gray;
text-align: center;
line-height: 50px;
}
#tab>ul>li>a{
text-decoration: none;
font-size: 20px;
}
运行结果：
rem
rem说明： 相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。
rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。
rem和px之间的换算：1rem === 16px
多媒体
Html4时代，刚页没有显示视频的一个标准，所以基本都要借助插件来实现视频的播放，插件过多或者插件自身问题，很容易引起浏览器的假死，造成用户体验不佳。
<embed src=“url">
为了创建更加丰富的web页面和web富应用，W3C在 htmI5中加入了多媒体video (视频)和audio (音频)标签和相关API，目标就是干掉fash这样的插件。
使用embed标签可以在网页中可放置MP3音乐、电影、flash动画等多媒体内容。
基本语法：
<embed src=“文件路径” width=value height=value hidden=hidden_value autostart=auto_value loop=loop_value> </embed>
语法解释：
- hidden设置播放面板的显示和隐藏，hidden_value有两个值：true(隐藏)和no(显示)；
- autostart设置多媒体内容的播放方式， auto_value 有两个值：true（自动播放）和no（不自动播放）；
- loop设定是否循环播放， loop_value有两个值：true（无限次循环播放）no（仅播放一次）。
视频格式
MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。
| 格式 | 文件 | 描述 |
|---|---|---|
| AVI | .avi | AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。 |
| WMV | .wmv | Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。 |
| MPEG | * .mpg |
- .mpeg | MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。 | | QuickTime | .mov | QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。 | | RealVideo | * .rm
- .ram | RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。 | | Flash | * .swf
- .flv | Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。 | | Mpeg-4 | .mp4 | Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。 |
声音格式
| 格式 | 文件 | 描述 |
|---|---|---|
| MIDI | * .mid |
- .midi | MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。点击这里播放 The Beatles。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。 | | RealAudio | * .rm
- .ram | RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。 | | Wave | .wav | Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。 | | WMA | .wma | WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。 | | MP3 | * .mp3
- .mpga | MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。 |
例子：
注意：绝对路径：使用图片在硬盘上的绝对位置来访问图片，通常是从根目录开始，向下一个目录一个目录的寻找；在开发网页的过程中，一般不会使用绝对路径
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio id="music" src="music/周杰伦 - 稻香.mp3" ></audio>
<button onclick="playmusic()"> 播放 </button>
<button onclick="pause()"> 暂停 </button>
<script type="text/javascript">
var music = document.getElementById("music")
function playmusic(){
// music.autoplay = "autoplay";
music.play();
}
function pause(){
music.pause();
}
</script>
</body>
</html>
运行结果：
CSS动画
如何制作CSS动画：
- 转换transform
- 动画@keyframes规则，animation属性
- 过度transition
- RequestAnimationFrame
- setInterval
- 动画算子
- 动画库如jQuery封装，Velocity.js
CSS的transform属性：www.runoob.com/cssref/css3…
例子：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
div{
width: 400px;
height: 200px;
background-color: deepskyblue;
margin-bottom: 20px;
}
div:first-child{
transform: scale(0.5);
/*倾斜45度*/
transform: skew(-45deg);
}
div:nth-child(2){
/*水平方向移动距离，垂直方向移动距离*/
transform: translate(100px,100px);
}
div:nth-child(3){
/*旋转45度*/
transform: rotateZ(45deg);
}
</style>
<body>
<div id="">afdgsdgsfgdf</div>
<div id="">按公司大股东</div>
<div id="">图图有条件</div>
</body>
</html>
运行结果：
例子：点击旋转图片
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
div{
width: 400px;
height: 200px;
background-color: deepskyblue;
margin-bottom: 20px;
}
</style>
<body>
<div id="a">afdgsdgsfgdf</div>
<button onclick="fun()">x轴</button>
<script type="text/javascript">
var n = 0
function fun(){
var a = document.getElementById("a")
n += 45
a.style.transform = "rotate("+n+"deg)"
console.log(n,a.style.transform)
}
</script>
</body>
</html>
运行结果：
CSS中的动画功能
CSS3中的动画分为Animations功能与Transitions功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果
1、Animations功能支持通过关键帧的指定来再页面上产生更复杂的动画效果
2、Transitions功能支持从一 个属性值平滑过渡到另一个属性值
例子：鼠标移动颜色渐变
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
div{
width: 400px;
height: 200px;
background-color: deepskyblue;
margin-bottom: 20px;
/*改变的内容 改变时间 格式 延迟时间*/
transition: background-color 2s linear 0s;
}
div:hover{
background-color: red;
}
</style>
<body>
<div id="a"></div>
</body>
</html>
运行结果：
例子：
<style type="text/css">
div{
width: 400px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
@keyframes mycolor{
0%{
background-color: deepskyblue;
}
25%{
background-color: darkgoldenrod;
}
50%{
background-color: green;
}
100%{
background-color: blueviolet;
}
}
div:hover{
animation: mycolor 5s linear 0s;
}
</style>
例子：类似时钟指针转动
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body{
background-color: red;
height: 100%;
}
#box{
width: 200px;
height: 200px;
margin: 200px auto;
border-radius: 50%;
/*background-color: blue;*/
border:2px solid white;
position: relative;
/*设置动画*/
animation: run 2s infinite;
}
#box:before{
content: "";
display: block;
width: 95px;
height: 5px;
/*border-radius: 50%;*/
background-color: white;
position: absolute;
left: 50%;
margin-left: 0px;
top: 50%;
margin-top: -2.5px;
}
/*动画效果*/
@keyframes run{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
<body>
<div id="box"></div>
</body>
</html>
运行结果：
一起学习，一起进步 -.- ，如有错误，可以发评论
