前端常用的几种布局方式(易懂版)

静态布局:
最为传统的一种布局方式,网页上的所有元素都是用px为单位进行设定的。

布局特点:
不论屏幕的大小,页面宽高始终不变,始终维持最初设计时的样式大小来显示;常规的PC端网页都是用的静态布局,也就是设置了min-width,当小于这个宽度的时候出现滚动条,当大于的时候让内容居中,外加背景。

设计方法:
PC :

居中布局,所有的元素样式都使用绝对的宽高(px),设计一个布局,当屏幕大小进行变化时,使用滚动条进行查阅被遮挡的部分。

移动端:
另建立一个移动网站,单独设计一个布局,使用不同的域名(wap.或 m.)这种移动端布局常见于2G和3G时期,现在很少使用了。

优点:
这种布局方式对设计师和CSS编写者来说最为简单,也不存在兼容性的问题。

缺点:
很明显,这种布局方式不能对不同的屏幕做出不同的表现。
当前,许多的门户网站、大部分企业的PC宣传都会选择这种布局方式,会有更好的展示效果。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单方法。到这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。

流式布局:
布局特点:

当屏幕分辨率大小发生变化时,页面里的元素大小会变化但布局不会发生变化。

设计方法:
使用%百分比来定义宽度,高度大都是用px来固定,可以根据可视区域(viewpoint)和父元素的实时尺寸进行调整,尽可能的去适应各种分辨率。往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局在web前端开发的早期历史上,用来应对不同尺寸的PC屏幕那时是的屏幕尺寸的差异没有现在那么大),在当今的移动端开发也是常用的布局方式。

缺点:
如果屏幕的尺度跨度太大,那么在相对原始设计而言过大或过小的屏幕上就不能正常的进行显示。因为宽度是使用的%来定义的,但是高度和文字的大小等都是用px来固定的,所以在大屏幕上有些元素的宽度被拉的很长,但是高度、文字的大小还是原来的样式,就会显得非常不协调。

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

布局特点:
当屏幕的大小发生变化时,页面里面的元素的位置会变化而大小不会变化。

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

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

布局特点:
每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
设计方法:媒体查询+流式布局。通常使用@media媒体查询和网格系统配合相对布局单位进行布局,实际上就是综合响应式。流失等上述技术通过CSS给单一网页不同设备返回不同样式的技术统称。

优点:
对PC和移动端有着非常好的适应,只要有足够的耐心,效果会非常棒。

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

响应式页面在头部会加上这一段代码:
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
总结:
响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的CSS,而且CSS都是采用%百分比的,而不是固定宽度,不同点就是响应式的模板在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套模板,只不过是长度或是图片变小了,不会根据不同的设备展示不同的样式,流式及时采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式像流水一样,一部分一部分的加载,静态的就是采用固定的宽度。
流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少);响应式是用于解决不同设备之间不同分辨率之间的兼容问题(一般是指PC,平板,手机等设备之间较大的分辨率差异)。

弹性布局:
rem、em区别:
两者都是顺应不同网页字体大小展示而产生的。
em是相对其父元素,在实际应用中相对而言会带来很多不便;
rem则是始终相对于html大小,即页面根元素。

布局特点:
使用em或rem单位进行布局,相对%更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,因为em是相对父级元素的原因没有得到推广。
包裹文字的各元素的尺寸采用em/rem做单位,而页面的主要划分区域的尺寸仍使用%或px做单位(同「流式布局」或「静态/固定布局」)。早期浏览器不支持整个页面按比例缩放,仅支持网页内文字尺寸的放大,这种情况下。使用em/rem做单位,可以使包裹文字的元素随着文字的缩放而缩放。
更能适应缩进/以字体单位padding或margin/浏览器设置字体尺寸等情况(因为em/rem相对于字体大小,会同步改变)。例如:p{ text-indent: 2em; }

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

优点:
理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。

缺点:
这种rem+js只不过是宽度自适应,高度没有做到自适应,一些对高度,或者元素间距要求比较高的设计,则这种布局没有太大的意义。如果只是宽度自适应,更推荐响应式设计。

