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


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

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

  水平有限,欢迎讨论。

  其实窄屏和宽屏的切换实现原理又很简单,就是设计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,网页换肤,网站皮肤切换,网站换肤,网站换皮肤



相关阅读:
纯css完美解决图片在div内垂直水平居中
用vbs列出机器上所有能调用的组件
设置DropDownList的当前选项
方便实用的PHP生成静态页面类(非smarty)
DLL+ ActiveX控件+WEB页面调用例子
关于undotbs1表空间损坏解决办法
SQL Server的通用分页存储过程 未使用游标,速度更快!
世界杯猜想活动的各类榜单的SQL语句小结
模拟用户操作Input元素,不会触发相应事件
Windows Server 2008服务器系统数据安全
PHP3 safe_mode 失效漏洞
监视并记录Apache网站服务器的运行
ASP.NET MVC框架内置AJAX支持编程技术
asp 实现对SQL注入危险字符进行重编码处理的函数
快速导航

Copyright © 2016 phpStudy |