啥是前端开发工程师必会的5种网页布局方法?

九路 等级 561 0 0

一、静态布局(static layout)

即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。

啥是前端开发工程师必会的5种网页布局方法?

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一般设定为图片本身的尺寸,防止被拉伸而失真)。

1. 布局特点

屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

2. 设计方法

使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调

三、自适应布局(Adaptive Layout)

自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

啥是前端开发工程师必会的5种网页布局方法?

1、布局特点

屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。

2、设计方法

使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。

四、响应式布局(Responsive Layout)

随着CSS3出现了媒体查询技术,又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、手表、冰箱的Web浏览器等等)都能显示出令人满意的效果,对CSS编写者而言,在实现上不拘泥于具体手法,但通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。即:创建多个流体式布局,分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

啥是前端开发工程师必会的5种网页布局方法?

响应式几乎已经成为优秀页面布局的标准。

1. 布局特点

每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。

2. 设计方法

媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

优点:适应pc和移动端,如果足够耐心,效果完美。

缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。(2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。

响应式页面在头部会加上这一段代码:

五、弹性布局(rem/em布局)

啥是前端开发工程师必会的5种网页布局方法?

1. rem/em区别:rem是相对于html元素的font-size大小而言的,而em是相对于其父元素。

2. 使用 em 或 rem 单位进行相对布局,相对%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,因为em是相对父级元素的原因没有得到推广。【中国站点制作网页的时候,习惯用CSS强制定义字体大小,保证每个人都看到一致的效果,包括网易、搜狐这些门户网站在内的大部分站点,用的都是绝对单位px(像素)。但是,如果从网站易用性方面考虑,字体大小应该是可变的,一些视力不是那么好的人需要放大字体才能看得清页面内容。然而,占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外人士非常重视网站的易用性,相当一部分外国站点已经使用em作为字体单位。

3. 这类布局的特点是,包裹文字的各元素的尺寸采用em/rem做单位,而页面的主要划分区域的尺寸仍使用百分数或px做单位(同「流式布局」或「静态/固定布局」)。早期浏览器不支持整个页面按比例缩放,仅支持网页内文字尺寸的放大,这种情况下。使用em/rem做单位,可以使包裹文字的元素随着文字的缩放而缩放。

4. 浏览器的默认字体高度一般为16px,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更直观,CSS编写者常常将页面跟节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根节点html的字体大小,因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px,方便了计算。

5. 用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin/浏览器设置字体尺寸等情况(因为em/rem相对于字体大小,会同步改变)。例如:p{ text-indent: 2em; }。

6. 使用rem单位的弹性布局在移动端也很受欢迎。

7. 其实在移动端使用所谓的弹性布局,是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于(根据屏幕尺寸)调整页面的各元素的尺寸、文字大小时比较好用。其实,使用vw、vh等后起之秀的单位,可以实现完美的流式布局(高度和文字大小都可以变得“流式”),弹性布局就不再必要了。

啥是前端开发工程师必会的5种网页布局方法?

课堂笔记

今天给大家讲解的5种布局方式,都是我们在开发过程中都会用到的,特别是这其中的自适应和响应式布局,这两个不是不一样的,大家在不同的情况下要做好不同的处理方案,这也是大家是否能成为成熟的前端开发工程师最重要的一个技能

结论

1.如果只做pc端,那么静态布局(定宽度)是最好的选择;

2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;

3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

啥是前端开发工程师必会的5种网页布局方法?

收藏
评论区

相关推荐

vue-cli3 中使用rem布局
1. 装包postcsspx2rem及px2remloader npm install postcsspx2rem px2remloader save 2. 在根目录src中新建utils目录下新建rem.js等比适配文件,内容如下 // rem等比适配配置文件 // 基准大小 const baseSize 16 // 设置 rem
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于 Vue3TypeScript VueCli4.0 vant ui sass rem 适配方案axios 封装 jssdk 配置 vconsole 移动端调试,构建手机端模板脚手架项目地址: 建议手机端查看 Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
一篇文章带你了解CSS单位相关知识
大家好,我是皮皮,今天给大家分享一些前端的知识。 一、了解 CSS 单位测量长度的单位可以是绝对的,例如像素,点等,也可以是相对的,例如百分比(%)和 em 单位。指定 CSS 单位对于非零值是必须的,因为没有默认单位。丢失或忽略单位将被视为错误。但是,如果该值为 0,则可以省略该单位(毕竟,零像素与零英寸是一样的)。注意: 长度是指距离测量。长度包括数字值
啥是CTF?新手如何入门CTF?
CTF是啥CTF 是 Capture The Flag 的简称,中文咱们叫夺旗赛,其本意是西方的一种传统运动。在比赛上两军会互相争夺旗帜,当有一方的旗帜已被敌军夺取,就代表了那一方的战败。在信息安全领域的 CTF 是说,通过各种攻击手法,获取服务器后寻找指定的字段,或者文件中某一个固定格式的字段,这个字段叫做 flag,其形式一般为 flagxxxxxxxx
java中的1L是啥意思?
static final long C0 = 1L; static final long C1 = C0 * 1000L; static final long C2 = C1 * 1000L; static final long C3 = C2 * 1000L; static final
HTML5常见的取值与单位
HTML5常见的取值与单位 ============= ##### **长度单位包括** **相对长度单位包括**:em, ex, ch, rem, vw, vh, vmax, vmin **绝对长度单位包括**:cm, mm, q, in, pt, pc, px **ch:**数字“0”的宽度 **em:**相对于当前对象内文本的字体尺寸。如当前
ORACLE 12C EM Express补充
[← 11GR2升级到12CR1并插入CDB](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.xifenfei.com%2F2013%2F07%2F11gr2%25e5%258d%2587%25e7%25ba%25a7%25e5%2588%25b012gr1%25e5%25b9%25
Oracle 11g EM删除重建的方法
[Oracle 11g EM删除重建的方法](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fblog.csdn.net%2Fxiaolongzaixian%2Farticle%2Fdetails%2F48580627) ====================================
Oracle 12C EM Express配置及问题处理
Oracle 12C EM Express配置及问题处理 [pmos](https://my.oschina.net/pmos/home) 发表于9个月前 原 Oracle 12C EM Express配置及问题处理 收藏 [pmos](https://my.oschina.net/pmos/home) * 发表于 9个月前 * 阅读 45
Electron是个啥?
 于2013年作为构建Github上可编辑的文本编辑器Atom的框架而被开发出来  是目前开源开发者、初创企业和老牌公司常用的开发工具  是桌面应用框架  相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序  把网页打包成一个在桌面运行的程序  比如像QQ、优酷、网易音乐等等  功能的强大超出你的想象,可以构建跨平台桌
JavaScript 是如何工作的:JavaScript 的内存模型
[**个人专栏 ES6 深入浅出已上线,深入ES6 ,通过案例学习掌握 ES6 中新特性一些使用技巧及原理,持续更新中,←点击可订阅。**](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fblog.csdn.net%2Fqq449245884%2Fcategory_9606068.html
JavaScript 查找替换
@echo off rem 查询 searchd 服务是否存在 sc query |find /i "searchd" >nul 2>nul if not errorlevel 1 (goto exist) else goto notexist rem 存在 searchd 服务
Jsoup清除HTML标签(非白名单)
Jsoup默认提供五种白名单:   1): **none()**     该API会清除所有HTML标签,仅保留文本节点。   2): **simpleText()**     该API仅会保留b, em, i, strong, u 标签,除此之外的所有HTML标签都会被清除。   3): **basic()**     该API会保留 a
Mongo数据库 客户端_启动.bat
**Mongo数据库\_服务端\_启动.bat** 内容如下: rem 启动mongoDB数据库--服务端 [@echo](http://my.oschina.net/echolee1987) off rem mongoDB的安装顶层目录 d: rem 设置显示文字颜色 color 0a rem 修改当前目录到bin下 cd D:/Mong