利用CSS实现电脑和手机自适应网页的方法

博客

星期二, 06 2月 2018 22:04

利用CSS实现电脑和手机自适应网页的方法

Written by CNERIS.COM

自适应网页就是针对不同的设备定义不同的CSS样式，让同一个URL网址在不同的设备上都能较好的展示，传统的方式针对电脑用户制作PC版网站，针对手机用户制作移动网站的做法有很大的局限性，而且对网站主来说工作量太大，涉及到两个站使用一个数据库，分别制作两套模板的问题，而自适应网页的设计只需通过CSS来实现。

下面这个是最简单的PC版网站结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body,div,ul,li,h1{margin:0;padding:0;font-size:18px;}
#wrap {width:900px;margin:0 auto;}
#top h1 {height:60px;line-height:60px;color:blue;font-size:20px;}
#nav {background:#518EFD;height:60px;line-height:60px;}
#nav li {
 list-style-type:none;
 float:left;
 width:100px;
 text-align:center;
}
#nav li a {
 text-decoration:none;
 display:inline-block;
 color:#fff;
 font-weight:bold;
}
#main {margin-top:10px;overflow:hidden;}
.content {
 float:left;
 width:600px;height:300px;
 background:#A4D0B0;
}
.side {
 float:right;
 width:290px;height:300px;
 background:#F6A08D;
}
#footer {height:50px;background:#F6D79B;margin-top:10px;}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
  <h1>网站标题 - Good Luck To You</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">软件</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>
<div id="main">
  <div class="content"></div>
  <div class="side"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

浏览这个网页，我们看到它由顶部标题，导航栏，主体内容栏，侧边栏和底部几个部分组成：

但如果在手机上访问，则效果并不好，在手机上并不应该出现侧边栏，而且导航栏最好分两行显示，如下图：

