1、首先准备一个HTML结构的文档,页面可以制作的简单点。
2、然后在页面的body区域中放置一个img图片。
3、我们先来运行一下页面,你会在页面中看到如下图所示的圆圈。
4、接下来我们就需要对页面进行CSS处理,如下图所示,给img图片添加样式,注意里面有旋转样式。
5、然后实现旋转的设置,这个是CSS3的新功能,主要是对图片进行旋转度数的设置。
6、最后运行程序,你会看到页面中的圆圈在不停的旋转,和我们平常看到的加载中的效果很像。
看上图我们可以知道目前分辨率的使用情况,
移动设备的分辨率高度最大不超过763 , 宽度最大不超过 640,
然后我们这样写基本上就可以判断是移动设备 包括平板的,因为PC最小分辨率好像是800*600
@media screen and (max-device-width:641px) and (max-device-height:764px){ ... }
CSS3可以根据分辨率来识别设备类型,然后写相应的CSS代码:
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) { }
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) { }
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) { }
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) { }
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) { }
其中电脑版css不用注释,手机浏览器访问会自动识别!
亲亲动漫网77dm.us为您提供
html是无法检测,一般是用js、asp、php、.net或其他编程语言去检测http头信息或取得屏幕大小来判断。
百度:判断客户端