从只是对做网站有些兴趣到一只脚踏入专业的网站设计师的整个过程中，既没上过学也没有被谁系统化的培训过。每次遇到问题就是先自己 Google 找答案，实在找不到了就去 stackoverflow.com 上发帖问人。走过不少弯路，但在过程中也学到很多东西。今天更新博客就是想说一下在建成桌面网站后如果对移动端网页做优化。希望有哪些正在苦苦寻求答案的人能碰到这个帖子，少走些弯路吧。

我发现在做移动页面的时候最常遇到的事情就是有些在桌面显示的内容不希望同时显示在移动端。比方说桌面页面上有一长段介绍用的文字，在移动端不论怎么显示都显得不好看，所以想在移动端有一段精简版的介绍文字，而这段文字又不能显示在桌面端。

那么我们需要做的其实很简单，就是把桌面端的那段文字上加个 class="desktop-only"，在移动端的精简文字上加个 class="mobile-only"。

在你的 CSS 里面对两个 class 分别给出这样的 style：

/*MOBILE CONTENTS*/
@media only screen and (max-width: 600px) {
.mobile-only {
display:block !important;
}

.desktop-only {
display:none !important;
}
}

 

/*DESKTOP CONTENTS*/
@media only screen and (min-width: 601px) {
.mobile-only {
display:none !important;
}

.desktop-only {
display:block !important;
}
}

大概解释一下吧：第一个 @ 后面跟着的是 media only screen and (max-width: 600px)，这就是说在屏幕不大于 600 个像素的情况下使用下面的 CSS。然后就是 class 为 mobile-only 的内容为显示（display:block 是 display 的默认值，这个很重要），而 desktop-only 的 class 为 display:none，也就是不显示。第二个 @ 则相反，min-width: 601px 是屏幕不小于 601 个像素的时候运行以下的 CSS。

如何调试代码插入是否成功呢？你用鼠标手动缩窄浏览器就能看出来了。当你的浏览器窗口小于 600 个像素的时候你会发现页面唰的一下子变样了就代表插入成功了！

有什么问题给我留言哦，我是从没有放弃过大伙儿的。就像我博客之前的介绍一样，“如果说还有爱，我不会离开”。

提前祝大家儿童节快乐。