网站实现合理布局的常见方式有哪些

在网站中流畅的布局有多种不同解决方案，要了解灵活布局是否适合项目，评估每种方法的优点和缺点，才有机会进行布局选择。目前有几种不同的布局类型，固定宽度布局，流体布局，弹性布局。

  1、固定宽度布局

    在固定宽度布局中，站点的宽度达到一定数量的像素，选择的度量是960像素。随着时间的推移，960像素是网格布局的最佳尺寸，960像素很容易被3，4，5，6，8，10，12整除。

    固定宽度布局也是网络中常用的布局，布局提供了稳定感和控制感，可以创建图形，对结果进行精确的控制。固定宽度布局有一些缺点，想要创建固定宽度必须记住，每个方面都必须可用，对于大屏幕，浏览器和设备清晰可见，目前市场上各种各样的设备，以及屏幕尺寸的变化创建一个适合的任务非常比较难。

    固定宽度网站是非常常见的，网站无法完全显示，会有水平滚动条。当屏幕尺寸大于960像素时，也会出现问题，网站布局被大量的空白空间所包围，显然这肯定不是理想的解决方案。

    2、流体布局

    流体布局基本区别是尺寸的测量，固定宽度布局以像素为单位进行测量，但对于流体或流体布局，尺寸以百分比定义，提供了更大的延展性和流动性。通过设置百分比，可以为每种情况找到合理的解决方案，设计尺寸将适应所用设备的大小。流体布局与媒体查询用于优化特殊样式，基于百分比的宽度适应各种显示尺寸的设计。

    3、弹性布局

弹性布局有点类似于流体布局，主要区别在于尺寸的测量单位，弹性布局的尺寸既不是像素也不是百分比，它以ems衡量。EM是大小中的定义的等效字体大小CSS规则，如果使用20像素的字体大小设置文本样式，则1em将等于20像素，2ems对应40px，依此类推。这种布局提供了强大的排版控制，由于绝布局主要采用文本填充，精确性使弹性布局成为许多项目首选。使用这种类型的解决方案，也会存在不美观的水平滚动条。

     function showModelDialog(page,width,height){

var re= window.showModalDialog(page,null,'dialogWidth:'+width+'mm;dialogHeight:'+height+'mm;edge:Raised;center:yes;help:no;resizable:no;status:no;scroll:no')

if(re==1){

window.location.reload();

}

}

    4、容器布局

结合了多个布局的特征，可为页面的某些元素分配固定大小，布局制定了信息架构，绘制出布局，根据流程制定的信息架构，勾勒出网页上所需的区域，放置徽标，导航，主要内容，侧栏，每个网页都有一个容器，具有居中对齐的div标签来设置容器，这样无论用户具有什么分辨率，网站的内容总是位于屏幕的中间。容器保存页面上的所有元素，阻止超出浏览器窗口的范围并进入空白区域，可以将此容器的宽度设置为流体，会扩展以填充浏览器窗口的宽度，无论窗口大小是多少，内容都是相同的宽度。

    如今在网站上创建分块的布局，通过使用布局，可以避免在设计时出现的问题，此对于特定项目，布局中需要适合响应式方法，每种布局类型都有其优点和缺点，取决于想要实现的需求和个人项目的特点。这些布局中应可以结合使用的技术，例如体查询将，精确的宽度为手机屏幕尺寸提供显示。可以添加背景颜色，解使用网格项，媒体查询应用为屏幕大小定义的样式，可用网格定义两列并将块移动到所需位置。

   以不同的屏幕尺寸和分辨率设计为标准，是一种相对较新的方法，往往采用更全面的设计方法，客户的整体需求，而不是个别网站。