前端布局的几种方式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端布局的几种方式相关的知识,希望对你有一定的参考价值。

参考技术A

1.固定布局,静态布局

传统Web设计,网页上的所有元素的尺寸一律使用px作为单位,网页宽度一般为960px。网页布局始终按照最初写代码时的布局来显示,不受浏览器影响。如果浏览器宽度如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景

2.流式布局

流式布局使用的是百分比,这位网页提供了很强的可塑性和流动性,与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。屏幕分辨率变化时,页面里元素的大小会变化而但布局不变,这可能导致如果屏幕太大或者太小都会导致元素无法正常显示。

3.自适应布局

自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式,例如宽度960px是一种样式,网页宽度1440px是另一种样式。改变屏幕分辨率可以切换不同的静态局部,但在每个静态布局中,页面元素不随窗口大小的调整发生变化。

4.弹性布局

使用 em 或 rem 单位进行相对布局,相对%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。这种布局中包裹文字的各元素的尺寸采用em/rem做单位,而页面的主要划分区域的尺寸仍使用百分数或px做单位。默认的文字大小16px就是1em。

5.响应式布局

每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变,设计方法通常采用了媒体查询+流式布局,使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。为不同终端的用户提供更加舒适的界面和更好的用户体验。

前端提交的几种方式

 

 

 

后台接收代码:

@PostMapping("/post/a")
 public String postA(User user){
        System.out.println("/post/a");
        System.out.println(user);
        return user.toString();
 }

 @PostMapping("/post/b")
 public String postB(@RequestBody User user){
     System.out.println("/post/b");
     System.out.println(user);
     return user.toString();
 }

对于 postA方法,则前端的提交方式为:

contentType:"application/x-www-form-urlencoded"

data:$("#formId").serializaArray() / 或者 data: $(‘#form1‘).serialize(),

----------------

对于 postB方法,则前端的提交方式为:

contentType:"application/json"

data:JSON.stringify(data)

 

以上是关于前端布局的几种方式的主要内容,如果未能解决你的问题,请参考以下文章

前端常见的布局方式

WEB前端怎么布局?

前端几种常见的布局方式

响应式布局实现的几种方法 — 弹性布局

Grid 布局

前端面试题系列之-CSS及页面布局篇