五种网站前端开发必学的网页布局方式？
作为前端开发工程师，布局方式有多种，针对不同的情况有不一样的处理，但是很多初学的同学都不知道这些情况，那么我们今天就来说说，那些网站前端开发工程师不可不知的5种布局方式！
一、静态布局（static layout）
1.布局特点
不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。
2.设计方法
PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。
移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。
二、流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。
- 布局特点
屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
- 设计方法
使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。
三、自适应布局（Adaptive Layout）
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1.布局特点
屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2.设计方法
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
四、响应式布局（Responsive Layout）
随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式几乎已经成为优秀页面布局的标准。
- 布局特点
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
- 设计方法
媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
优点：适应pc和移动端，如果足够耐心，效果完美。
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
响应式页面在头部会加上这一段代码：
五、弹性布局（rem/em布局）
rem/em区别：rem是相对于html元素的font-size大小而言的，而em是相对于其父元素。
使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。【中国站点制作网页的时候，习惯用CSS强制定义字体大小，保证每个人都看到一致的效果，包括网易、搜狐这些门户网站在内的大部分站点，用的都是绝对单位px（像素）。但是，如果从网站易用性方面考虑，字体大小应该是可变的，一些视力不是那么好的人需要放大字体才能看得清页面内容。然而，占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外人士非常重视网站的易用性，相当一部分外国站点已经使用em作为字体单位。
这类布局的特点是，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。
浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。
用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }。
使用rem单位的弹性布局在移动端也很受欢迎。
其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。
六、结论
1.如果只做pc端，那么静态布局（定宽度）是最好的选择。
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定。
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
五种网站前端开发必学的网页布局方式？相关推荐
- 网站前端开发必会基础知识有哪些？
自己工作做得好好的,怎么非要去搞前端?" 很多人离职的时候,可能印象最深的就是爸妈每天说的这句话.起因很简单,就是自己辞了爸妈眼中的"铁饭碗". 他也是如此,毅然辞去了一 ...
- Web前端开发必学15大技术
快进到现在,我发现现代web开发再一次将发生压倒性的改变.信息资讯的铺天盖地令人迷惑,尤其对于初学者而言.首要原因是新的框架,例如 Angular 2和ReactJs出现了,使用了尚未完全定型的ECM ...
- es6 数组合并_九个前端开发必学超级实用的 ES6 特性
1.展开操作符 顾名思义,用于对象或数组之前的展开操作符(-),将一个结构展开为列表. 这种写法够优雅,够简洁吧?如果不用展开操作符 我们得这么写: 展开操作符也适用于合并对象的属性: 不用展开操作符 ...
- 网站前端开发基础知识学什么？必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
- web前端开发需要学什么（包含前端学习路线）
前端开发,做到后面,是可以走很多方向的: 但是要保证后期的平滑过度,前期还是要把一些必须的知识搞扎实的: web前端开发需要学什么 环境搭建 前端环境很好搭建,编辑器+浏览器即可. 浏览器推荐使用 C ...
- Web前端开发要学多久?需要学些什么?
对于很多没有接触过web前端的小白来说,只知道前端就是网页,前端就是大家看到的页面,可对于想要转行或者进入前端的同学,他们更关心web前端学什么,要学多久,下面和千锋广州小编一起来看看吧! 1.前端开 ...
- 前端菜鸟必学！less使用基础讲解
前端菜鸟必学!less使用基础讲解 概述 使用方法 语法简介 嵌套规则 实例 概述 less是动态的样式表语言,通过简单,明了的语法定义,使编写css 的工作变得非常简单,在实际项目开发中,大大提高了 ...
- web网站前端开发时都需要掌握哪些基础语言？
们都知道网站开发分为前端(客户端)和后端(服务器端)两个部分.网站开发后端更多的是与数据库进行交互以处理相应的业务逻辑.需要考虑的是如何实现功能.数据的存取.平台的稳定性与性能等.至于前端,在这里泛指 ...
- 前端开发需要学多长时间？
近几年前端发展迅猛,很多行业需要前端工程师,从而学习前端的人群越来越壮大.但在学习前端上大部分人会选择系统学习,这样才能达到企业的要求.学习前端的时间深受大家的重视,怎么能学的好又快的学会前端格外重要 ...
最新文章
- python3 正则表达式 嵌套表格_在Python中使用正则表达式匹配嵌套结构
- android splash白屏_使用react-native-splash-screen解决应用启动白屏问题
- 好记心不如烂笔头之jQuery学习,第一章
- 我的2018年终总结
- iOS开发UI篇—CAlayer(创建图层)
- python3.6+qt designer一系列配置
- C++中判断在字符串中是否存在空格 以及 如何输入带空格的字符串
- 互联网公司们眼中的最强quot;世界杯阵容quot;
- 网络工程师职业规划（三）
- 2017-2018-2 20165314 实验三《 敏捷开发与XP实践》实验报告
- centos系统下安装daemontools详细指南
- RSA加密算法流程图
- 设计专业是计算机的吗,计算机平面设计是属于计算机什么专业范畴？
- MAC地址克隆是什么意思
- 固态硬盘是什么接口_M.2 SSD固态硬盘的规格、接口、总线详解
- 计算机视觉论文-2021-11-01
- 萧瑜 第一次博客随笔
- 直播商城源码，商城开发实现商城底部导航栏
- 阿里云Quick BI学习之报表制作
- 国产芯片时代来袭 SIT1028是一款内部集成高压LDO稳压源的本地互联网络（LIN）物理层收发器 TJA 1028T