静态布局 栅栏布局 自适应布局 响应式布局 弹性布局

最新推荐文章于 2024-10-16 11:23:07 发布
最新推荐文章于 2024-10-16 11:23:07 发布
阅读量94 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34629527/article/details/131723589
版权
文章探讨了不同类型的网页布局策略，包括静态布局的元素大小不变特性，栅栏布局如何在屏幕尺寸变化时保持布局稳定，利用min-width和max-width实现防止元素过小或过大的自适应布局，以及媒体查询在响应式设计中的应用。同时，提到了自适应布局与栅栏布局结合使用的方式，以及弹性布局和rem单位在创建灵活布局中的作用。
摘要由CSDN通过智能技术生成

静态布局 屏幕变化 元素大小不变
栅栏布局 根据屏幕大小元素宽度大小变化 但是布局不变 min-width max-width来防止过小过大
自适应布局 根据屏幕大小 位置发生变化 媒体查询
响应式布局 栅栏布局+自适应布局
弹性布局 rem

qq_34629527
关注
关于col栅栏系统与div自适应浏览器窗口
Nick_YayiAhoo的博客
12-04 1775
首先是关于col栅栏系统，比较系统的用法和规则在官网有介绍，这里说在项目开发中比较常见和容易忽略的问题。 1、col-lg、col-md、col-sm、col-xs四种： col-lg一般用于大屏设备， (min-width:1200px); col-md一般用于中屏设备， (min-width：992px); col-sm一般用于小屏设备， (min-width：768px);
前端开发不会布局怎么办？
ysxjy2020的博客
11-10 535
作为前端开发工程师，布局方式有多种，针对不同的情况有不一样的处理，但是很多初学的同学都不知道这些情况，但是其实了解之后，就会发现布局方式还是很常见很好理解的。 一、静态布局（static layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于p
Bootstrap-栅格系统自适应布局
热门推荐
柒青衿的博客
12-20 3万+
1 container 顾名思义container是栅格系统最外层的class，直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px padding值，这样container与浏览器窗口之间就存在一定距离。 2 row row指container的一行，每行理想状态包含12个col，这些col在不同屏幕大小时行为不同，见下图： 你也
再谈布局，栅栏式自适应布局的学习和实现(calc自适应布局)
weixin_30387423的博客
08-29 149
布局真的很重要。一个不好的布局后期会有很多很多的bug，就像是建房子的地基一样。 首先，再一次地圣杯布局的学习，来源于该教程： http://www.jianshu.com/p/f9bcddb0e8b4 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
静态布局、流式布局、自适应布局、弹性布局、响应式布局
书签一页
06-03 3017
静态布局、流式布局、自适应布局、弹性布局、响应式布局 前端的布局主要有： 静态布局、流式布局、自适应布局、弹性布局、响应式布局等。 一、静态布局： 尺寸上一律使用px;同时限制外层容器的大小；中间的宽度有最大(max-width)最小(min-width)限制，如果屏幕宽度大于max-width,那就两边自适应，如果屏幕宽度小于min-width,那就会出现x轴方向的滚动条。 优点：不存在浏览器兼容的问题。 缺点：pc端和移动端不好共用一套代码。需要做两套一套pc一套移动端。 应用场景：主要是在pc端使用。
html响应式弹性布局,布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）...
weixin_39542111的博客
06-17 534
一、静态布局页上的所有元素的尺寸一律使用px作为单位1.布局特点不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端2.设计方法PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高...
静态布局、流式布局、自适应布局、响应式布局的特点
Funchovy
10-08 752
今天把自己的布局从静态布局改成了流式布局，mark一下各种布局 一、静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点： 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个La
静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
denghaolin的博客
11-11 474
一、静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： 　　PC：居中布...
CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
IT利刃出鞘的博客
12-24 1736
本文介绍前端的布局的常用方案的概念、优缺点、适用场景等。
笨鸟儿 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
qq_38229938的博客
07-09 154
一、静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： 　　PC：居中布局...
HTML+CSS各类布局模式介绍
2401_84097658的博客
04-19 1006
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题说，面试成功=基础知识+项目经验+表达技巧+运气。
前端开发工程师必会的网页布局方法
m0_37643322的博客
09-21 490
1.静态布局（static） 1.1布局特点 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 1.2.设计方法 PC设备:设计一个居中布局，一般具有固定的宽度，当浏览器窗口缩小时，页面内容会被遮挡，呈现横竖向滚动条。 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m. 1.3 在移动端开发
Web开发之Layout布局
lh9456的博客
04-27 1166
布局种类： 页面布局的几种方式（静态化布局、流式布局、自适应布局、响应式布局、弹性布局） 使用建议： 1.如果只做pc端，那么静态布局（定宽度）是最好的选择； 2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定； 3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽...
web页面布局总结
xinguanyiban07的专栏
04-24 682
Web网页布局的总结 几乎完全参考：掘金 Web网页布局的主要方式 一、静态布局（static layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中...
06_实现watch
qq_53109172的博客
10-16 767
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
web扩展
x737510的博客
10-10 619
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
004-按照指定功能模块名称分组
最新发布
xiaogang1226的博客
10-16 204
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端地图数据开发
shuxiaoxii的博客
10-13 285
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 521
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值