四种网页布局的区别

2016-10-31 分类：网站建设

在平时的网站建设中，前端通常用到的网页布局通常有4种。那我今天就来说一下这四种网页布局的区别。

1.固定宽高布局

固定宽高布局通常是给各种标签固定好各自的宽高的一种布局方式，这种宽高的单位通常用（px），通常使用在PC端网页。这种布局方式对于前端来说是最简单的也是常用的一种布局。但是这种布局的缺点显而易见，就是在移动端的时候，不能根据移动端手机的屏幕而自适应宽高。

2.流式布局

流式布局就是给网页设计一个相对的宽度值，通常以百分比作为单位。这种布局的缺点也是非常明显的，那就是当屏幕变大时，标签的宽高根据屏幕自适应了，但是字体大小和网页的高度却还是用px作为单位。还会导致图片被拉长。也就是说标签可以变得流式而字体大小却无法流式。

4.自适应布局

自适应布局是分别为不同分辨率的屏幕适应的布局，他可以在不改变网页布局的情况下而进行对屏幕的自适应。也就是说可以根据屏幕的尺寸调整网页的大小。

4.响应式布局

响应式布局是通过检查设备的屏幕分辨率信息而决网页布局方式。也就是说，用户在不同分辨率的设备上打开同一个网页，最终出现的内容可能都不一样，一般情况下是检测设备的宽高来实现的。

不过在实际的开发过程中，这几个布局不是独立使用的，而是结合使用的，经过前端的结合并灵活运用之后，一个美观的页面就展示在了我们的眼前。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容