对行和列进行布局，以总屏幕宽度的百分比进行扩展 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

每个高级前端工程师都应该知道的前端布局

使用弹性布局使用百分比 避免写死宽度和高度添加滚动条使用 rem 3.移动终端的常用宽度和高度垂直屏幕的常见宽高比：1:2, 2:3, 3:4, 3:5, 5:8, 9:16 横向屏幕的常见宽高比...：4:3, 5:3 智能手机屏幕尺寸和分辨率列表 4.常见布局 4.1 百分比布局当改变窗口的高度和宽度时，通过给出 height, width, padding, border, 和 margin...如果为子元素的顶部和底部设置了百分比，它将相对于父元素的高度，并直接进行非静态定位（默认定位）。同样，如果为子元素的左侧和右侧设置了百分比，它将与父元素宽度的直接非静态定位（默认定位）相对应。...例如，现在有 5 个大小相同的屏幕（750 640 480 375 320），所有屏幕的总宽度被划分为 10rem. 然后，我们需要获取与这些不同屏幕相对应的 html 根元素的字体大小。...: order, flex-grow, flex-shrink, flex-basis, align-self 4.6 双翼布局左右两列的宽度是恒定的，中间一列的宽度则根据浏览器窗口的大小自适应调整。

2022 0

CSS入门指南-4：页面布局

流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。...以上措施使布局有了明显改观。就这么简单的几下，布局就显得更专业了。处理栏及其内部div的关键在于，浮动栏并设定栏宽，但不给任何内容元素设定宽度。要让内容元素扩展以填充它们的父元素——内部div。...:border-box; box-sizing:border-box; } 三栏-中栏流动布局中栏流动布局的目的是在屏幕变窄时，中栏变窄，左栏和右栏宽度不变。...百分比宽度上面的例子中，我们用到了百分比宽度，百分比是一种相对于包含块的计量单位。你还能同时使用 min-width 和 max-width 来限制最大或最小宽度！...你可以用百分比做布局，但是这需要更多的工作。如果我们上边的例子中 nav 用百分比宽度做布局，当窗口宽度很窄时 nav 的内容会以一种不太友好的方式被包裹起来。

2.2K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

低代码如何构建响应式布局前端页面

页面响应式在进行项目交付的场景中，常常会存在项目系统在不同设备，不同屏幕尺寸下使用和展示。因此在开发过程中需要针对此场景做针对性处理。...Grid布局示意图由于网格属于标准的二维布局，因此网格布局将页面划分为“行”与“列”，产生单元格，对单元格的设置与组合，最终形成页面最终的效果。...活字格为用户提供了3种设置模式，分别是固定模式、自适应模式和范围模式，通过设置行高、列宽的调节模式为自适应模式或范围模式，可使页面呈现流式布局，使页面的布局更加灵活。...固定模式固定模式下，行高、列宽为固定的大小，单位为像素，不会随着展示屏幕的变化而变化，如果页面所有被设定了固定模式的行列总像素已经大于了浏览器的宽度/高度，那浏览器中就会出现横向/纵向滚动条。...当对某个组件设置了自适应之后，组件会根据内部的内容动态的变化自己的高度或宽度，比如文本框，会根据输入的文字内容来动态调节自己的框体大小，附件单元格会按照数据的多少来扩展高度。

4K4 0

前端|Bootstrap的栅格系统

它会随着页面的大小比例随之改变，就像最开始学习网页的布局一样，并不是定宽定长的，和网页里的百分比布局是比较相似的。这样，栅格系统就能够与更多的移动设备相匹配。...栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。...因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。...因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。结语今天学习了栅格系统的原理，对栅格系统有了初步的了解和认识。...但在实际运用的时候还需要对bootstrap框架的源码进行一些学习，特别是其中css的部分，对于布局来说是非常重要的。

1.4K1 0

【CSS】1287- 一行 CSS 实现 10 种强大的布局

这是营销网站的常见布局，例如，可能有一行 3 个项目，通常带有图像、标题，然后是一些描述产品某些功能的文本。在移动设备上，我们希望它们能够很好地堆叠，并随着我们增加屏幕尺寸而扩展。...，并将剩余空间 ( 1fr ) 应用于主区域，而auto调整大小的行将采用其子项的最小内容的大小，以便该内容大小增加，行本身将增长以进行调整。...类似于以前的布局，但现在有侧边栏！要使用一行代码编写整个网格，请使用 grid-template 属性。这使您可以同时设置行和列。...属性和值对为：grid-template: auto 1fr auto / auto 1fr auto 。第一个和第二个以空格分隔的列表之间的斜线是行和列之间的分隔符。...在这种情况下，标题的字体大小将始终保持在 1.5rem 和 3rem 之间，但会根据 20vw 实际值增大和缩小以适应视口的宽度。

4.6K2 0

Bootstrap行和列

