自适应css布局——流动布局新时代[译]
作者：dishuipiaoxiang 来源：蓝色理想 发布时间：2009-08-13 12:28:00
流动网页设计有很多好处，但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小屏幕抑、ＰＤＡ小屏幕上都能得到良好的呈现。但是，糟糕的代码结构，对于流动布局来说将是灾难性的。因此，我们需要针对大多数流动设计的缺点寻求可行的解决方案。
如果你作为设计师通过额外的付出创造了一个功能性流动布局，为什么不更进一步使其兼容所有分辨率，而不是局限于大多数屏幕。你可以使用一些技巧创造一种意想不到的适应性布局，这种布局在不断改变屏幕分辨率情况下会保持功能上的完整性。
在这篇文章，我们将讨论创造100％功能自适应css布局的行之有效的方法，并提供其他教程和实践的详细清单：
你也参考以前的文章：
固定&流动&弹性布局：哪一个适合你？
这篇文章讨论每一种布局类型的优点和缺点。其中的任何一个可以用来创造一个成功的网站布局，只要保持其可用性就行；灵活布局：未来的挑战
讨论灵活布局在未来的挑战；屏幕分辨率和更好的用户体验
介绍屏幕分辨率的问题，然后普通用户的个人脚本。
一、使用网格的流动布局
我们大多数人都听说过设计固定宽度网页的 960网格系统 ，使用960网格系统使得固定宽度的设计比流动布局更可取。但是，有一种方法可以创建一个基于网格的弹性布局。从技术上讲，弹性布局的代码结构不同于流动布局，但它为用户提供的几乎是相同的效果。
什么是流动布局？
流动网格是通过智能的使用div、百分比和简单的数学计算来创建的。这种理念来自于Ethan Marcotte ，他认识到“em”比字体大小进步。我们在这重温这个基本概念，但要对该方法有一个全面而详细的了解，请参阅“流动网格”，这是一篇全面的关于建立基于网格的弹性布局的教程。
其理念是使用相对尺寸、结合百分比和em，用简单的分割以找到相对应的像素宽度，而这些宽度是在固定宽度设计中使用的。
优点：
这种方法使你拥有一个网格布局，这看起来可能仅固定一次宽度；
用户可以使用预设的字体大小查看这个布局，并且保持其比例大小；
布局样式跨浏览器兼容；
一旦理解之后，流动设计中的大多数问题将容易修复。
0
投稿猜你喜欢
下面要学的是列表：任务1、“千年虫”我来了函数enumerateenumerate() 函数用于将一- MySQL 5.7.18免安装版安装教程MySQL是世界上目前最流行的开源数据库。许多大厂的核心存储往往都是MySQL。要安装MySQL,可
- 记得有一期ucdchina书友会里面，聊过一次大家的工作习惯问题，现在回想起来很有意思，特整理这篇文章分享给大家。关于photoshop1
- 前言：WebDriver提供了两个关闭浏览器的方法，一个是前边使用quit()方法，另一个是close()方法close()：关闭当前窗口q
- MySQL报错：错误代码： 1293 Incorrect table definition; there can be only one T
- 小程序中英文混合排序问题在开发一个手机联系人列表的功能时，遇到需求是需要将联系人列表按照拼音顺序排序。而联系人列表是会出现中英文混合的情况。
- Oracle客户端精简后的文件，可以实现数据库的通信，直接和软件打包： 第一步：拷贝文件：主要是四个目录：bin，nls，oracore，N
- 本文介绍一种将一个大的文本文件分割成多个小文件的方法方法一：1.读取文章所有的行，并存入列表中2.定义分割成的小文本的行数3.将原文本内容按
- function utf8_substr($str,$len) { for($i=0;$i<$len;$i++) { $temp_st
- 概述：前段时间在跟其他公司DBA交流时谈到了mysql跟PG之间在多表关联查询上的一些区别，相比之下mysql只有一种表连接类型:嵌套循环连
- 简介rpc：远程过程调用协议。简单的来说就是客户端可以很方便得远程调用服务端的接口程序，而不用管底层是如何实现的。XML-RPC的全称是XM
- （一）、前言为什么引入消息队列？1.程序解耦2.提升性能3.降低多业务逻辑复杂度（二）、python操作rabbit mqrabbitmq配
- mysql在5.1之后增加了存储过程的功能, 存储过程运行在mysql内部，语句都已经编译好了，速度比sql更快. 存储过程与mysql相当
- 前言之前看到一个有意思的开源项目，主要是可以将一张照片变成卡通漫画的风格。下面给大家放几张官方给出的部分效果图。看到这个效果图，还是非常经验
- 本文实例为大家分享了JavaScript实现切换多张图片的具体代码，供大家参考，具体内容如下循环切换图片HTML+CSS+JavaScrip
- 1、网络协议TCP / IP 是设备用于在 Internet 和大多数本地网络上进行通信的一组协议。 TCP 更可靠，具有大量错误检查并需要
- 本文实例讲述了Python实现的文本简单可逆加密算法。分享给大家供大家参考，具体如下：其实很简单，就是把一段文本每个字符都通过某种方式改变（
- 在numpy的ndarray类型中，似乎没有直接返回特定索引的方法，我只找到了where函数，但是where函数对于寻找某个特定值对应的索引
- 一、前言说明今天看到微信群里一道六年级数学题，如下图，求阴影部分面积看起来似乎并不是很难，可是博主添加各种辅助线，写各种方法都没出来，不得已
- 1.执行时间 window.onl
