本文共 9433 字，大约阅读时间需要 31 分钟。

适配

适配：各个移动设备，分辨率大小不一致，使我们的页面在各种分辨率下都显示完好（等比缩放）；根据屏幕的分辨率，动态的设置html的字体大小，达到页面的等比缩放。注意：保证html最终算出来的字体大小不能小于12px

rem适配

   (function(){
   	var html = document.querySelector('html');	var width = html.getBoundingClientRect().width;	// console.log(width);	html.style.fontSize = width/16 + 'px';	// html字体大小 = 屏幕宽度的16分之一 = 1rem 	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)页面宽度定死，例如：3202)动态设置 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);/*设置了viewport默认就是device-width，不设置viewport默认就是980(document.querySelector('html').getBoundingClientRect().width=980)*/

横竖屏适配

方法一

   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';}

方法二

// window.orientation 屏幕方法 0 ±90 180 度// alert(window.orientation)// var width = window.screen.width;var width = (window.orientation==90||window.orientation==-90)			? window.screen.height			: window.screen.widthvar 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.reload();		window.location.href = window.location.href;	}, 600);});

3D

1）旋转 rotate	rotateX	rotateY	rotateZ2）位移 translate	translateX	translateY	translateZ	translate3D()

旋转正方体

#box {
     width: 100px;  height: 100px;  padding: 100px;  border: 5px solid #000;  /* 透视/景深 */  perspective: 200px;  /* 景深基点（视觉方向） */  /*perspective-origin: center center;*/  perspective-origin: center center;  margin: 100px auto;  background: url(img/bg.jpg);}#div {
     position: relative;  width: 100px;  height: 100px;  /*background: red;*/  transition: 2s;  transform-style: preserve-3d;  transform-origin: center center -50px;}#box:hover #div {
     /*transform: rotateX(360deg);*/  transform: rotateY(360deg);  /*transform: rotateZ(360deg);*/  /*transform: translateZ(100px);*/  /* 变换基点 center(x) center(y) 0 */  /*transform-origin: center center 0;*/  /*transform-origin: center top 0;*/  /*transform-origin: center 100px 0;*/}#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)}

   
  
    
    
     1    
     2    
     3    
     4  
    
   

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 '宋体';  /*color: #fff;*/  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}

   
  
    
    
     
      
      1    
     
    
     
      
      2    
     
  
    
   

三棱柱

#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);}

   
	
    
		
     1		
     2		
     3	
    
   

多棱柱

#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;}

// 正N边形的外角和 = 360°// 正N边形外角 = 360°/Nwindow.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 += ''+i+'';  }  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: url(img/img2.png) no-repeat;*/	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 #fff;*/	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;}

document.addEventListener('touchstart', function(e){
   	e.preventDefault();})window.onload = function(){
   	// 设置每个li里的每个span（每一个功能图标）的图片位置	var lis = document.querySelectorAll('.content li');	for(var i=0;i

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;}

   
	
    l	
    o	
    a	
    d	
    i	
    n	
    g		
   

window.onload = function(){
   	var oSpan = document.querySelectorAll('#box span');	for(var i=0; i

转载地址：https://blog.csdn.net/yangwei234/article/details/84939528 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！