网页布局方法

众所周知，屏幕的尺寸千差万别。当考虑网页布局时，主要的考虑因素是:

同时，网页布局的设计和实现要综合考虑:

虽然屏幕宽度、高度、长宽比千差万别。而网页的组织主要是基于宽度适配和高度延伸。

当然，也有一些网页需要高度自适应，比如视频网站的全屏播放。

这里主要讨论的是宽度自适应。高适应也可以类似处理，这里就不赘述了。

有三种基本布局:静态布局、丢失布局和灵活布局。

静态布局

静态布局使用像素(px)作为页面设计的单位。在不同的显示宽度下，页面元素大小都是固定的。

流式布局

流式布局将页面宽度设置为百分比。当显示区域改变时，页面布局将按比例改变。

流式布局强调适应屏幕宽度的变化。在实际应用中，往往设置为适应宽度，而高度是不变的。当页面变大时，页面布局会水平加宽。

弹性布局

灵活布局采用rem/em等相对单位，是相对单位，会随着屏幕变化而变化。

柔性布局强调在不同条件下，显示内容除大小不同外，在布局上是一致的。也就是说，柔性布局的宽度和高度会按比例放大。当页面被放大时，整个页面被放大。

假设有两个屏幕尺寸，一个是640px，一个是1080px。640px页面下有大小为64px的元素。

如果是静态布局，在640px屏幕下，元素设置为64px。1080px屏幕下，还是64px。元素的大小不变。

如果是流式布局，页面元素将被设置为640像素屏幕宽度的10%。在1080px屏幕下，10%的长度变成了1080px * 10% = 108px。元素的大小随着屏幕而增加。

如果是弹性布局，假设在640px的屏幕下，设置了1rem = 16px，那么64px就是4rem的大小。在1080px的屏幕下，设置1rem = 27px，4rem的大小就变成了4 * 27 = 108px。元素大小也随着屏幕而增加。

静态布局

静态布局无法响应页面变化，这既是优点也是缺点。

缺点是屏幕变大了会有空白色区域。当屏幕变小时，需要通过滚动条浏览页面内容。

好处是静态页面在任何情况下都可以按照页面的设计来显示，适应性的问题最少，工作量最少。

其实目前很多大型网站都是采用静态布局。正因为适应性广，所以几乎不存在什么适应性问题。任何用户在任何情况下打开一个页面都会显示相同的页面。

虽然屏幕尺寸有很多种，但在一定程度上，屏幕宽度一般都在一个范围内。在应用静态布局时，放弃适应一些市场份额较小的小屏幕显示器是合适的。

流式布局

流式布局多采用宽度适配、固定高度的方式。换句话说，页面这次被水平拉伸或收缩了。

这样做的好处是页面可以适应屏幕的宽度，充分利用屏幕面积，避免大量空白。

缺点是屏幕太宽，页面会变宽，让整个页面显得不协调。当屏幕过窄时，页面会被缩小到很小的尺寸，一些元素的显示会出现问题。

为了避免这个问题，我们实际上应该。通常，将设置最大和最小装配宽度。当屏幕超过最大和最小宽度时，页面将不再适合屏幕。

弹性布局

灵活布局采用宽度和高度同时放大的方法，力求不同屏幕下页面布局一致。

灵活布局兼顾了静态布局和流式布局的优点。一方面可以适应屏幕的变化，另一方面也不会造成页面横向加宽，造成比例不协调，在一定程度上保证了页面布局与原设计的一致。

然而，这也带来了新的问题。放大页面会导致一些元素被拉伸，尤其是图片元素，会导致失真。

因此，灵活布局往往采用与流式布局相同的方式，设置最大和最小响应大小，超过它就不会继续响应。

同时针对图片失真的问题，可以通过上传多个尺寸的图片来解决。不同的屏幕尺寸对应不同的画面。但是也会带来大量的维护工作，需要权衡。

由于静态布局的特点，一般在以下情况下采用静态布局:

流式布局更适合有字体的页面。在流式布局中，虽然文本大小不会改变，但文本段落可以通过更改换行符来改变宽度。

如果屏幕尺寸变化不大，可以考虑采用灵活布局。它可以在不改变页面布局的情况下进行调整。

事实上，有些页面采用了几种不同的布局。比如采用静态布局的侧边栏，而采用流式布局的主区域。

上面也讨论过流式布局和弹性布局不适合尺寸跨度太大的屏幕。所以基本上采用有限的最大最小拟合尺寸，在拟合范围内，采用流式布局或者弹性布局进行拟合。如果超出适应范围，就会变成静态布局，不再响应屏幕的变化。

上面讨论的几个网页的基本布局，在一定程度上解决了页面适配的问题。但随着显示终端的发展，出现了平板电脑、移动设备等屏幕。这些设备出现增加了屏幕尺寸的跨度。但是上面讨论的几种网页布局就是不支持屏幕尺寸跨度过大的情况。

相比之下，自适应布局和响应式布局更能解决屏幕跨度过大的问题。

适应性布局

自适应布局为不同尺寸的屏幕准备多种方案，根据不同的屏幕尺寸确定一套显示方案。具体到每个方案，可以使用上述基本的网页布局进行适配。可以看作是由一系列基本布局组成的一套方案。

