如果没有wrapper，子元素将粘附在屏幕的边缘。这可能会让用户非常恼火，尤其是在大屏幕上。 ?...这里我使用margin:0 auto，这基本上将顶部和底部的margin重置为零，并使其左侧和右侧为auto。 使用此功能会有一些后果，这将在本文后面介绍。...在大屏幕上，宽度90%太大了，我们可以使用媒体查询来覆盖它。...在其中，wrapper可防止内容占据视口的整个宽度。 ? 主内容需要添加 wrapper 吗？ 这要看情况。 让我们探讨两种最常用内容区间的设计。 第一个以其内容为中心，并受特定宽度限制。 ?...内容紧贴边缘 由于左侧和右侧没有padding，因此内容将粘在边缘上。 这对用户是不友好的，因为使内容浏览变得更加困难。 ? 大屏幕的行长 在大屏幕上，由于行长太长，段落文本可能很难看清。
固定宽度容器固定宽度容器是一个具有固定宽度的容器，内容将在页面中水平居中显示，并根据屏幕尺寸进行自适应调整。使用.container类可以创建固定宽度容器。...流体容器流体容器是一个占据100%宽度的容器，内容将根据屏幕尺寸自动调整，并充满整个可用空间。使用.container-fluid类可以创建流体容器。...-- 嵌套容器的内容 --> 在上述示例中，我们在一个固定宽度容器内创建了一个嵌套的固定宽度容器。可以根据需要进行多层嵌套。...然后，我们使用创建了一个行（Row），并在行内创建了两个列（Column）。每个列都使用col-sm-6类，表示在小型屏幕上（如平板电脑）将占据一半的宽度。...这意味着在较小的屏幕上，左侧和右侧内容将分别在一行中显示。通过使用不同的col-类和媒体查询，我们可以根据需要在不同屏幕尺寸下创建不同的布局。
* 早期以table为主(简单) * 之后 以技巧性的布局为主(难) * 现在有flexbox/grid(偏简单) * 响应式布局 在移动端大行其道的时代 是必备的 * table表格布局 * float...float使span成为了一个BFC块，使得span可以设置宽高。...float+margin 实现两列布局 1. div1 左浮动：给出左侧的空间 2. div2 的margin-left留出 div1 的宽度. + overflow: hidden;也变为BFC块，和...float+margin 实现三列布局 1. div1 左浮动：给出左侧的空间 2. div2 右浮动：给出右侧的空间 3. div3 的margin-left margin-right 分别留出 div1...留下自适应的空间：和两列布局类似，一列固定宽度 另一列随屏幕自适应。 (类似的思路，在屏幕顶部 给logo固定宽度 logo右侧的纯色背景 可以自适应)。
通过将内容放置在行内，我们可以创建水平排列的列，并控制其在不同屏幕尺寸下的布局。下面是一个示例： 在上述示例中，我们在一个行中创建了两个列。...在中等屏幕（大于等于md断点，小于lg断点）上，每个列占据6个网格列的宽度（.col-md-6），即一行同时显示2个列。在小于md断点的屏幕上，每个列会自动换行，占据100%的宽度。...通过使用行和列，我们可以创建具有自适应布局的网格系统，以适应不同屏幕尺寸的设备。根据需要，可以调整列的宽度、偏移和排序，以实现所需的布局效果。
背景 现在手机、电脑、ipad成为了每个家庭必备内容，但是通常设计给到我们的都是一个固定大小的UI，如果用户是一个屏幕小或者大的设备，一般就会出现滚动条或者大片空白内容，为了更好的利用一些空间，或者在各种屏幕上都有一个较好的体验...，缩小到手机大小，就会发现阅读很难，一行放不下几个字，尤其是左侧的简介部分，如果屏幕过大，这么多字就放一行，阅读起来也会变的困难 Pasted image 20230605151021.png 那既然设计给了固定的尺寸...，我们就按照固定的尺寸来，这样导致的结果就是展示上无问题，小屏幕上就会出现滚动条，大屏幕上就会有过多的留白，屏幕的利用率不高 Pasted image 20230605151617.png 在早期的时候...，为了实现这点，设计师需要根据不同的屏幕宽度创建不同的设计 Pasted image 20230605171001.png 常见的尺寸一般手机600px以下，pc屏幕的宽度基本都在1000px以上，再大一些的...、颜色和高度（模拟内容的填充），小屏幕上不显示slider的内容 .container { display: grid; grid-template-columns: repeat(12, 1fr)
1.2 响应式布局容器 响应时需要一个父级作为布局容器，来配合子集元素来实现变化效果 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面的子元素的排列方式和大小，从而实现不同屏幕下...，看到不同的页面布局和样式变化 平时我们的响应式尺寸划分 超小屏幕（手机，小于768px）：设置宽度为100% 小屏幕（平板，大于等于768px）：设置宽度为750px 中等屏幕（桌面显示器...，大于等于992px）：设置宽度为970px 大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px 但是我们也可以根据实际情况自己定义划分 2.Bootstrap前端开发框架...这些实际是通过选择器为当前元素增加了左侧边距（margin） //列偏移 左侧...右侧 3.5 列排序 如何能够将左侧盒子与右侧盒子交换位置？
手机适配之防止文字错乱 注：防止各字段文字内容因手机屏幕宽度不够自动换行，导致显示位置错乱。 思路：通过修改CSS设置自适应布局方式。...禁止除最后一行字段外的所有字段自动换行功能，当文字内容一行显示不全时，最后一行字段自动换行并设置左边距使上下文字内容对齐。...white-space: nowrap; margin-right: 10px; } /*设置允许最后一个自动换行，设置该宽度...100%以填充满右侧空间*/ .service-status span:last-child { width: 100%; /*设置换行后的元素左侧的间距为25像素，根据需要调整*/ margin-left: 25px; } } 预览图：
，接下来我们就尝试几种简单且常见的方案，并简单分析一下利弊。...= width * ratioWidth // left同样看做是一个距左侧的宽度即可 <div class="widgetBox" :style="{ width: width...> 整体等比例缩放 即通过css的transform属性来对组件容器canvas进行整体的缩放，保持原比例，在屏幕居中显示，当然你可以选择只缩放宽度或高度，但是这样会变形。...// 画布的宽度调整为屏幕的宽度 newCanvasWidth = windowWidth; // 画布的高度根据画布原比例进行缩放 newCanvasHeight =...top: 50px;"> 我们想要动态根据这个div大小和位置复制一个div： <div ref="el2" style="background: green; position: absolute
在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。...注意：为了安全起见，最好还是给body加一个最小宽度! 圣杯布局要求 header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。...三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。...三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 圣杯布局的三种实现 【1】浮动 先定义好header和footer的样式，使之横向撑满。...但这会把center给遮住了，所以这时给外层的container设置 padding-left: 200px;padding-right: 150px;，给left和right空出位置 这时left并没有在最左侧
它基于12个网格列的概念，可以将网页内容分成多个部分，并通过在不同屏幕尺寸下设置列的宽度、偏移和排序，来适应不同的设备和布局需求。...container-fluid类创建一个占据整个视口宽度的容器，它会自动填充可用空间。以下是一个示例，展示了栅格容器的使用： <!...在Bootstrap中，列基于12个网格系统，意味着一行中最多可以包含12个列。可以将12个列均匀分割成几个部分，或根据需要指定每个列的宽度。...在小屏幕（sm）上，每个列占据了一半的宽度（.col-sm-6）。在中等屏幕（md）及以上的屏幕尺寸上，每个列占据了三分之一的宽度（.col-md-4）。...通过指定不同的列宽度和断点，可以在不同屏幕尺寸下呈现不同的布局。偏移和排序除了基本的栅格布局，Bootstrap还提供了偏移和排序功能，用于进一步控制列的位置和顺序。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...992px）：宽度设置为 970px 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 但是我们也可以根据实际情况自己定义划分 2 、bootstrap（前端开发框架...-- 列排序 --> 左侧 <div class="col-lg...屏幕缩放发现 中屏幕和大屏幕布局是一致的，因此我们列定义为col-md-就行了，md是大于等于970以上的 小屏幕布局发生变化，因此需要为小屏幕根据需求改变样式布局 超小屏幕布局有发生变化...，因此需要为超小屏幕根据需求改变样式 策略：先布局md以上的PC端布局，最后根据实际需要修改小屏幕和超小屏幕的特殊布局样式 项目结构搭建 Bootstrap 使用四步曲： 创建文件夹结构
2、Auto-fitauto-fit 函数是一个强大的工具，根据网格容器内的可用空间自动调整列数。它确保布局保持响应性，并适应不同的屏幕尺寸。...通过这个配置，网格将创建尽可能多的列以适应容器，同时保持指定的宽度。列数将根据可用空间自动进行响应性调整。两行的高度将保持在每行100像素的高度上。...它设置了最小和最大大小，允许根据不同的屏幕尺寸灵活调整。...在这种情况下，每列的最小宽度为100像素（100px），并且可以扩展（1fr）以填充容器中的可用空间。...通过同时使用 auto-fit 和 minmax()，你可以创建一个响应式网格布局，根据可用空间动态调整列数，同时确保每列都具有最小宽度。这些高级响应性功能提供了对网格布局的灵活性和控制。
右边nav栏固定宽度，并用margin/padding-left隔开和左边内容区域的距离 值的注意的是左边内容区域宽度设置为百分百，并使用margin-left负值使得自身向左位移，以给右边的nav...但是他却牺牲了自己，超出了屏幕外边。 ? 也就是这张图一开始的样式。左边粉色超出了浏览器屏幕。里边的文字都看不到了。...左侧浮动： ? 右侧自适应，margin让出左侧范围。 ? html结构： ? 样式关键点： main负责控制总宽度和水平居中。...上边h2通栏因为内容在左侧，所以直接设置了100%宽度（也就是没设置宽度） h2右侧的内容，利用浮动会形成文字环绕效果。让该内容直接右浮动就自动绕开了nav的空间。...：middle，由于文字的下沉特性，还是觉得上下总是偏那么几像素不居中。
感觉有帮助的小伙伴请点赞鼓励一下~ 两栏布局 左侧宽度固定。 右侧自适应。 浮动法 左栏做浮动。 右栏添加 margin-left 。...圣杯布局 头部(header)和尾部(footer)各自占领屏幕所有宽度。 中间的部分(container)是一个三栏布局。 三栏布局两侧宽度固定，中间部分自动填充整个区域。...; 这时 left 并没有在最左侧，给它设置过相对定位，所以通过 left: -200px; 把 left 拉回最左侧； 同样的，对于 right 区域，设置 margin-right: -100% 把...和 right 的前面； 先定义好 header 和 footer 的样式，使之横向撑满； 给 container 设置相对定位，让子元素根据他进行定位； 设置 container 部分的内边距，让其居中显示...，padding: 0 150px 0 200px； 让 left 根据左上定位，right 根据右上定位即可。
在移动设备上，我们希望它们能够很好地堆叠，并随着我们增加屏幕尺寸而扩展。 通过使用 Flexbox 实现此效果，您不需要在屏幕尺寸发生变化时通过媒体查询来调整这些元素的位置。...这些子元素的基本最小值为 150px ，最大值为 1fr ，这意味着在较小的屏幕上，它们将占据整个 1fr 宽度，当它们达到 150px 宽度时，它们将开始流到同一条线上。...在这里， clamp() 函数所做的是使该元素保持 50% 的宽度，直到 50% 大于 46ch （在较宽的视口上）或小于 23ch （在较小的视口上）。...您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。...在这种情况下，标题的字体大小将始终保持在 1.5rem 和 3rem 之间，但会根据 20vw 实际值增大和缩小以适应视口的宽度。
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 开始 可以看一个响应式demo 一个强大的网站，可有界面帮助做布局，直接导出代码。...（线上保存功能是需要收费的） 基本的思路 图片自适应 去掉高度和宽度，只给一个max-width 固定宽度或高度，使图片按照自身比例缩放 固定宽度或高度，使图片按照自身比例缩放 使用容器的padding-top...原理就是padding的值是基于自身的宽度来的 div { padding-top:56.25% } img { width...path-to-a-third-image.jpg 200w 200h"> 譬如：path-to-another-image.jpg 600w 200h 2x，说明可以在屏幕最小宽度...流式布局 这种一般界面比较简单，百分比来控制，一般不够位置挤下来就是了 媒体查询 通过检测屏幕的宽度，从而在不同宽度下通过不同的样式来显示页面。比较方便。
一、流式布局简介 流式布局 又称为 百分比布局 / 非固定像素布局 ; 为 流式布局 中 盒子模型 设置 百分比宽度 , 其大小可以根据屏幕宽度自适应伸缩 , 该盒子没有像素限制 , 内容自动向左右两边填充...; 流式布局 可以 根据 设备屏幕尺寸 和 设备类型 自动调整 网页布局 和 标签元素大小 , 以适应不同尺寸的 设备屏幕 ; 当 设备屏幕尺寸 发生变化时 , 标签元素的尺寸也会相应地调整 ; 移动端流式布局注意事项...设置最大和最小宽度 : 在设置元素宽度时，需要考虑最小和最大宽度，以确保元素在不同设备上都能够正常显示。...最小宽度 : min-width ; 最大宽度 : max-width ; max-width: 980px; min-width: 320px; 使用响应式图片 : 在移动端流式布局中，图片大小也需要自适应调整...使用媒体查询 : 使用媒体查询可以 根据不同的屏幕尺寸和设备类型，设置不同的CSS样式。
所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。...比如：如果设置的列的宽度大于自动计算的列的宽度，那么实际显示的效果以设置的列的宽度为准；如果设置的列的宽度无法填充整个屏幕，那么实际的宽度可能大于设置的宽度； 如果设置的列的宽度小于自动计算的列的宽度...设置列间隙大小*/ column-gap: 50px; /*4.设置列宽 原则：取大优先 1.如果人为设置宽度更大，则取更大的值，但是会填充整个屏幕，意味最终的宽度可能也会大于设置的宽度...--填充满整个屏幕 2.如果人为设置宽度更小，使用默认计算的宽度*/ column-width: 200px; } h4{ /*设置跨列显示：取值：1 / all */...stretch:（默认值）拉伸：让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于 992px）：...宽度设置为 970px 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 但是我们也可以根据实际情况自己定义划分 2.0 bootstrap的介绍 2.1Bootstrap...-- 列排序 --> 左侧 右侧 响应式工具 为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
和尚今天绘制一个简单的 收入-支出 进度对比图；大致效果是在两个梯形中进行简单的内容展示；为了提高可复用性，和尚预先设定如下规则； 左右两侧按比例展示对应尺寸，并注意大比例异常情况 左右两侧内容颜色支持自定义...根据比例绘制梯形 和尚预设一个左侧提醒比例，其中比例是以屏幕宽度整体计算，位于梯形中位线上，其中梯形角度预设为 45度 角，这样根据梯形高度即可计算梯形位置；而右侧梯形类似，注意与左侧梯形间隔的...时，其填充状态是边框以内的范围，即边框设置越粗，填充范围越小，其绘制的整体图形也会越大，因此在计算时需要以边框中间位置计算；和尚为了避免填充范围不够，设置在 PaintingStyle.fill 时降低边框粗细为...右侧文字 右侧文字相对于左侧略微复杂，首先通过 ParagraphStyle.textAlign 设置文字居右，再计算右侧文字宽度时注意右侧文字绘制的起始位置，注意边框宽度及两个梯形 spaceWidth...间距；最重要的是右侧要有空余，和尚通过 addPlaceholder 添加占位符； 注意：在起始位置与屏幕右侧距离差小于设置的宽度时，占位符起作用但整体范围在屏幕外，因此注意起始位置与文字段落宽度计算正确
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
