看看几个ui组件的栅格系统界限划分

响应式设计框架尺寸比较：Bootstrap、Antd、Element及Tailwind
最新推荐文章于 2025-05-23 15:00:00 发布
原创 最新推荐文章于 2025-05-23 15:00:00 发布 · 235 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文比较了Bootstrap、AntDesign（antd）、ElementUI和TailwindCSS在不同屏幕尺寸下的适配性，包括1920px、1600px等，以帮助开发者选择最适合项目的前端UI库。

bootstrap
576 ， 768， 992， 1200， 1400

AF6A4BFB-CD32-40b3-B9D5-359500DA2181.png

antd
576， 768， 992， 1200， 1600

134C9D07-0C51-4583-9896-5C14F026F1D4.png

element
768， 992， 1200， 1920

tailwind
640， 768， 1024， 1280， 1536

BC8E4B20-223E-4584-9A81-F4E201C2A385.png
material-ui入门之Grid栅格组件
蛐蛐的博客
06-05 1244
文档：https://material-ui.com/zh/components/grid/ 1.简介 Material Design 响应式布局的栅格可适应屏幕大小和方向，确保布局在不同尺寸之间的一致性。 栅格既能够确保在不同布局下的一致性，同时也能够在众多不同设计中保持其灵活性。 Material Design 的响应式 UI 是基于 12 列的栅格布局。 2.属性 将ref被转发到的根元素。 提供的任何其他道具都将提供给根元素（原生元素）。 3.CSS ...
用bootstrap做响应式网站
kekefen01的博客
01-24 2180
对bootstrap来说总共有五种设备，这种区分由设备的宽度决定， 四个分界点（576px，768px，992px，1200px） 特小.col、小.col-sm-、中.col-md-、大.col-lg-、特大.col-xl- 现实中常用的设备一般只有两种，一种手机，小于576px的超小屏幕（.col-），另一种是大于1200px的台式电脑（.col-xl-），在写普通的响应式网站时用两类属性.c...
各移动设备尺寸、分辨率
raindeweixiao的博客
07-07 3954
IOS客户端的尺寸分辨率表： Android系统的移动端设备屏幕尺寸也是非常多的，你会听到很多种分辨率：480×800, 480×854, 540×960, 720×1280, 1080×1920，而且还有传说中的2K屏、4K、5k等。 如果我们要做响应式页面的话，应该选择几种展现形式，每一种展现形式的屏幕尺寸的临界值是多少？ 现在我们看下当下非常
多终端响应式开发（Bootstrap栅格系统原理及实现)
suixishix的博客
02-15 575
多终端响应式开发（Bootstrap栅格系统原理及实现)
响应式布局
小白小白从不日别的博客
07-15 924
响应式布局可以更好的帮助我们去适配PC端和移动端以及不同屏幕大小的移动端 所谓的响应式设计就是让我们的页面在不同的设备上可以正常使用 主要的方法： 隐藏：确定好哪一部分的内容是可以在移动端进行隐藏的，比如说导航、个人信息这些我们可以采用以点击菜单弹出来的方式进行展示 折行：比如说我们有一个类似特性列表这样一个要去介绍一个事物的优点呀这些的，那么在PC端它可能是一行显示的，但是在移动端我们可以让它一行显示一个或者两个 自适应空间：这个就比如两栏布局或者三栏布局一样，有一部分内容宽度是固定的，..
响应式设计:
weixin_45376220的博客
09-08 186
1.视口viewport <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> meta:vp+tab键生成，做响应式设计，设置视口宽度与设备宽度统一。 2.媒体查询语法 2.1媒体类型 all 用于所有设备 screen 用于电脑屏幕，平板电脑，智能手机等。 print 用于打印机和打印预览 s...
UI设计：栅格
weixin_62428841的博客
01-23 1831
在Bootstrap的设计里，每一个网页有12个栅格。栅格是衡量每一个框大小的单位。
Ant Design：企业级React UI组件库的设计与实践
wylee的博客
05-23 1782
Ant Design 是蚂蚁集团开源的企业级 React UI 组件库，基于 Ant Design 设计体系，为中后台应用提供高效、一致且美观的界面解决方案。自 2015 年发布以来，凭借完整的组件生态、国际化支持和强大的定制能力，成为全球开发者构建企业级应用的首选工具之一。截至 2025 年，Ant Design 已迭代至 v5.25.2 版本，GitHub 星标超 88k，每月 NPM 下载量超 4000 万次。其核心特性包括全场景组件体系、样式系统、性能优化和类型安全，支持快速集成、主题定制、国际化和
【Element入门】4、Element UI 布局组件详解
weixin_52938153的博客
05-22 4440
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
CSS栅格系统
Y_ooo的博客
02-11 1858
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。 栅格系统与FLEX弹性布局有相似之处，都是由父容器包含多个项目元素的使用。由于兼容性并不强，效率也并未得到很大提升，因此目前不太普及。 1.声明栅格系统的容器 display: grid（块） | inline-grid（行） article { display: grid; width: 300px; height: 300px; border: s
响应式布局三步走
老猿阿浪的博客
05-14 1000
前言：制作响应式布局前，先开发固定尺寸的网页，当完成固定尺寸的网页后，在通过媒体查询为网页定制响应式布局 第一步，引入meta <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 屏幕按1:1的尺寸显示 并禁止用户缩放页面。 &...
媒体查询 768px＜992px＜1200px
qq_25741071的博客
09-16 598
768px<992px<1200px <style type="text/css"> .container{width:500px;height:500px;background:#f00;} @media (min-width: 768px) { .container { width: 750px; background:#000; } } @media (min-width: 992px) { .container { width: 970px
页面布局整理汇总，让你彻底搞明白多种布局的关系
无数_Mirage的博客
05-16 3879
页面布局整理汇总，布局设计和布局技术分开描述。你是否不知道响应式布局和自适应布局的区别，或者又和弹性布局混为一谈？又或者你深陷在自定义布局和响应式布局如何选择的困惑之中？这篇文章会告诉你答案。...
boostrap栅格系统自适应的布局
qq_38747027的博客
08-16 1694
1.栅格系统 ​ Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries）方法，为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。 (分界点大小：576px、768px、992px、1200px) Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)。Bootstrap4是完全基于flexbox流式布局构建的，完全支持响应式标准。 2.响应
相同布局在不同手机上显示不同_不懂响应式，不同尺寸屏幕下的页面很难达到最佳效果...
weixin_39674414的博客
12-04 744
让用户在不同设备和尺寸的屏幕下看的页面显示效果更佳，屏幕空间利用更高，操作体验更统一，交互方式更符合习惯。本文主要围绕什么是响应式，如何搭建响应系统，响应式网站解析 三个部分进行阐述，在项目中提前定义好响应系统将有助于设计师在设计中考虑页面在不屏幕断点上布局，希望对正在了解响应式知识的你有帮助！！！1、什么是响应式马科特说，真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上...
响应式设计+ rem
diliedou4174的博客
01-19 150
特点：手机，ipad，PC 所有的终端设备上完美展示； 核心点： 媒体查询 行业内默认分类： 1）大屏 1200-1920 2）中屏 992-1200 3）小屏 768-992 4） 超小屏 768以下 第一种写法： //PC端样式调整 @med...
Lua非空判断方法[源码]
11-24
本文详细介绍了在Lua中进行非空判断的几种方法，特别是针对table类型的变量。首先，文章指出了直接对nil值进行索引会导致异常的问题，并给出了一个简单的例子来说明如何避免这种情况。接着，文章讨论了如何判断一个table是否为空，指出不能简单地使用`#table == 0`的方式，而是应该使用`next(t) == nil`的方法。此外，文章还提到了`next`指令在LuaJIT中的优化问题，建议在非必要情况下少用。最后，文章简要介绍了如何判断一个字符串是否全部由空格组成，使用了正则匹配的方法。这些内容对于Lua开发者来说非常实用，能够帮助他们避免常见的错误。
JS表格转Excel实现[可运行源码]
最新发布
11-24
该文章详细介绍了如何使用JavaScript将HTML表格数据导出为Excel文件。内容涵盖了针对不同浏览器的兼容性处理，包括IE和非IE浏览器的不同实现方式。对于IE浏览器，使用ActiveXObject进行导出；对于非IE浏览器，则通过base64编码和数据URI方案实现。文章还提供了完整的代码示例，包括表格数据的处理、格式化和导出功能，支持文本和图片类型的数据导出。
PS设计技巧：利用960栅格系统打造简洁网页
在实际应用中，960栅格系统作为一个通用的网页设计框架，设计师可以将其作为参考线导入到Photoshop中，以此来指导网页布局的设计。 ### 结语 本知识点介绍了960栅格系统、Photoshop在网页设计中的应用，以及简洁...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值