在Bootstrap中，行（Row）和列（Column）是构建响应式网格布局的核心组件。它们允许我们创建灵活的网格系统，以便在不同的屏幕尺寸下进行布局。...-- 列内容 -->在上述示例中，我们使用元素创建了一个行，并添加了.row类。行可以包含一个或多个列，并且总宽度应该等于12列。如果超过12列，那么多余的列会自动换行到下一行。...列（Column）列（Column）是行的子元素，用于将内容放置在网格布局中的特定位置。通过指定列的宽度和偏移量，我们可以控制内容在不同屏幕尺寸下的布局。...每个列包含一个卡片（.card），其中有博客文章的标题和内容。通过使用行和列，我们可以创建具有自适应布局的网格系统，以适应不同屏幕尺寸的设备。...根据需要，可以调整列的宽度、偏移和排序，以实现所需的布局效果。

1.8K3 0

响应式布局，你需要知道这些

建筑师们通过把嵌入式机器人与可拉伸材料结合的方法，尝试艺术装置和可弯曲、伸缩和扩展的墙体结构，达到根据接近人群的情况变化的效果。...我们期望页面可以根据用户的设备环境，比如系统，分辨率，屏幕尺寸等因素，进行自发式调整，提供更适合当前环境的阅读和操作体验，对已有和未来即将出现的新设备有一定的适应能力。这就是响应式设计的理念。...这里只需要记住一点，百分比是相对于父元素的宽度和高度计算的。到这里，相信你已经掌握了响应式布局里常用的所有单位。接下来，我们介绍弹性盒和栅格，它们都不是单位，而是一种新的布局方案。...FlexBox 基于轴线，只能解决一维场景下的布局，作为补充，W3C 在后续提出了网格布局（CSS Grid Layout），网格将容器再度划分为 “行” 和 “列”，产生单元格，项目（子元素）可以在单元格内组合定位...网格关于网格布局推荐阅读这篇文章 A Complete Guide to Grid。上述文章非常详细地介绍了网格的一些基本概念（比如容器和项目，行和列，单元格和网格线等），使用姿势，注意事项等。

1.7K2 0

css布局 - 工作中常见的两栏布局案例及分析

+cont结构三、类似九宫格布局的两列结构四、图文两列布局 1、左图右文字非垂直居中， 2、左图，右固定行数的文字，右侧文字和左边图片垂直居中。 ...右边nav栏固定宽度，并用margin/padding-left隔开和左边内容区域的距离值的注意的是左边内容区域宽度设置为百分百，并使用margin-left负值使得自身向左位移，以给右边的nav...样式关键点： main负责控制总宽度和水平居中。左侧nav浮动右侧内容区margin让出nav的宽度范围。自适应。 css样式： ? 简陋的效果 ?...css关键思路： main依旧应该负责总宽度和水平居中之类的布局，这里因为这一小块是嵌套在其他结构里的。就没有什么设置。 nav样式上在右边，但是结构上被放到了上边。进行右浮动。...内容区域设置了左浮动和自身视觉宽度上的width值（也就是设计稿上多宽这里设置了多宽）不过我的愚见，觉得这里可以不设置浮动。反而设置上百分比宽度是为了自适应很有必要。 css代码： ?

2.7K1 1

前端|响应式布局原理

一 百分比布局+媒体查询首先通过媒体查询确认container的宽度，每个col-xx-xx都是通过百分比定义的，屏幕尺寸变化了，container就变化了，col自然就变了。...二栅格系统的工作原理 1.行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列（aligment）和内补（padding）...2.通过行（row）在水平方向创建一组列（column）。 3.自己内容应当放置于列（column）内，并且，只有列可以作为行（row）的直接子元素。...4.类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化布局。...7.如果一行（row）中包含了的列（column）大于12，多余的列所在的元素将作为一个整体另起一行排列。 8.栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕覆盖栅格类。

1.6K1 0

网页布局的几种方式有哪些_做网页建议用哪种布局

流式布局（Liquid Layout）　　为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整，但整体布局不变，通常以百分比做为长度单位（通常搭配 min-*、max-* 属性控制尺寸流动范围以免过大或者过小导致元素无法正常显示...缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调栅格化布局　　将网页宽度人为的划分成均等的长度...bootstrap 的栅格系统是通过一系列的行和列的组合来创建页面布局，它的栅格系统最大分为12份: 不过版本bootstrap3 与 bootstrap4 实现栅格系统方式不一样, bootstrap3...为了兼容 IE，采用的是浮动方式来实现栅格系统：即每一个栅格都是用左浮动和百分比来进行排版，当窗口宽度改变，对应改变 container 容器的宽度，对应栅格宽度自然也跟着改变： bootstrap4...弹性布局（rem/em布局）　　弹性布局跟流布局很像，网页宽度不固定，使用 em 或 rem 单位进行相对布局，避免了使用像素 px 布局在高分辨率下几乎无法辨识的缺点，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示

