网页页面适应不同客户端浏览器和分辨率

上回 说到“大屏幕浏览页面的良好体验,本就应该用户自己调整窗口。”

根据屏幕不同大小,缩小窗口出横向滚动条在所难免,但理想情况下,页面应该能适应不同客户端浏览器和分辨率。实际操作通常又有三种情况:版面自适应、视觉自适应、内容自适应。

在windows系统任务栏空白处单击右键,有如下图的菜单,分别提供有“横向平铺窗口、纵向平铺窗口”的功能,根据激活窗口个数按需切分屏幕。如果没记错的话,自win2000就已经用了,更早没试过。虽然那会我们用的显示器大些才17′,但在多窗口工作时确实方便。

版面上自适应

Information Architects Japan在06年提出 web设计95%是排版 的观点,如果精确理解,指呈现部分信息架构之下“信息设计”的范畴,俗称排版。因为我们都了解广义上的web design不仅要看还得有动,其实有个很大的 知识框架 做支撑。

web排版相较平面的优势在于数据灵活性,理论上可以实现只维护单个页面,然后通过web技术来实现多种排版表现。在实践中获取点滴信息设计基础之后再来看这个问题,感触颇深。

现实网站中,越重要的页面模块越多,排版难度也就越大。比如门户网站首页,我很少看到自适应的,大概是雅虎网站改版开了先河。分别使用narrow layout和wide layout两种模式,适应800和1024px分辨率,根据客户端请求分析再输出,即在自定义基础上实现了自适应。

时间: 2024-09-16 06:31:05

网页页面适应不同客户端浏览器和分辨率的相关文章

http访问-人为编码实现网页页面内容的抓取与浏览器访问页面的区分点有哪些?

问题描述 人为编码实现网页页面内容的抓取与浏览器访问页面的区分点有哪些? 请问大神们用浏览器访问页面与编码实现请求访问来获取内容有什么区分点吗?都是HTTP协议的情况下,希望大家能给分享下经验,谢谢! 解决方案 是说爬虫吗?开发爬虫可以去神箭手云爬虫看看.很不错的爬虫云开发平台

开发人员应该对IIS理论层的知识了解的多一些~第三讲 网页从IIS端到客户端浏览器经历的阶段

你有没有想过,当用户打开浏览器,输入网址,回车,然后浏览器上就会出现网站的内容,在这个过程中,是怎么的一个过程呢! 当请求一个*.aspx,*.html,*.jpg文件的时候,这个请求会被inetinfo.exe进程截获,它判断文件的后缀为aspx之后,将这个请求转交给ASPNET_ISAPI.dll,ASPNET_ISAPI.dll会通过(Http PipeLine将请求发送给ASPNET_WP.exe进程,在ASPNET_WP.exe进程中通过HttpRuntime来处理这个请求,处理完毕将

asp.net获取客户端浏览器及主机信息

原文:asp.net获取客户端浏览器及主机信息 在线预览效果:http://tool.hovertree.com/info/client/ 其中aspx页面的控件代码: <asp:ListBox runat="server" ID="lbHoverTreeInfo" ClientIDMode="Static"> </asp:ListBox> 以下是实现代码: 1 using System; 2 using System.W

Html网页页面head区规范知识

规范|网页|页面 head区是指首页HTML代码的<head>和</head>之间的内容. 必须加入的标签 1.公司版权注释 <!--- The site is designed bywebjx.com 06/2006 ---> 2.网页显示字符集 简体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"> 繁体中文:<MET

使用HTML制作网页必知:网页页面head区规范

规范|网页|页面 head区是指首页HTML代码的<head>和</head>之间的内容. 必须加入的标签 1.公司版权注释 <!--- The site is designed by webjx.com 06/2006 ---> 2.网页显示字符集 简体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"> 繁体中文:<ME

Javascript在网页页面加载时的执行顺序

javascript|加载|网页|页面|执行 一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属性制定外部的js文件 放在事件处理程序中,比如:<p >点击我</p> 作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="javascript:alert('我是由javascript

实例:同一个网页页面多个id选择符的释义

网页|页面 我们在样式表定义一个样式的时候,可以定义id选择符也可以定义class符.例如: ID方法:#test{color:#333333},在页面中调用<div id="test">内容<div> CLASS方法:.test{color:#333333},在页面中调用<div class="test">内容<div> id一个页面只可以使用一次,class可以多次引用.id和class好象没什么区别,我在页面中用

网页标准学习之详细讲解CSS网页页面布局

css|标准|网页|页面 用CSS 来布局很容易.如果你已经习惯用表格布局的话,起先会感觉比较困难.其实不难,只不过动机不同,并且在实践中更有意义. 你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块.你可以绝对或相对地用彼块取代此块. 定位 定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定). static值是元素的默认值,它会按照普通顺序生成,就如它们在HTML的出现一般. relativ

如何测试网页在不同移动设备的各种分辨率下的显示效果?

问题描述 如何测试网页在不同移动设备的各种分辨率下的显示效果? 我想开发在便于移动设备浏览的网页.由于移动设备种类多,分辨率也各不相同.这给调试带来了困难,大家是如何解决这个问题的? 解决方案 感谢 Hooopo 的回答,Chrome很好用,我发现Opera也有类似功能,下面的是我在Opera Mobile 模拟器下的效果: 更多效果请看:http://www.opera.com/developer/tools/mobile/ 解决方案二: Chrome浏览器的调试工具很不错,可以指定User