响应式和弹性布局之间的对比:
响应式布局:改变浏览器宽度,“布局”会随之变化,不是一成不变的,例如导航栏在大屏幕下是横排,在小屏幕下是竖排,在超小屏幕下隐藏为菜单,也就是说如果有足够的耐心,在每一种屏幕下都应该有合理的布局,完美的效果。

rem布局:改变浏览器宽度,页面所有元素的高宽都等比例缩放,也就是大屏幕下导航是横的,小屏幕下还是横的只不过变小了。

结论:
1.如果只做pc端,那么静态布局(定宽度)是最好的选择;
2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/108854.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ExoPlayer架构详解与源码分析(5)——MediaSource

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…

自己写spring boot starter问题总结

1. Unable to find main class 创建spring boot项目写自己的starterxi写完之后使用install出现Unable to find main class&#xff0c;这是因为spring boot打包需要一个启动类&#xff0c;按照以下写法就没事 <plugins><plugin><groupId>org.springframewo…

不懂的东西

1、 2、 3、 4、 5、我看到那篇 Peace of mind 论文&#xff0c;有一个疑问&#xff0c;为什么论文里的量表用的频率指标&#xff1f;比如Some of the time&#xff0c; Not at all等&#xff0c;而PANAS用的是程度指标&#xff0c;比如moderately&#xff0c;a little等。…

linux加密和安全

sudo实现授权 添加 vim /etc/sudoers luo ALL(root) /usr/bin/mount /deb/cdrom /mnt/ 切换luo用户使用 sudo mount /dev/cdrom /mnt %sudo ALL(ALL:ALL) ALL %sudo 表示该规则适用于sudo用户组中的所有成员。 ALL(ALL:ALL) 表示可以在任何主机上&#xff0c;以任何用户身份来…

Java并发面试题:(五)volatile关键字

volatile 是什么 一旦一个共享变量&#xff08;类的成员变量、类的静态成员变量&#xff09;被volatile修饰之后&#xff0c;那么就具备了两层语义&#xff1a; 1&#xff09;保证了不同线程对这个变量进行操作时的可见性&#xff0c;即一个线程修改了某个变量的值&#xff0c…

iphone xr密码错误太多次 连接itunes

itunes下载的固件在电脑在电脑的“C&#xff1a;\Users\用户名\AppData\Roaming\Apple Computer\iTunes\iPhone Software Updates”文件夹之中。 如果你忘记了 iPhone 密码 - 官方 Apple 支持 (中国) 下载和使用 Windows 10 版 iTunes - 官方 Apple 支持 (中国) 查找手机 iClo…

C# , .netWebApi 实现类似Java 的Ioc 自动装配@Autowired

写C# 一直很羡慕Java的Autowired 自动装配. 因为C# 必须手动在Ioc里注册, 例如 builder.Services.AddSingleton<IHostedService, StartupInitializationService>();但是我们也可以用C# 的反射机制 , 用接口实现自动装配. 写接口, 扩展方法如下: namespace MyFanucApi.S…

vue3+vite+ts同时引入多个iconfont图标

vue3vitets同时引入多个iconfont图标 本文目录 vue3vitets同时引入多个iconfont图标下载iconfont库创建项目库图标加入项目库下载到本地 vue3引入文件存放位置main.ts设置组件中使用 分别引入多个iconfont 下载iconfont库 创建项目库 iconfont官网&#xff1a;https://www.ic…

Docker学习_存储篇

当以默认的方式创建容器时&#xff0c;容器中的数据无法直接和其他容器或宿主机共享。为了解决这个问题需要学习一些Docker 存储卷的知识。 Docker提供了三种存储的方式。 bind mount共享宿主机文件目录volume共享docker存储卷tmpfs mount共享内存 volume* volume方式是容器…

Django使用Token认证(simplejwt库的配置)

目录 官网文档安装项目配置拓展配置 官网文档 https://django-rest-framework-simplejwt.readthedocs.io/en/latest/ 安装 pip install djangorestframework-simplejwt项目配置 REST_FRAMEWORK {...DEFAULT_AUTHENTICATION_CLASSES: (...rest_framework_simplejwt.authent…

【html】利用生成器函数和video元素,取出指定时间的视频画面