3K2 0

前端-CSS Grid中的陷阱和绊脚石

这里有一个简单的示例，突出其区别。第一个布局使用Flexbox，为了能尽可能多的使用盒子，以适合可用的宽度。这里我们控制了整个行中的布局。...如果你使用一个简化版本的浮动12列“网格”，我们必须计算每一列的百分比大小，加上每个列之间间距的百分比大小。要创建跨多个列的项，需要将所有项的宽度加上用于分隔它们的边界宽度。...最简单的方法就是使用auto，因为它会默认在隐式网格中创建网格轨道。一个自动大小的网格轨道将扩展到包含所有的内容。在下面的示例中，我有一个两列布局，在右边的列中添加更多的内容会导致整个行的扩展。...第二行也是自动大小，再扩展以包含内容。 ...你可能选择使用百分比的原因是你需要一个网格布局，以便与其他元素匹配使用其他布局方法，并依赖于百分比大小。然而，如果不是这样的话，看看fr单位是否能满足你的需求，然后对其进行计算。

4.8K2 0

响应式设计

大屏幕的断点：覆盖对应的小屏幕和中等屏幕断点的样式 */ @media (min-width: 50em) { .title {} } 最优先的是移动端样式，因为它们不在媒体查询里，所以这些样式对所有断点都有效...# 添加响应式的列许多响应式设计遵循这种方法：当设计要求元素并排摆放时，只在大屏上将它们摆放在一行。在小屏下，允许每个元素单独一行，填满屏幕宽度。...# 流式布局流式布局，有时被称作液体布局（liquid layout），指的是使用的容器随视口宽度而变化。它跟固定布局相反，固定布局的列都是用 px 或者 em 单位定义。...在主容器中，任何列都用百分比来定义宽度（比如，主列宽 70%，侧边栏宽 30%）。这样无论屏幕宽度是多少都能放得下主容器。...用 Flexbox 布局也可以，设置弹性元素的 flex-grow 和 flex-shrink（更重要），让元素能够始终填满屏幕。要习惯将容器宽度设置为百分比，而不是任何固定的值。

2K1 0

Bootstrap学习文档（一）

Bootstrap 是什么 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，使用这个框架可以简单高效的开发出适配各种屏幕的网站应用，...栅格系统 Bootstrap 的布局容器 1.container-fluid 自适应宽度100% container 适应屏幕的固定宽度，要比container占的宽度小一些屏幕宽度 >=...: red;">错误写法 Bootstrap 的栅格系统在 Bootstrap 中一行分为 12列，也即是屏幕的宽度被分为了 12份，一份就是十二分之一的屏幕宽度，源码是通过宽度为百分比以及浮动实现的...1. row 代表一行 2. col-- 代表列，第一个 * 和屏幕尺寸有关，第二个 * 是列数如果列的和超过了12，那就会换行，如果有一列，这个数值超过了12，那就会按12去显示 lg 宽度>...嵌套每一列里面都可以在嵌套一行和n（不能超过12）列，那嵌套里面的元素就会以父级的宽度为基准，再分12个列。

2.8K2 0

前端|Grid实现自适应九宫格布局

下面将每一列和行更改为一个 fraction 单位的值: .grid {display: grid;//划容器为三个1fr的列grid-template-columns: 1fr 1fr 1fr;/.../划容器为三个1fr的行 grid-template-rows: 1fr 1fr 1fr;} 结果是栅格布局将会把整个宽度和高度各分成三个 fraction，每列和每行都会各占据一个 fraction...总宽现在是四个 fraction 单位，第二列占据两个 fraction 单位，其它列各占一个 fraction，此时这些子元素都会随着屏幕宽度的变化而跟着变化了。...这样fraction 单位值更改列或行的值将会更加简单。 2.2 repeat函数 repeat()函数是一个强大的指定列和行的方法。...第一个参数指定行与列的数量，第二个参数指定它们的宽度，这就和之前的布局完全一样。然后是auto-fit。

3.1K3 0

「Shiny」应用程序布局指南

使用 Shiny 的自定义网格布局系统进行自定义布局（即 fluidRow() & column()）。使用 tabsetPanel() 和 navlistPanel() 函数进行分段布局。...该布局使用 fluidRow() 创建行，使用column()在行中创建列。列宽基于 Bootstrap 总宽为 12 的网格系统，因此 fluidRow() 容积的宽度总和永远是 12。...两种网格系统都使用灵活的可细分的12列网格进行布局。fluid 系统总是占据网页的全部宽度，并随着页面大小的变化动态地调整其组件的大小。..."sidebar" ), column(10, "main" ) ) ) 列偏移还可以偏移列的位置，以实现对UI元素位置的更精确控制。...这是因为 fluid 网格使用百分比，而不是像素来设置宽度。考虑以下页面布局: ?

