针对移动设备的CSS3布局
针对移动设备的CSS3布局
⼀些专业⼈⼠预测五年内移动设备将击败普通电脑成为⽹页浏览领域的霸主，不管这个预⾔是否应验，让⽹页在移动设备上较好的显⽰已经成为⽹页设计师和开发者的重要任务，本教程学习⽤CSS3的⼀些技术来让⽹页布局适应移动设备。
1、思考
在编写适应移动设备的布局前有⼏个问题值得思考。
移动互联⽹浏览
1. 限制HTTP请求:3G信号传输费⽤昂贵，可能的话也要限制图像显⽰。
2. 不同的屏幕尺⼨: 移动设备屏幕尺⼨宽度⼀般来说从320到480不等，但是也会因为设备的不同有很⼤差异，所以在CSS⾥⾯预先设定
宽度并⾮明智之举。
3. 优化某⼀类别: 市⾯上有很多种移动设备以及操作系统、浏览器等，所以优先测试你的访问者⽤得⽐较多的设备，现在智能⼿机⼀般是
iPhone、iPad、⿊莓、⾕歌Android、塞班Symbian、window等，要根据区域内情况有重点地选择测试。
4. 禁⽤悬停（Hover）: 触摸屏并不能很好地⽀持hover，所以做菜单时，最好不要使⽤下拉菜单等形式，hover在移动设备上⼀般来说只
能⽤于增加视觉的效果（⽐如更改颜⾊）。
css去掉滚动条浏览器⽀持（桌⾯平台）
其次，记住要跨浏览器⽀持，谚语有云“房间⾥的⼤象（译者注：英⽂谚语，指显⽽易见⽽⼜被忽略的事实）指的就是IE。幸运的是，现在发现，只要不会影响到内容，⽹站在不同浏览器的显⽰不⼀定要完全相同。通常来说⼀个⽆法⽀持CSS3的浏览器也能提供尚可接受的浏览体验。总⽽⾔之，要提前知道⽹页在各种浏览器上的显⽰效果。
2、HTML
Body部分
不仅应该知道如何编写合法的html，⽽且要尽可能地简洁。保持html的流畅、去掉不必要的Div⼀直都是不错的习惯，在移动设备浏览上，这点显得更为重要。⽽且，以往⼀些需要7个嵌套Div标记的效果，现在通过CSS3的少量代码就能实现。
尽管这不是html5教程，但是我依然坚持Xhtm的严格语法。以下是⼀个典型布局的html，这是⼀个包含头部、底部、侧边栏、主内容的页⾯。你可以看到，这个页⾯相当简单明了，如果采⽤html5的元素，能够更加的简洁。
01
02
03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27<body>
<div class='pg'>
<div class='head'>
<h1><a href='#'>My Blog</a></h1>
</div>
<div class='pg-main'>
<div class='entries'>
<h2><a href='#'>An Entry About Something</a></h2>
<p class='preview'>段落⽂字⼀前⾔</p>
<p>段落⽂字⼀</p>
<hr/>
<h2><a href='#'>An Entry About Something Else</a></h2> <p class='preview'>段落⽂字⼆前⾔</p>
<p>段落⽂字⼆</p>
<hr/>
<h2><a href='#'>A Third Entry</a></h2>
<p class='preview'>段落⽂字三前⾔</p>
<p>段落⽂字三</p>
</div>
<div class='sidebar'>
<h2class='not-there'>Blog Menu</h2>
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 <h2class='not-there'>Blog Menu</h2> <h3class='subscribe'>Subscribe</h3> <ul class='subscribe'>
<li><a href='#'>RSS</a></li>
</ul>
<h3>Social</h3>
<ul>
<li><a href='#'>Facebook</a></li> <li><a href='#'>Twitter</a></li>
</ul>
<h3>Categories</h3>
<ul>
<li><a href='#'>Something</a></li> <li><a href='#'>Nothing</a></li>
<li><a href='#'>All Things</a></li> <li><a href='#'>No Things</a></li> </ul>
<h3>Archives</h3>
<ul>
<li><a href='#'>June 2010</a></li> <li><a href='#'>May 2010</a></li> <li><a href='#'>April 2010</a></li> <li><a href='#'>March 2010</a></li> </ul>
</div>
</div>
<div class='foot'>
<p>© No one in particular 2010</p>
</div>
</div>
</body>;
Meta标记：Viewport
在head部分，⼀般会放置例如CSS样式表、语⾔、标题等等，但是为了平滑移动设备浏览器效果，还需要⽽外增加⼀个Viewport，参考代码如下：
1<meta name="viewport"content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
这是苹果公司建议的，⽤于帮助iPhone渲染页⾯，这个标记会⾃动匹配页⾯和浏览器窗⼝并防⽌缩放，⼀些其他的移动浏览器也⽀持，如⿊莓。测试发现，这个标记并不会影响到桌⾯平台浏览器的效果，所以建议放置在head⾥⾯。
思考布局
这个教程会将以上的html分成两个布局，⼀个布局⽤来适应移动平台，⼀个⽤来适应桌⾯平台。在实践中，通常要根据⽬标的不同，分开弄⼏个布局，这⾥为了简化教程，只分为两个。
3、针对移动平台
本教程的⽬的不在于富⽂本技术或者页⾯设计，所以，呈现的效果会⽐较简陋，不过这并不重要，重要的是驾驭样式表的思路。⼀切的要点在于优先考虑移动平台的布局，因为⼀个在移动平台上显⽰正常的布局很可能也能适应桌⾯平台。所以要先从移动平台的布局弄起，这能够确保在移动平台统治的趋势下，你的⽹站不会丢失听众。
CSS参考
先思考⼀下，要避免出现很长的滚动条，所以修改⼀下博客的菜单，让⽤户体验更好。
1
2 3 4 5 6 7 8 9.sidebar ul{
border-left:solid1px#ccc; padding:0005px;
}
.sidebar ul li{
display:inline;
padding:05px00px;
border-right:solid1px#ccc; }
这样菜单就变成横排的，每个⽬录中间有⼀条分割线，⼲净整洁。在移动设备上，保持菜单在屏幕底部是⾮常有⽤的，假如浏览完⼀篇⽂章，菜单不在底部的话，还要再滚动回菜单的地⽅，这样就很不⽅便，在⼀些设备上，滚动窗⼝可能会相对⿇烦得多。当然这个⽅式有利有
弊。
其次将RSS订阅移动到顶部区域。01
02 03 04 05 06 07 08 09 10 11 12 13h3.subscribe{
display:none;
}
.sidebar ul.subscribe{ position:absolute;
top:25px;
right:10px;
border:none;
color:#fff;
}
.sidebar ul.subscribe li{ border:none;
}
除此之外，就是调整⼀些字体的⼤⼩，超链接的颜⾊等，此教程还包含⼀个CSS Reset，完整的CSS可以在源码上到。因此，其实如果站在移动设备优先的⾓度上思考的话，布局的时候也没什么特别之处。
4、针对桌⾯平台
介绍：媒介查询Media Query
通过CSS3的媒介查询，跨设备的问题能够较好地解决。媒介查询可以根据若⼲个条件（⽐如屏幕尺⼨），使页⾯对移动设备进⾏匹配，
先看⼀下下⾯的代码：
1 2 3 4.pg{</span>
<pre> width:800px; margin:0auto;
}
在这个例⼦中，宽度是800px，但是这样必须确保所有⽤户的浏览器窗⼝宽度都是⾄少800px，否则就会出现⽔平滚动条。所以将这条代码放置在媒介查询⾥⾯，代码如下：
1 2 3 4 5 6@media all and (min-width:800px){</span> <pre> .pg{
width:800px;
margin:0auto;
}
}
这样事情变得很简单，代码中“all”意味着这个style可⽤于所有的媒介，还有其他选项，⽐如“print”则适⽤于打印机
操作：覆盖”之前的样式
有⼀个重要的地⽅需要注意的是，保留原来布局样式的代码，将新布局的样式代码放置在媒介查询中，这样⼀些不⽀持CSS3媒介查询的浏览器就可以调⽤之前的布局，同时桌⾯平台上⼀些较⽼的浏览器的显⽰也不会有什么⼤问题。
以下例⼦，在新布局中，我们将侧边栏从底部移开，并让list的部分以列表的形式显⽰。代码如下：
01
02
03 04 05 06 07 08 09 10 11 12 13 14 15@media all and (min-width:800px){ .sidebar ul{
border:none;
padding:0;
}
.sidebar ul li{
display:block;
padding:0;
border:none;
}
h3.subscribe{
display:block;
}
.
sidebar ul.subscribe{
position:static;
top:auto;
16 17 18 19 20 21 22 23 24 right:auto;
border:inherit;
color:inherit;
}
.sidebar ul.subscribe li{ border:inherit;
}
}
这样就吧侧边栏推到左边（结合css其他代码，请参阅源⽂件），并把RSS订阅放回到适⽤于桌⾯浏览器显⽰的地⽅。你可以⽤不同平台浏览器打开源⽂件，并⽔平缩放，进⾏测试。
也许有⼈会疑惑为什么是800px，800px是否有什么特殊之处？事实上，我认为这有点宽。在新发布的windows7上有⼀个屏幕边缘捕捉的功能（译者注：就是把窗⼝拉到两边，会把窗⼝的缩放成屏幕的⼀半，拉到顶上会最⼤化），如果把为桌⾯平台显⽰的⽹站宽度设成600px，这样⼀个在 1280px宽的屏幕下，捕捉到边缘时不需要调整窗⼝⼤⼩就能正常显⽰布局。当然这只是⼀个例⼦⽽已，只是要清楚800px并不意味着什么特殊值，⼀切都要根据⾃⼰的需要去思考。
5、可替代的⽅法
⽅法不⽌⼀种，本⽂展⽰了媒介查询这种实⽤⽅法以及⼀些只基于CSS的移动平台⽹站布局的办法。还有以下的⽅法可以联合使⽤，打造移动平台的⽹站布局。
多个模板: 制作不同的模板，然后主题系统检测⽤户浏览器，根据不同浏览器显⽰不同的主题。这通常是也可以通过制作⼏个不同的CSS⽂件来实现。
⼦域名: m., mobile., 和 .mobi有成为标准的趋势, 不同⼦域名有不同内容，在避免内容重复上，和多个模板的技术差不多。
可变的布局: ⽹站也能够设计成完全可变布局，⽆论浏览器窗⼝的⼤⼩，内容会⾃动适应。事实上，在这个教程⾥，适⽤于移动平台的样式表，就是可变的布局，使⽤媒介查询的⽅式好处在于可以复制背景并降低HTTP请求。
处理移动互联⽹浏览的⽅式很多，最终可能是多种⽅式联合使⽤。⽆论是是使⽤媒介查询或者⼦域名转向的⽅式，要点在于提前对移动平台的布局进⾏规划。
原⽂链接：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论