一般自适应布局会设计宽屏、窄屏、移动终端等几种适配方案，然后设置屏幕适配的范围。显示时会根据匹配适应范围的屏幕大小选择一组方案进行显示。

但是，自适应布局通常不会改变页面的结构。当页面缩小时，会选择缩小、替换、隐藏一些横向的页面元素，以达到适配的目的。有一些常见的治疗方法:

响应式布局

响应式布局就是设定一组方案，通过调整行和列的显示来适应它们。当屏幕较大时，每个元素显示在一行中，当屏幕较小时，它转换为以列显示。

响应式布局适应屏幕，因为它需要换行。所以在页面缩减的过程中，页面布局会发生变化。页面缩小时，一开始会以流布局或柔性布局的形式缩小页面，直到页面宽度再也装不下为止，横向显示的元素会改为纵向显示。

适应性布局

自适应布局需要一系列页面布局。因此，设计和实施需要更多的时间。

但是因为它可以针对不同的屏幕设计不同的方案，所以方案是相对独立的。它的限制较少，自由度较高。

但是，请注意，自适应不是几个完全不同的方案的组合。总的来说主要部分都是一样的。只有一些水平元素是独立设计的。

响应式布局

响应式布局只需要一个页面布局就可以完成屏幕适配，其实现工作量相对较小。然而，有必要用一套方案来适应所有的屏幕尺寸。所以设计时要考虑很多因素。

一般来说，自适应布局适合复杂页面，响应式布局适合页面结构简单的页面。

因为移动端和PC端的巨大差异，包括屏幕大小，操作方式，都不一样。另一个解决方案是分别设计每一页的页面。

这种方案的优点是每个显示终端可以根据自身情况自由设计，从而为每个显示终端专门设计一种方案。这无疑给设计师和用户体验带来了巨大的好处。

然而，这种方案带来了设计和实现的双重工作量。同时，产品投入使用后，需要两组人对其内容进行维护。

如果你有以下情况，可以考虑使用移动端和PC端分离的设计:

写在最后

没有完美的计划。根据自身情况选择才是硬道理。

作为设计人员，不要忘记运营商后期的技术实现、测试、维护的工作量。同时，不要忘记项目后期迭代的难度。总之，选对最重要。

要知道，看似土的静态布局还是有大量应用的。千万不要过度设计。

PS网页设计布局有四种方式分别是?

DIV+CSS和table两种布局方式，DIV+CSS布局运行速度快，科学，但难学，table布局简单，运行加载慢，做网站不科学，各有利弊。

html网页结构布局？

HTML网页结构布局是分为head头部，body主体，几个大部分

HTML是超文本传输协议的缩写，是企业常用的静态页面技术之一。他有布局控件和页面元素控件两种标签。布局控件就是用来对页面进行布局的，head是页面的头部结构，里面可以有title标签，body是页面的主体结构，可以在里面添加多个p图层，table等标签。

网页的布局一般通过表格和什么不同？

所说的表格通常是指table，布局表格就是把网页的整体布局通过表格实现，但是不推荐使用表格，p+css是一个比较流行的布局方式。

什么是对网页的程序 内容 板块 布局？

通过css的各类属性进行编辑来完成对网页的布局。交互由JS控制。

网站关键词怎样布局才是合理的？

网站关键词怎样布局才是合理的？

如何布词呢？

布词就是把词选好后，进行合理的分布，通常网站标题以核心关键词、主词为主;分类目标、栏目以目标关键词为主;文章页面以长尾词为主，注意要进行合理的分配。

1、网站标题(title)+网站描述

标题是网站优化的重中之重，布局一定要严谨，体现核心关键词，如我们是做网络推广的，品牌是某某，那么，我们的网站标题就可以是“某某一致力于网络推广、网络营销、品牌推广公司”。

这里出现了四个关键词，即网络推广、网络营销、品牌推广、品牌推广公司，我们的标题要控制在30字以内，因为太长的话搜索引擎就显示不了了，影响用户体验度。此外，我们还要学会巧妙地使用关键词符。

有的人喜欢在标题上堆砌关键词，如“某某一品牌推广、 品牌推广公司、品牌推广公司哪家好”，“品牌推广”这个词在标题中重复了三次，这就是明显的关键词堆砌，会影响优化，还有可能被认定为作弊，建议关键词在标题中只出现一次即可。

一个好的描述，不仅可提升排名，还能让用户更好地了解公司情况，而且这里也是进行优化的好地方，网站描述中的关键词可以重复2-3次，描述要专业，有吸引力。有人习惯在描述中加上联系方式，虽然这样用户不用点击网站就能联系到你，但会使描述的内容不能展现得太多，建议描述的字数控制在120字以内。

2、网站关键词

网站关键词主要分布在网站主页、分类页面、目录页面所体验的keywords，虽然这对网站优化不会有直接作用，用户也只有在点击网站源代码后才能看到，但可提高用户体验。通常放一些核心关键词即可，数量为3到5个。

更多网站关键词布局可以私信我，一起交流