手机浏览提示CSS
最近在做一个只支持手机浏览的网页，当然是使用HTML5/CSS3了，给此网页添加一条提示，要求只有在手机浏览器尺寸才可以看到内容，技巧很简单只需要添加2段CSS就可以了，以下代码是以480PX为基准调试的。文章最后有DEMO可以查看，如果你是使用PC/MAC浏览，请调节你窗口尺寸到480PX。
Step1. HTML
<body>
<p class="attention">哈哈，看不到吧～把窗口拉小点试试！</p>
<div class="wrapper mobile">Step2. CSS
@media screen and (min-width: 480px){
.mobile{
display:none;
}
}
@media screen and (max-width: 480px){
.attention{
display:none;
}
}
#1
奇怪，480宽度上什么都没有，小于480的宽度倒是有，但是图片明显应该是480宽度的。再大的宽度就是显示那几个字了~
我chrome测试的，用的responsive design test~
你窗口算的那么准？
是自动的，responsive design test自动生成的几个预览～
http://www.douban.com/photos/photo/1543551414/
这里是截图。是我的浏览器的原因么？我是了linux和windows，都是这样，我用的chrome。
我测试过了，我这边是正常显示的，320/480都有显示。Win7,Chrome浏览器
我调整了下右上的Width only和Device sizes后就会出现。然后我把这个提示信息注释掉，就完美实现了。
我估计是这个测试网页不太支持这个尺寸信息提示，我们公司在手机专用测试平台完全兼容的。
哦，原来如此~
#2
专业知识，专业文章
您太过奖了，这里看客高手太多
#3
还没接触手机类。。。这css好
大叔也快点跟进了～
#4
收藏了
做为学习的教材。
辛苦楼主