自适应css布局——流动布局新时代[译]（3）
作者：dishuipiaoxiang 来源：蓝色理想 发布时间：2009-08-13 12:28:00
标签：自适应,布局,css
二、自适应内容
该流动设计另外一个常见问题是：尽管它们适应很多分辨率的屏幕，但如果分辨率太小（如手机或PDA）或超大，看上去就有点滑稽了。在分辨率为240的PDA屏幕上一个三栏布局看起来非常混乱。
为了解决这个问题，我们可以使用一项技巧使内容自适应特定范围的分辨率屏幕。幸运的是，我们可以利用上面的技术来保持我们的比例，然后增加该项技术以得到更好的可用性。
自适应内容流动布局
大多数流动布局在分辨率为800×600的屏幕中看起来很大很宽－－高达1280px。但是，我们可以稍稍突破一下，针对800px－1024px、1024px－1280px、1280px以上的屏幕定制略微不同的布局。同样，也可为640px－800px、320px－640px、240px－320px、240px以下的屏幕自定义调整。
The Man in Blue曾使用过这样的技巧。
上面的例子有两个单独的样式：一个针对分辨率超过800px的屏幕；一个针对分辨率小于800px的屏幕。
这种技巧用不同风格的布局取更好的适应不同分辨率的屏幕。Marc Van Den Dobblesteen’s layout example, Switchy McLayout 用这些样式提供了一个完美的例子。
优点
设计者可以更精确的看到，在不同分辨率屏幕下，其设计是什么样子；
无论是在什么平台上查看，其更好的遵守了间距和平衡的设计原则；
完美的处理了最小和最大分辨率。
0
投稿猜你喜欢
- * 对子查询和Join进行了优化,包括对MyISAD和InnoB存储引擎分散范围内的批量索引访问。* 增加了 BACKUP DATABASE
- 今天做自定义的404页面，需要垂直水平居中，垂直居中不像水平居中那么简单，呵呵。这种效果会在企业站首页，或一些提示性页面经常用到，今天做了个
- asp分页，是学习使用asp编程经常遇到的问题，也算是一个经典的问题。本文介绍了一个asp分页源代码例子，希望对初学者有所帮助，本程序文件名
- 下面是我已经证实可用的自动备份的方法. 1、打开企业管理器->管理->sql server代理 2、新建一个作业,作业名称随便取
- 基于web的技术中，分页是一个老的不能再老的，但大家津津乐道的问题，随着xml技术的日渐应用，把xml应用到分页当中，也是一种可能，当然网上
- iframe的防插与强插（一）中介绍了“市面上”能见到的两种防御被第三方网站iframe的方法，以及相应的变态突破方法。貌似把“受害人”逼上
一个网站信息结构需要表现给用户看，这样用户才能知道当前是在哪儿，才有可能去猜测某个内容可能会在哪儿。如何表现网站的信息结构给用户呢？用导航。- 本期薯片会的目的是讨论人物角色在设计中如何应用的问题。围绕了以下几个问题开展了讨论：1、 角色能干什么？2、 包含哪
- 所谓产品其实最终展现在用户面前的只是界面而已，所谓界面绝大多数时候只包括两个部分：图片、文字。重视界面上的每一个像素和每一个文字是UED的基
- 虽然现在IE还是主导了整个浏览器的天下，但IE靠的并非是产品设计上的优势，而是依靠windows的力量，因为绝大多数的初级网民认为IE的产品
- 很多人一直都有个想法，要是可以随心所欲的操作iframe就好了。这样静态页面也就有了相当于后台动态页面php,jsp,asp中include
- 这句代码在IE9之前曾被称为世界上最短的IE判定代码。代码虽短但确包含了不少javascript基础知识在里面。var ie&nb
- 前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章，它详细介绍了CSS3的新特性和它的使用方法，它包括:浏览器专
- 新上的一台服务器出现了一个现象：ASP程序中，调用函数Now()，显示的时间总是形如“2009-07-12 上午 08:12:56”这样的，
- 以前的Dreamweaver中是没有图片处理功能的，即使你要处理也只能使用CSS中的相关滤镜进行一些效
- 随着网页技术的发展，网络视觉设计与之前以程序员为主导的审美特征相比，具有了极大的改观。同时，随着美术、音乐、舞蹈人才的加入，网络开始在这一社
- 主要代码如下： total = application("All
- 下面提供生成XML的Google SiteMap代码[ASP版本]。这个代码是生成全站文件链接的地图：<％Server.S
- rss.asp格式的 下面代码保存为rss.asp 代码如下:<!--#include file="conn.as
- 联合结果集 新建临时工数据表 代码如下:CREATE TABLE T_TempEmployee (FIdCardNumber VARCHAR
