通过引入第二套样式表并对页面HTML进行少量修改，许多在线商店无需创建第二个网页或注册专门的移动域名，即可提供出色的移动购物体验。
随着移动互联网使用率的攀升，在线商家致力于为顾客提供最佳购物体验。因此，许多领先的电子商务网站开始提供专门的移动页面（通常是子域名）或采用响应式移动样式。
在本文“网页设计技巧”中，我将就“是否应构建独立的移动端网站”提出建议，并提供一个快速示例，展示如何通过转换CSS来创建更适应移动设备的当前页面版本。
是否应构建独立的移动网站？
答案因人而异。就我个人而言，我认为移动设备很快就能像笔记本电脑和台式机一样高效渲染网页，因此注册.mobi域名甚至构建独立网站可能会浪费时间。
更好的解决方案可能是重新设计现有网站，使其易于在多平台上呈现。事实上，开发能够轻松在不同平台（移动端、桌面端、RSS等）之间迁移的网站，正是创建CSS的主要原因之一。良好的网站设计应在很大程度上将内容与布局和外观分离。
如果您确实决定为移动客户提供服务的最佳方式是使用专门的移动网站，建议使用子域名而非.mobi域名。例如，URL可以是http://m.yoursite.com，而不是http://yoursite.mobi。
转换示例
正如每个电子商务网站都是独一无二的，为其创建移动友好版本也具有独特性。因此，描述网站转换的最佳方式就是亲自演示一次。
在本期“网页设计技巧”中，我为一家漫画书电子商务商店创建了一个主页用于演示。以下是转换前的完整页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> <head> <title>Practical eCommerce Moblie Commerce CSS Demonstration</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="access"> <a href="">Skip to content</a> <a href="">Skip to search</a> </div><!--end access--> <div id="header"> <a href=""><img src="images/logo.png" alt="Nashvlile Comics" /></a> <div id="searchbox"> <input id="search" class="input-text" type="text" value="" name=""/> <input type="image" alt="Search" src="images/search.png"/> </div><!--end search--> <div id="top-nav"> <ul> <li><a href="">Marvel</a></li> <li><a href="">DC</a></li> <li><a href="">Darkhorse</a></li> <li><a href="">Image</a></li> <li><a href="">Verdigo</a></li> <li><a href="">Minx</a></li> <li><a href="">Zuda</a></li> <li><a href="">Space</a></li> <li><a href="">Pec</a></li> </ul> </div><!--end top-nav--> </div><!--end header--> <div id="content"> <ul> <li id="product1"> <img src="images/ac11.png"> <h3>Action Comics #11</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p> <span id="price">$11,990.00</span> <button class="form-button" onclick="setLocation('')"> <span>Add to Cart</span> </button> </li><!--end product1--> <li id="product2"> <img src="images/ac27.png"> <h3>Action Comics #27</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p> <span id="price">$9,990.00</span> <button class="form-button" onclick="setLocation('')"> <span>Add to Cart</span> </button> </li><!--end product2--> <li id="product3"> <img src="images/ac1.png"> <h3>Action Comics #1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p> <span id="price">$2,102,990.00</span> <button class="form-button" onclick="setLocation('')"> <span>Add to Cart</span> </button> </li><!--end product3--> <li id="product4"> <img src="images/ac2.png"> <h3>Action Comics #2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p> <span id="price">$898,990.00</span> <button class="form-button" onclick="setLocation('')"> <span>Add to Cart</span> </button> </li><!--end product4--> </ul> </div><!--end content--> <div id="footer"> <p>Copyright 2009 Practical eCommerce, AKA Nashvlile Comics, All Rights Reserved</p> <ul> <li><a href="">Marvel</a></li> <li><a href="">DC</a></li> <li><a href="">Darkhorse</a></li> <li><a href="">Image</a></li> <li><a href="">Verdigo</a></li> <li><a href="">Minx</a></li> <li><a href="">Zuda</a></li> <li><a href="">Space</a></li> <li><a href="">Pec</a></li> </ul> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Privacy</a></li> <li><a href="">Customer Service</a></li> </ul> </div><!--end footer--> </div><!--end wrapper--> </body> </html>
以下是用于屏幕显示的样式表：
body {background: url(images/main-background.png) repeat-x; margin-top:0px; font-size:62.5%;} #wrapper {margin:0 auto; width:800px;} #access {position: absolute; top:-500px; margin:0; padding:0;} #header {background: url(images/head-background.png) no-repeat; width:100%; height:256px; overflow:hidden;} #header img {border: none; position: relative; top:162px; left: 235px;} #top-nav {position: relative; top: 73px; left: 210px;} #top-nav li {display: inline; list-style: none; font-size: 1.4em; font-family:Denmark; letter-spacing:1px; font-variant: small-caps; padding-left: 3px;} #top-nav a {color: #676666; text-decoration:none;} #top-nav a:hover {color:#e2232b; text-decoration:overline;} #searchbox {position:relative; top:170px; left: 530px;} #content p {font-size:1.6em;} #content li {float: left; display:inline; list-style:none; width: 45%; text-align:center; margin:5px; padding: 10px; border: #ffffff solid 3px;} #content li:hover {background:#676666; border: #000000 solid 3px;} #content li:hover h3 {color:#f8a043;} #content h3 {font-family:Denmark; font-size: 2.6em;} #price {font-family:Denmark; font-size:2.0em;} button {margin: 5px; padding: 10px 100px; font-family:Denmark; font-size:1.8em;} #footer {clear:both; background: url(images/footer-background.png) no-repeat #000000; margin-top:50px; padding: 120px 10px 200px 220px; text-align:center; font-size:1.4em; font-weight:500;} #footer a {color:#000000; text-decoration: none;} #footer a:hover {text-decoration:overline; font-weight:900;} #footer ul {margin:0px; padding:0px;} #footer li {display:inline; margin: 0px 2px;}
添加专门针对移动端的CSS
转换过程的第一步是添加移动CSS，在HTML中链接到它，并在站点层次结构中增加一个文件（目前仍为空）。在本次演示中，将该文件命名为“handheld.css”：
<link href="handheld.css" rel="stylesheet" type="text/css" media="handheld" />
以页面布局为指南，开始创建您的移动样式
目标是满足万维网联盟（W3C）对移动浏览器的标准，因此在确定使用哪些选择器或属性时，将以CSS Mobile Profile 2.0作为指南。同时尽量将页面宽度保持在205像素，并采取措施限制移动站点的总文件大小。
虽然目标是在CSS中进行大部分更改，但仍需创建几个对移动友好的背景图片。下面是完成的“handheld”CSS文件：
body {background:#ffffff; margin-top:0px; font-size:62.5%;} #wrapper {margin:0 auto; width:205px;} #access {display:none;} #header {background: url(images/m-head-background.png) no-repeat #60605F; width:100%; border-bottom: #f8a043 solid 3px;} #header img {display:none;} #top-nav {text-align:center;} #top-nav ul {margin:0px; padding: 2px 0px;} #top-nav li {display:inline; list-style: none; font-size: 1.2em; font-family:Denmark; font-variant: small-caps; padding-left: 1px;} #top-nav a {color: #000000; text-decoration:none;} #top-nav a:hover {color: #f8a043; text-decoration:overline;} #search {width:120px;} #searchbox {padding:72px 0px 2px 4px;} #content {margin:0px; padding:0px;} #content img {width:100%; padding: 0px;} #content p {font-size:1.2em;} #content ul {margin:0px; padding:0px;} #content li {float:left; display:inline; list-style:none; width:181px; text-align:center; margin:0px; padding: 10px; border: #FFFFFF solid 2px;} #content li:hover {background:#676666; border: #000000 solid 2px;} #content li:hover h3 {color:#f8a053;} #content h3 {font-size:1.6em; font-family:Denmark; margin: 1px 0px;} #price {font-family:Denmark; font-size:1.4em;} button {margin:5px; font-family:Denmark; font-size:1.4em;} #footer {clear:both; color:#FFFFFF; background: #000000; margin-top: 50px; padding: 5px 0px 100px 0px; text-align:center; font-size: 1.2em; font-weight: 500;} #footer a {color:#FFFFFF; text-decoration:none;} #footer a:hover {text-decoration:overline; font-weight:900;} #footer ul {margin:0px; padding:0px;} #footer li {display:inline; margin:0px 2px;} #product2 img {display:none;} #product3 img {display:none;} #product4 img {display:none;}
一个可行的示例
本演示展示了如何使用基本CSS将现有的电子商务网站转换为移动友好型商店。每家商店都会面临不同的挑战和权衡，但优化网站以服务移动端客户是完全可行的。