简单的自适应网站开发兼容手机和PC

admin 发布时间:2016-02-22 分类:随笔 阅读:889次 3 条评论

之前一直没时间开发博客的手机网站,最近也花了一点时间学CSS3自适应相关文章,所以准备开发博客的手机自适应版本,花了半天时间将博客改了一下。期间也碰到了许多的问题,所以将这个手机博客的自适应开发过程写下来。

在PC上和手机上打开www.songker.com的效果不一样,可以用Chrome PC版的F12体验下各个手机下的网站显示。

我首先在首页添加了一个style样式文件,样式文件的路径http://songker.com/zb_users/theme/Songker/style/mobile.css。

大致的改写是,在手机浏览器下,将PC网站上多余的模块隐藏。如右侧的热门标签,热门文章等模块和顶部的LOGO和搜索框等直接隐藏,将左侧的文章列表宽度扩展到100%,顶部添加一个菜单按钮,点击时候展示网站的分类等...

PC网站还是手机网站应用不同的样式,可以用CSS3的@media特性来区分。

CSS3 Media Queries的简单用法:

max-width

.class的样式会在可视区域的宽度小于 600px 的时候被应用。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

或者链接一个单独的样式表,可以用下面这种写法:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css" />

mix-width

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

混合使用

在可视区域的宽度在 600px 和 900px 之间的时候被应用

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #666;
  }
}

我刚开始的写法为:

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="mobile.css" />

这种在Android高分辨率上某些浏览器下会出现问题(说的就是你UC浏览器),会依旧识别为PC网站。

改写方法:

<link rel="stylesheet" media="only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5)" href="mobile.css" />

上面代码的意思是,在设备像素比大于1的时候显示为手机网站(PC浏览器的device-pixel-ratio都是为1)。

已有3条留言

发表评论:

◎欢迎您的参与讨论。