6.9K3 2

CSS布局那点事儿

布局最开始老的一代网站开发，布局都是通过表格实现的。这样可以形成规整的网格布局，但是也会带来一定的复杂性。比如想要新增某个页面元素，就有可能要改动整个表格，添加很多无用的行或者列。...考虑到屏幕的宽度不同，有可能造成网页的横向拉伸，为了避免一样过于长，从而导致难于阅读，因此一般的类似博客的网站都会把宽度设置为一个固定的值。...当屏幕的宽度拉伸时，也不会改变页面的宽度：设置的方式大致如下： width: 920px; margin: 0 auto;/*水平居中*/ text-align: left; 如果是左右布局，则会考虑把页面分成两个部分...比如在做响应式web时，考虑到浏览器的伸缩，想要网站也随之改变，那么就会设置宽度高度为一定的百分比，或者通过响应式的语法实现。...这时，如果文本内容缩小的很小，宽度很窄可能会影响阅读，因此需要把宽度设置为一个最小值。只有屏幕宽度大于一定的值时，页面才会随之改变。类似的，避免屏幕过大网站拉伸变形，也可以设置一个最大的宽度值。

8215 0

你可能不知道的「 CSS 容器查询」

背景今天PM过来问我: 蛋总，有些用户反馈他们屏幕太小了 , 需要滑动, 操作不方便。我们的系统能不能改成自适应布局啊?...过程中发现了一个比较好玩的东西：CSS 容器查询。对此，我做了一下简单的整理和总结，在此分享给大家，希望对大家有所启发。...但是，就可用空间而言，很可能是在大屏幕上，侧边栏中的对象将具有足够的空间来以并排布局显示。容器查询将解决这种情况。除了查看视口的大小，我们还可以查看容器的大小，并根据容器中的空间进行布局调整。...知道它有多大的容器，正是我们进行容器查询所需要的。但是，通常我们并不经常知道这两个维度有多大。当我们使用媒体查询时，大多数时候我们都会指定可用的宽度（或内联大小）。...我们将列定义为: 该维度中,空间的百分比或分数。因此，容器查询仅允许通过在一维中指示大小来扩展包含属性，这被描述为单轴遏制。

1.6K3 0

移动端WEB开发之响应式布局

1、响应式开发原理 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。...原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。...列嵌套最好加一个行 row 这样可以取消父元素的padding值，而且高度自动和父亲一样高 <!...屏幕缩放发现中屏幕和大屏幕布局是一致的，因此我们列定义为col-md-就行了，md是大于等于970以上的小屏幕布局发生变化，因此需要为小屏幕根据需求改变样式布局超小屏幕布局有发生变化

4K2 0

使用这种技巧，可以大大地提高前端布局效率

为什么页面上 wrapper 有必要的通过多加一层 wrapper 布局，有很多好处：使内容更具可读性。没有多加一层 wrapper，文本和图像之类的内容就可以拉伸以占据整个屏幕宽度。...对于小屏幕，这似乎可以。但是，对于大屏幕，这是非常烦人的。对设计元素进行分组可以更好地增加间距。在没有wrapper的情况下，将设计元素划分为列是不容易完成的。...使用百分比的 wrapper 我收到了有关使用百分比宽度（如max-width：90％）用于包装器而不是使用padding-left和padding-right的答复。...当然，我们可以直接在标签内对 --wrapper-width 进行赋值，这样就能动态设置我们想要的值。...在上面的示例中，你可能需要让标题扩展到整个页面的宽度，而不是受wrapper宽度的限制。

3.9K2 0

一种粗暴快速的Android全屏幕适配方案

但是通常情况下，设计师并不会对不同屏幕提供不同的设计图，他们的需求仅仅是不同屏幕下控件对屏幕的相对大小一致，所以dp并不能满足这一点，而对各种屏幕适配一遍又显得略为繁琐，并且修改也较为麻烦。...(3)、百分比布局支持库：没有使用过，但是deprecated in API level 26.0.0-beta1 (4)、ConstraintLayout：百分比支持库deprecated之后推荐使用的布局...但是同时该库也存在以下等问题： (i)、扩展性较差：对于每一种ViewGroup都要对应编写对应的AutoLayout进行扩展，对于各View的每个需要适配的属性都要编写代码进行适配扩展； (ii...通常的一个简单的适配需求是：假如设计图宽度为200，一个控件在设计图上标注的长度为3，那么该控件长度相当于总宽度的3/200，那么我们希望在任何大小的屏幕上该控件所表现的长度都为屏幕宽度的3/200。...个人觉得AutoLayout的设计思想非常优秀，但是将LayoutParams与属性作为切入口在mesure过程中进行转换计算的方案存在效率与扩展性等方面的问题。

8253 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