适配
适配:各个移动设备,分辨率大小不一致,使我们的页面在各种分辨率下都显示完好(等比缩放);
根据屏幕的分辨率,动态的设置html的字体大小,达到页面的等比缩放。
注意:保证html最终算出来的字体大小不能小于12px
rem适配
<meta name="viewport" content="width=device-width, user-scalable=no"/>
(function(){
var html = document.querySelector('html');
var width = html.getBoundingClientRect().width;
html.style.fontSize = width/16 + 'px';
console.log(html.getBoundingClientRect());
})();
getBoundingClientRect
**getBoundingClientRect**用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
1)语法:这个方法没有参数。
rectObject = object.getBoundingClientRect();
2)返回值类型:TextRectangle对象,每个矩形具有四个整数性质(上, 右 , 下,左)表示的坐标的矩形,以像素为单位。
rectObject.top:元素上边到视窗上边的距离;
rectObject.right:元素右边到视窗左边的距离;
rectObject.bottom:元素下边到视窗上边的距离;
rectObject.left:元素左边到视窗左边的距离。
viewport适配
1)页面宽度定死,例如:320
2)动态设置 viewport 把可视区的宽度设置成320
width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。
var width = window.screen.width;
var targetW = 320;
var scale = width/targetW;
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale='+scale+', minimum-scale='+scale+', maximum-scale='+scale);
document.head.appendChild(meta);
横竖屏适配
方法一
<meta name="viewport" content="width=device-width, user-scalable=no"/>
window.addEventListener('orientationchange', function(){
setRem();
});
function setRem(){
var html = document.querySelector('html');
var width = html.getBoundingClientRect().width;
console.log(width)
html.style.fontSize = width/16 + 'px';
}
方法二
var width = (window.orientation==90||window.orientation==-90)
? window.screen.height
: window.screen.width
var targetW = 320;
var scale = width/targetW;
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale='+scale+', minimum-scale='+scale+', maximum-scale='+scale);
document.head.appendChild(meta);
window.addEventListener('orientationchange', function(){
setTimeout(function(){
alert(window.screen.width);
window.location.href = window.location.href;
}, 600);
});
3D
1)旋转 rotate
rotateX
rotateY
rotateZ
2)位移 translate
translateX
translateY
translateZ
translate3D()
旋转正方体
#box {
width: 100px;
height: 100px;
padding: 100px;
border: 5px solid #000;
perspective: 200px;
perspective-origin: center center;
margin: 100px auto;
background: url(img/bg.jpg);
}
#div {
position: relative;
width: 100px;
height: 100px;
transition: 2s;
transform-style: preserve-3d;
transform-origin: center center -50px;
}
#box:hover #div {
transform: rotateY(360deg);
}
#box:hover #div {
transform: rotateY(-360deg);
}
#div span{
width: 100px;
height: 100px;
position: absolute;
left: 0;
right: 0;
font: 50px/100px '宋体';
color: #fff;
text-align: center;
transform-origin: center center -50px;
opacity: .5;
backface-visibility: hidden;
}
#div span:nth-of-type(1){background: #f60;}
#div span:nth-of-type(2){background: #6f0;transform: rotateY(90deg)}
#div span:nth-of-type(3){background: #0f6;transform: rotateY(180deg)}
#div span:nth-of-type(4){background: #06f;transform: rotateY(270deg)}
<div id="box">
<div id="div">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
3D旋转切换
#box {
width: 400px;
height: 200px;
padding: 100px;
border: 5px solid #000;
perspective: 800px;
perspective-origin: center center;
margin: 100px auto;
}
#div {
position: relative;
width: 400px;
height: 200px;
transition: 2s;
transform-style: preserve-3d;
transform-origin: center center 0px;
}
#box:hover #div {
transform: rotateY(360deg);
}
#box:hover #div {
transform: rotateY(-180deg);
}
#div span{
display: block;
transform: translateZ(100px);
width: 100px;
margin: 0 auto;
backface-visibility: hidden;
}
#div div{
width: 400px;
height: 200px;
position: absolute;
left: 0;
right: 0;
font: 50px/100px '宋体';
text-align: center;
backface-visibility: hidden;
transform-style: preserve-3d;
}
#div div:nth-of-type(1){background: #ccc;}
#div div:nth-of-type(1) span{background: #f60;}
#div div:nth-of-type(2){background: #6f0;transform: rotateY(180deg)}
#div div:nth-of-type(2) span{background: red}
<div id="box">
<div id="div">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
</div>
</div>
三棱柱
#box {
width: 100px;
height: 100px;
padding: 100px;
border: 5px solid #000;
perspective: 200px;
perspective-origin: center center;
margin: 100px auto;
}
#div {
position: relative;
width: 100px;
height: 100px;
transition: 2s;
transform-style: preserve-3d;
transform-origin: center center -28.87px;
}
#box:hover #div {
transform: rotateY(360deg);
}
#div span{
width: 100px;
height: 100px;
position: absolute;
left: 0;
right: 0;
font: 50px/100px '宋体';
color: #fff;
text-align: center;
transform-origin: center center -28.87px;
backface-visibility: hidden;
}
#div span:nth-of-type(1){background: #000;transform: rotateY(0deg)}
#div span:nth-of-type(2){background: #6f0;transform: rotateY(120deg)}
#div span:nth-of-type(3){background: #0f6;transform: rotateY(240deg);}
<div id="box">
<div id="div">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
多棱柱
#box {
width: 100px;
height: 100px;
padding: 100px;
border: 5px solid #000;
perspective: 200px;
perspective-origin: center center;
margin: 100px auto;
}
#div {
position: relative;
width: 100px;
height: 100px;
transition: 5s;
transform-style: preserve-3d;
}
#box:hover #div {
transform: rotateY(-360deg);
}
#div span{
position: absolute;
left: 0;
right: 0;
width: 98px;
height: 98px;
font: 50px/100px '宋体';
color: #fff;
text-align: center;
background: #ccc;
border: 1px solid #000;
}
<div id="box">
<div id="div"></div>
</div>
window.onload = function(){
var oDiv = document.getElementById('div');
var html = '';
var width = 100;
var n = 10;
var deg = 360/n;
var center = -Math.tan((180-deg)/2*Math.PI/180)*(width/2).toFixed(4);
for(var i=0; i< n; i++){
html += '<span style="transform-origin: center center '+center+'px;transform: rotateY('+ deg*i +'deg); ">'+i+'</span>';
}
oDiv.innerHTML = html;
oDiv.style.transformOrigin = 'center center ' + center + 'px';
}
案例-3D桌面切换
html{
height: 100%;
}
body{
margin: 0;
height: 100%;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
#wrap{
height: 100%;
}
#header{
height: 4.0625%;
background: url(img/img1.png) no-repeat;
}
.content{
height: 76.3542%;
background: #000;
perspective: 300px;
-webkit-perspective: 300px;
}
.content li{
width: 25%;
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position: relative;
float: left;
}
.content div{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.content span{
display: block;
width: 100%;
height: 25%;
border: 1px solid #000;
box-sizing: border-box;
}
.content div:nth-of-type(1) span{
background-image: url(img/img1.png);
}
.content div:nth-of-type(2) span{
background-image: url(img/img2.png);
}
.content div:nth-of-type(3) span{
background-image: url(img/img3.png);
}
#footer{
height: 19.5833%;
background: url(img/img3.png) no-repeat 0 bottom;
}
<div id="wrap">
<header id="header" class="bg"></header>
<ul class="content">
<li>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
</li>
<li>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
</li>
<li>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
</li>
<li>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
</li>
</ul>
<footer id="footer" class="bg"></footer>
</div>
document.addEventListener('touchstart', function(e){
e.preventDefault();
})
window.onload = function(){
var lis = document.querySelectorAll('.content li');
for(var i=0;i<lis.length;i++){
var left = lis[i].getBoundingClientRect().left+1;
var oSpan = lis[i].getElementsByTagName('span');
for(var j=0;j<oSpan.length;j++){
var top = oSpan[j].getBoundingClientRect().top;
oSpan[j].style.backgroundPosition = '-'+left+'px -'+top+'px';
}
}
var html = document.querySelector('html');
var htmlRect = html.getBoundingClientRect();
var z = (Math.tan(30*Math.PI/180)*(htmlRect.width/8)).toFixed(4);
for(var i=0;i<lis.length;i++){
cssTransform(lis[i], 'translateZ', -z);
cssTransform(lis[i], 'rotateY', 0);
}
var deg = 120;
var startDeg = 0;
var startPoint = 0;
var content = document.querySelector('.content');
content.addEventListener('touchstart', function(e){
startPoint = e.changedTouches[0].pageX;
startDeg = cssTransform(lis[0], 'rotateY');
for(var i=0;i<lis.length;i++){
lis[i].style.transition = 'none';
}
});
content.addEventListener('touchmove', function(e){
var dis = e.changedTouches[0].pageX-startPoint;
var disDeg = dis/htmlRect.width*deg;
for(var i=0;i<lis.length;i++){
cssTransform(lis[i], 'rotateY', startDeg+disDeg);
}
});
content.addEventListener('touchend', function(e){
var nowDeg = cssTransform(lis[0], 'rotateY');
var now = (-Math.round(nowDeg/deg));
for(var i=0;i<lis.length;i++){
lis[i].style.transition = '.5';
cssTransform(lis[i], 'rotateY', -now*deg);
}
});
toCss();
}
function toCss(){
var html = document.querySelector('html');
var htmlRect = html.getBoundingClientRect();
var z = (Math.tan(30*Math.PI/180)*(htmlRect.width/8)).toFixed(4);
var css = document.querySelector('#css');
var style = '.bg{background-size:'+htmlRect.width+'px '+htmlRect.height+'px !important;}';
style += '.content li{-webkit-transform: translateZ(-'+z+'px) rotateY(0deg);transform: translateZ(-'+z+'px) rotateY(0deg);}';
for(var i=0;i<3;i++){
style += '.content div:nth-of-type('+(i+1)+'){-webkit-transform: rotateY('+(i*120)+'deg) translateZ('+z+'px);transform: rotateY('+(i*120)+'deg) translateZ('+z+'px);}'
}
css.innerHTML += style;
}
animation动画
@keyframes move{
/*动画开始*/
0%{ width: 100px; }
50%{ width: 600px; }
/*动画结束*/
100%{ width: 300px; }
}
animation: 2s move 1s 10 alternate linear;
2s:动画时间
move:调用那个关键帧
1s:延迟时间
10:执行次数,无效次数:infinite
alternate:偶次执行的顺序
linear:动画的形式
暂停
animation-play-state: paused;
案例-loading
@keyframes move{
0%{
top: 0;
}
100%{
top: 10px;
}
}
@-webkit-keyframes move{
0%{
top: 0;
}
100%{
top: 10px;
}
}
#box{
width: 200px;
height: 200px;
background: grey;
border: 1px solid #000;
font-size: 20px;
color: #fff;
}
#box span{
position: relative;
animation: .2s move linear infinite alternate;
}
<div id="box">
<span>l</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
</div>
window.onload = function(){
var oSpan = document.querySelectorAll('#box span');
for(var i=0; i<oSpan.length; i++){
oSpan[i].style.WebkitAnimation = oSpan[i].style.animation = '.2s '+(i*50)+'ms move linear infinite alternate';
}
}