1、首先准备一个HTML结构的文档，页面可以制作的简单点。
2、然后在页面的body区域中放置一个img图片。
3、我们先来运行一下页面，你会在页面中看到如下图所示的圆圈。
4、接下来我们就需要对页面进行CSS处理，如下图所示，给img图片添加样式，注意里面有旋转样式。
5、然后实现旋转的设置，这个是CSS3的新功能，主要是对图片进行旋转度数的设置。
6、最后运行程序，你会看到页面中的圆圈在不停的旋转，和我们平常看到的加载中的效果很像。
一个是媒体查询，但是这个只能判断尺寸，并不能判断是不是移动设备。
再用就是使用js控制
/*** 判断是够是pc设备
*/
function IsPC() {
var userAgentInfo = navigator.userAgent
var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone", "iPod"]
var flag = true
for (var v = 0 v < Agents.length v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false
break
}
}
if(window.screen.width>=768){
flag = true
}
return flag
}
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<head>标签中，输入meta代码：<meta name="viewport" content="width=device-width, initial-scale=1">。
3、浏览器运行index.html页面，此时PC端的网页在移动端上也能自动适配。
