静态布局、流式布局、自适应布局、弹性布局、响应式布局

2024-04-13 06:25:56

静态布局、流式布局、自适应布局、弹性布局、响应式布局

前端的布局主要有：
静态布局、流式布局、自适应布局、弹性布局、响应式布局等。

一、静态布局：

尺寸上一律使用px;同时限制外层容器的大小；中间的宽度有最大(max-width)最小(min-width)限制，如果屏幕宽度大于max-width,那就两边自适应，如果屏幕宽度小于min-width,那就会出现x轴方向的滚动条。

优点：不存在浏览器兼容的问题。

缺点：pc端和移动端不好共用一套代码。需要做两套一套pc一套移动端。

应用场景：主要是在pc端使用。如：百度pc门户页面。

二、流式布局：

流式布局又称为百分比布局。随着屏幕的变化，页面的布局没有发生大的变化，进行适配调整，如栅栏，各模块之间使用了百分比。可以理解为静态布局的升级版，流式布局 = 静态布局 + 百分比布局；

优点：元素的宽高用百分比做单位，元素宽高随分辨率调整，布局变化不大。

缺点：屏幕尺度跨度过大的情况下，px部分不变化，百分比部分变化大，会显得页面展示非常不协调。

应用场景：左侧固定+右侧自适应、左右固定宽度+中间自适应，也主要用在pc端。

三、自适应布局：

通过@media媒体查询，设置不同分辨率下设置对应的样式，可以理解为500～800是一种样式的展示，800～1000又是一种样式的展示，1000～1200又是一种样式设置。

优点：可以在已知的范围内实现对应屏幕的自适应。

缺点：对于未知的宽度不能自适应。

应用场景：pc和移动都可以使用

四、弹性布局(flex)：

css3引入的布局方式

优点：方便、简单

缺点：存在兼容性问题。

应用：对于pc端的整体布局应用的不多，适合用在pc布局的局部，主要是用在移动端整体布局。

五、响应式布局：

响应式布局 = 自适应布局 + 流式布局；主流的做法是通过js计算根节点的rem来实现在不同屏幕下实现响应式布局，可以理解为自适应布局的精细版本。是目前最优秀的布局。

优点：适配pc和移动端，

缺点：对于一些屏幕情况需要特殊的处理。

总结

其他的布局相比与以上布局要么是换了名字，要么是大同小异。

静态布局、流式布局、自适应布局、弹性布局、响应式布局相关推荐

java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
html响应式布局 ace,.NET Core基于Ace Admin的响应式框架
原标题:.NET Core基于Ace Admin的响应式框架转自:netnr cnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架基于Ace A ...
最新基于ThinkPHP5.0+BootStrap框架开发的自适应WAP手机端响应式界面博客系统PHP源码
<h2>源码介绍</h2> 分享一款基于ThinkPHP5.0框架开发的自适应WAP手机端响应式界面博客系统PHP源码,前端界面采用BootStrap框架设计,使得博客系统界面 ...
什么是响应式设计？为什么要做响应式设计？响应式设计的基本原理是什么？(十九）
什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么? 页面的设计和开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包 ...
Vue 响应式原理(双向数据绑定) 怎样实现响应式原理？
Vue 响应式原理(双向数据绑定) 怎样实现响应式原理? 我们在Vue里面,定义在Data里的属性,叫做响应式属性. 每一个vue组件被创建的时候,同时还有一个对象被创建出来了,这个对象我们是看不到 ...
html自适应布局视频,2018年最新的8个响应式与自适应视频教程推荐
在学习前端的过程中经常可以看到自适应布局和响应式布局,那么,什么是响应式布局?自适应布局又是什么呢?响应式布局设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本:自适应布局设计是能使网 ...
qt布局中listwidget 保持固定宽度_UI设计中响应式设计实用技巧
响应式布局这个名词相信大部分设计师都不陌生,也能清楚知道它的基本呈现效果.寻找资料时发现大多数教程都是针对前端开发工程师打造的,并伴随着许多晦涩难懂的专业名词,让人难以理解. 什么是响应式布局响应式 ...
div+css的布局方式进行设计成品作业_原创响应式php企业成品网站,清晰风格版
原创响应式php企业成品网站,清晰风格版,适合做农业,茶叶,特产,美食等食品类企业官网使用,此风格颜色可以根据你的需求改,整个设计简洁大气,代码精简规范. 手工书写DIV+CSS,完美兼容IE7+.F ...
html怎么做成响应式的,怎么用html5完成响应式布局？
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...
vueweb端响应式布局_移动端和pc端，响应式设计布局
1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本 ...

最新文章

热门文章