实现窄屏／宽屏的切换——给宽屏用户超值享受

核心提示：本文示例源代码或素材下载 宽屏液晶显示器越来越多，我们的网页要如何设计才能让花了大价钱的宽屏用户得到超值享受，实现窄屏／宽屏的切换——给宽屏用户超值享受，又能同时坚固到窄屏显示器用户的浏览，实现一种“平稳的进化”？今天我们将来讨论这个问题，不同的样式表中使用不同的颜色，或者背景图片，水平

本文示例源代码或素材下载

宽屏液晶显示器越来越多，我们的网页要如何设计才能让花了大价钱的宽屏用户得到超值享受，又能同时坚固到窄屏显示器用户的浏览，实现一种“平稳的进化”？今天我们将来讨论这个问题。

水平有限，欢迎讨论。

其实窄屏和宽屏的切换实现原理又很简单，就是设计2套CSS，分别给窄屏和宽屏使用。

实现代码也很简单，就是一小段js脚本。

首先给你的引用外部css样式的link加一个id。如：

functionchangeCSS(){
varlinkCSS=document.getElementById("linkCSS");
if(linkCSS.href=="narrowScreen.css")
{
linkCSS.href="wideScreen.css";
}
else{
linkCSS.href="narrowScreen.css";
}

至于什么时候来调用这个函数就由你自己决定了，到底是放个链接，让用户自己切换呢，还是通过脚本控制先得到用户客户端的分辨率然后再自己在winodw.onload中自己切换。这都是老内容，此处就不赘述了。

但是说简单也不简单，窄屏和宽屏的切换看似好像只是width增加一点的事情，但是真正做起来却远非如此。

今天我们只列举其中比较有代表性的——表格的切换。

也许有人会说，都web标准了，为什么好要举表格的例子？闲话一句吧，就算是web标准在怎么进化，table的角色绝对不会退化。如果你只是做做个人网站或者视觉系网站的话，我不多说，如果你要做真正的商业网站的话，表格绝对是要使用的，你只要看看GridView,DataGrid这样的重量级控件产生的前台代码就会知道。此乃闲话，暂且不表。

看似简单的表格，如果要涉及到窄屏，宽屏显示就会衍生出众多表格类型。

第一种：列数很少，宽度较窄，窄宽屏都能完整显示的。如下图的表格类型3。

第二种，列数较多，宽度较大，如果是窄屏，为了不让它乱撑破坏了我们的布局，我们一般会将它放在一个容器内，然后让容器出现滚动条。但是如果切换到宽屏，又能很好的显示，不出现滚动条（这种表格类似是切换时比较难处理的）。如下图的表格类型2

第三种，列数很多，宽度很大，无论窄屏还是宽屏都要用父容器滚动条。如下图的表格类型1。

下图为窄屏时显示。

下图为宽屏时显示：

具体的实现请参照我提供的本示例的源码。都很简单，我在此就不多说了。稍微提两点的就是，1：注意“双边线问题”，2：注意利用CSS的优先级（特殊性），否则实现起来较为繁琐。

本来意味要说很多，但是发现既然把源码都提供了，再说倒是显得很是罗嗦了，倒也省下了很多口舌。

不过最后还是提一下吧。别忘了，用cookie把选择的样式表保持一下，免得让用户切换个页面有把样式状态丢失了。至于html如何使用cookie大家可以参考一下我blog上javascript栏目中提供的一个代码实例。

还有更多—— 其实窄宽屏的切换还有很多值得我们思考的地方，并不仅仅是table的宽度这么简单的事情。还有更多的方向，例如布局：如果是宽屏，我们讲导航栏放到左边，可以用2列甚至3列的布局方式，但是如果是窄屏，我们就将导航栏放到上面去。这样，布局就变成1列或者2列，从而给主内容更多的显示区域。

追加一点：关于换肤。如果你能很好的掌握窄宽屏的切换，你就会发现，网页的换肤的实现难度至少要低2-3个等级。无非就是多建2套css样式表，不同的样式表中使用不同的颜色，或者背景图片。不再赘述。

tag：宽屏,宽屏切换,宽屏窄屏切换,宽屏设计,宽屏页面,宽屏页面设计,屏幕切换,用户体验度,宽屏液晶显示器,切换css,切换样式表,选择样式表,选择css,网页换肤,网站皮肤切换,网站换肤,网站换皮肤