Welcome, Old Sport!

手机浏览提示CSS

by ilikecss ON 2012/05/10 7390

最近在做一个只支持手机浏览的网页,当然是使用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;
	}
}
12条评论
  1. #1

    Marvin说道:

    奇怪,480宽度上什么都没有,小于480的宽度倒是有,但是图片明显应该是480宽度的。再大的宽度就是显示那几个字了~
    我chrome测试的,用的responsive design test~

  2. #2

    外汇交易说道:

    专业知识,专业文章

  3. #3

    zwwooooo说道:

    还没接触手机类。。。这css好

  4. #4

    Q_Queenie说道:

    收藏了
    做为学习的教材。
    辛苦楼主




TOP