简言 有的时候想截取视频某一秒的视频画面。 手动截取操作麻烦&#xff0c;还得时刻关注视频播放时间。 于是&#xff0c;我搞出来了一个根据视频自动截取特定时间描述的页面。 效果 实现步骤 获取视频对象根据视频时长生成时间选择表单根据表单选择的时间和视频地址&#x…

【数据仓库】hadoop生态圈与数据仓库

文章目录 1.大数据定义2. Hadoop与数据仓库3. 关系数据库的可扩展性瓶颈4. CAP理论5. Hadoop数据仓库工具5.1. RDS和TDS5.2. 抽取过程5.3. 转换与装载过程5.4. 过程管理和自动化调度5.5&#xff0e;数据目录&#xff08;或者称为元数据管理&#xff09;5.6&#xff0e;查询引擎…

9中间件-Redis、MQ---进阶

mq进阶 RabbitMQ 怎么避免消息丢失&#xff1f; 把消息持久化磁盘&#xff0c;保证服务器重启消息不丢失。 每个集群中至少有一个物理磁盘&#xff0c;保证消息落入磁盘。#RabbitMQ 的消息是怎么发送的&#xff1f; 首先客户端必须连接到 RabbitMQ 服务器才能发布和消费消息&…

笙默考试管理系统-MyExamTest----codemirror(33)

笙默考试管理系统-MyExamTest----codemirror&#xff08;33&#xff09; 目录 一、 笙默考试管理系统-MyExamTest 二、 笙默考试管理系统-MyExamTest 三、 笙默考试管理系统-MyExamTest 四、 笙默考试管理系统-MyExamTest 五、 笙默考试管理系统-MyExamTest 笙默考试…

数仓建设(三)

4) 累积快照事实表 多个业务过程联合分析而构建的事实表&#xff0c;如采购单的流转环节。用于分析事件时间和时间之间的间隔周期。少量的且当前事务型不支持的&#xff0c;如关闭、发货等相关的统计。 4. DWS公共汇总层设计规范 数据仓库的性能是数据仓库建设是否成功的重要标…

PA2019 Terytoria

洛谷P5987 [PA2019] Terytoria 题目大意 在一个平面直角坐标系上&#xff0c;有一个长度为 X X X&#xff0c;宽度为 Y Y Y的地图&#xff0c;这个地图的左边界和右边界是连通的&#xff0c;下边界和上边界也是连通的。 在地图中&#xff0c;有 X Y X\times Y XY个格子以及…

【vue2高德地图api】03-完善展示页,并且调用poi搜索接口

系列文章目录 文章目录 系列文章目录前言一、编写页面内容样式1.1 html内容1.2 css内容解决报错 二、完善api接口变量方法1.data变量2. methods3. computed4. api接口方法 三、配置api接口方法创建map.jsgetParkList方法 移动端控制台插件四、编写components组件在main.js中引入…

算启新程 智享未来 | 紫光展锐携手中国移动共创数智未来

10月11日-13日&#xff0c;2023年中国移动全球合作伙伴大会在广州举行&#xff0c;此次大会以“算启新程 智享未来”为主题&#xff0c;与合作伙伴一起共商融合创新&#xff0c;共创数智未来。作为中国移动每年规模最大、最具影响力的盛会&#xff0c;吸引了数百家世界500强企业…

[机缘参悟-110] :一个IT人对面具的理解:职业面具戴久了,就会忘记原本真实的自己,一个人是忠于职位,还是忠于内心?

目录 一、职业面具戴久了&#xff0c;就会忘记原本真实的自己 二、霸王别姬 三、没有对错&#xff0c;各走各路 3.1 程蝶衣&#xff1a;戏里戏外&#xff0c;忠于角色 3.2 段小楼&#xff1a;戏里戏外&#xff0c;角色分明 3.3 没有对错&#xff0c;各走各路 四、职场中…

视口 css

视口是浏览器上显示网页的一块区域&#xff0c;大小并不局限于浏览器可视区域范围。PC端和移动端视口差别很大。PC端中视口宽度始终与浏览器窗口宽度一致&#xff0c;移动端视口与浏览器窗口宽度完全独立。 PC端 PC端视口大小等于浏览器窗口可视区域大小&#xff0c;无论浏览…