如果修改上面示例中的部分CSS样式，即可实现这样的效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body,div,ul,li,h1{margin:0;padding:0;font-size:18px;}
#wrap {width:100%;margin:0 auto;}
#top h1 {
 height:60px;line-height:60px;
 color:blue;
 font-size:20px;
 text-align:center;
}
#nav {background:#518EFD;height:120px;line-height:60px;}
#nav li {
 list-style-type:none;
 float:left;
 width:25%;
 text-align:center;
}
#nav li a {
 text-decoration:none;
 display:inline-block;
 color:#fff;
 font-weight:bold;
}
#main {margin-top:10px;overflow:hidden;}
.content {height:300px;background:#A4D0B0;}
.side {height:300px;background:#F6A08D;}
#footer {height:50px;background:#F6D79B;margin-top:10px;}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
  <h1>网站标题 - Good Luck To You</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">软件</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>
<div id="main">
  <div class="content"></div>
  <div class="side"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

比较这个手机版和上面PC版的CSS定义，我们发现更改的部分并不多：外面的包裹层改为100%的宽度，将导航栏设置了两行显示并将导航列表项的宽度设置为25%，然后去掉了主体内容和侧边栏的宽度和浮动的定义。

如果我们把PC版的样式表保存为pc.css，将手机版的样式表保存为m.css，则我们可以在同一个网页中针对不同的设备尺寸使用不同的样式表，基本定义方法如下：

<link rel="stylesheet" media="screen and (min-device-width:641px)" href="pc.css" />
<link rel="stylesheet" media="screen and (max-device-width:640px)" href="m.css" />

采用这种方法将两个样式表引入，它表示当设备宽度大于或等于641px的时候使用pc.css这个样式，当设备宽度小于或等于640px的时候采用m.css这个样式。

除了按屏幕宽度分别定义两个样式以外，还可以分别定义多个样式，例如：

<link rel="stylesheet" media="screen and (min-device-width:1000px)" href="pc.css" />
<link rel="stylesheet" media="screen and (min-device-width:601px) and (max-device-width:999px)" href="pad.css" />
<link rel="stylesheet" media="screen and (max-device-width:600px)" href="m.css" />

这里增加了中间的一项定义，它表示当设备宽度介于601px和999px之间时则加载pad.css这个样式。

注意以上我们所使用的min-device-width和max-device-width的最小宽度是针对设备的宽度，并不是浏览器窗口的宽度，例如在电脑上我将浏览器的窗口缩放到较窄的宽度，则网页的样式是不变的，同样的将手机横屏显示的时候，样式也是不变的。

如果想让网页随着浏览器窗口宽度的变化而改变样式的话，只需将min-device-width和max-device-width这两个属性改为min-width和max-width即可，例如：

<link rel="stylesheet" media="screen and (min-width:1000px)" href="pc.css" />
<link rel="stylesheet" media="screen and (min-width:601px) and (max-width:999px)" href="pad.css" />
<link rel="stylesheet" media="screen and (max-width:600px)" href="m.css" />

如果这样定义，假如使用平板电脑访问，很可能横屏的时候会使用pc.css样式，而竖屏的时候会使用pad.css这个样式。使用min-width和max-width，还是min-device-width和max-device-width，各有各的优缺点，这个大家可以根据自己的需要来权衡。

以上我们采用的自适应网页设计的方法是针对不同的宽度选择不同的CSS样式，此外我们还可以在同一个CSS样式表里为不同宽度的设备来分别定义，需要采用的CSS属性是：

@media screen and (min-device-width:1000px) 这表示当设备宽度大于1000px时，当然这里的min-device-width也可以换成min-width，则表示当浏览器窗口宽度大于1000px时。

@media screen and (min-width:601px) and (max-width:999px) 这表示当浏览器窗口宽度在601px和999px之间时。

@media screen and (max-width:600px) 这表示当浏览器窗口宽度小于600px时。

用这个属性定义样式的时候，是将属性值一起写入大括号内，例如：

@media screen and (min-width:601px) { #wrap {width:100%;margin:0 auto;} }

也就是说我们看到这里大括号的内部又嵌套了大括号，大家书写的时候一定要注意别搞乱了。

我们平时设计自适应网页的时候可以先以其中一个样式为主要样式或公共样式，在@media screen中只需定义有区别的样式就可以了，下面我们针对前文所举的例子来试试：

我们以PC版的样式为公共样式，下面针对手机版再追加一些样式，这里我将浏览器宽度小于或等于640px的时候定义为手机版：

@media screen and (max-width:640px) {
#wrap {width:100%;}
      /*--手机版外层宽度为100%全屏--*/
#top h1 {text-align:center;}
      /*--手机版网站标题居中显示--*/
#nav {height:120px;}
      /*--手机版导航分两行显示--*/
#nav li {width:25%;}
      /*--手机版每个导航列表项宽度为1/4--*/
.content {float:none;width:100%;}
.side {float:none;width:100%;}
      /*--去掉这两个区块的浮动属性，将宽度设置为100%--*/
}

这样的话，当我们将浏览器的窗口拖放到宽度在640px以内的时候，网页就会加载追加的样式了，大家可以试一试。

对于手机浏览器来说，可能它浏览器的分辨率与实际物理分辨率有差别，一般为了更好的展示，我们需要在自定应的网页头部加入以下标签：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

这是针对浏览器缩放所做的处理，它的详细含义是什么，在本站其他的文章里我们再做分析，大家可以试试不加这段标签和加上这段标签后，自适应网页在手机浏览器中的表现效果有什么不同。

因此，上面那个示例的完整代码是：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>测试</title>
<style type="text/css">
body,div,ul,li,h1{margin:0;padding:0;font-size:18px;}
#wrap {width:900px;margin:0 auto;}
#top h1 {height:60px;line-height:60px;color:blue;font-size:20px;}
#nav {background:#518EFD;height:60px;line-height:60px;}
#nav li {list-style-type:none;float:left;width:100px;text-align:center;}
#nav li a {text-decoration:none;display:inline-block;color:#fff;font-weight:bold;}
#main {margin-top:10px;overflow:hidden;}
.content {float:left;width:600px;height:300px;background:#A4D0B0;}
.side {float:right;width:290px;height:300px;background:#F6A08D;}
#footer {height:50px;background:#F6D79B;margin-top:10px;}
@media screen and (max-width:600px) {
#wrap {width:100%;}
      /*--手机版外层宽度为100%全屏--*/
#top h1 {text-align:center;}
      /*--手机版网站标题居中显示--*/
#nav {height:120px;}
      /*--手机版导航分两行显示--*/
#nav li {width:25%;}
      /*--手机版每个导航列表项宽度为1/4--*/
.content {float:none;width:100%;}
.side {float:none;width:100%;}
      /*--去掉这两个区块的浮动属性，将宽度设置为100%--*/
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
  <h1>网站标题 - Good Luck To You</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">软件</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>
<div id="main">
  <div class="content"></div>
  <div class="side"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>