在我们的项目中我们使用 axios 进行异步调用。 因为异步调用的问题，如果我不采取手段，子页面没有办法获得父页面中的数据，页面将会显示为 没有数据。...问题和解决 这个问题的原因就是子组件在初始化的时候，父组件还没有获得数据。 可以使用的方法是 v-if 进行判断。 对比上面我们使用了 v-if 判断的代码和没有使用判断的代码。...上面的代码能够让子组件正确加载数据。 另外一个需要注意的是，在子组件中需要使用 props:['projects','currentPage'], 将数据从父总结中传递过来。...从父组件中将数据传递过来。 https://www.ossez.com/t/vue/14083
如果为子元素的顶部和底部设置了百分比，它将相对于父元素的高度，并直接进行非静态定位（默认定位）。同样，如果为子元素的左侧和右侧设置了百分比，它将与父元素宽度的直接非静态定位（默认定位）相对应。...如果子元素的 padding 和 margin 设置为百分比，无论是垂直还是水平，它们都是相对于直接父元素的宽度而言的，与父元素的高度无关。...响应式的缺点：如果有太多的样式需要在浏览器尺寸发生变化时进行更改，那么多套样式代码将非常麻烦。...4.3 Rem responsive 布局 rem 通常用于适应移动终端，页面根据视口分为 10 个部分。...4.4 VW、VH 响应式布局 因为 100vw = 100 视图窗口宽度，100vh = 100 视图窗口高度，那么根据 750 的设计草案，100vw 就是 750。
另一种方法是：监听一个事件，比如我监听的就是scroll事件，对会发生隐藏的元素设置scrollIntoView或者scrollIntoViewIfNeeded,通过设置不同的参数，可以使得作用的元素与视口的上面或下面对齐...其实是比视口大，即100vh包含了下面的状态栏的高度。...另外，如上面的代码所示，父元素设置了display:flex， 子元素设置了flex: 1，按理说，子元素设置了这个属性之后，就和父元素的宽高相同了，但是要注意，在这里，子元素还设置了position:...我们看一下W3C的文档怎么说 即，flex容器中的绝对定位子元素会脱离flex布局流，也就是说flex: 1对子元素来说已经失效了。...因此他的高度为绝对定位中的100%设置的高度，但是又设置了overflow:hidden，因此才会在虚拟键盘隐藏时出现一部分空白，从而导致了导航条的隐藏。
并且宽和高是浏览器视口的宽高,那么我们就可以编写我们的css代码.然后手风琴的盒子相对于浏览器视口是水平垂直居中的 子元素相对父元素水平垂直居中,可以使用flex布局....当父容器的空间大于子项所需的总空间时，flex-grow 决定了如何分配额外的空间。 flex-grow 的值是一个正数，表示子项的增长能力。...如果所有子项的 flex-grow 总和为1，那么每个子项将根据其 flex-grow 值占剩余空间的比例增长。...例如，如果有三个子项，它们的 flex-grow 分别为1、2和3，那么当父容器有额外空间时，第二个子项将尝试占据第一个子项两倍的空间，第三个子项将尝试占据第一个子项三倍的空间。...在该页面中,主要的作用就是,设置active类的元素, 即设置flex-grow 的元素的宽度将会自动占据父容器余下的空间. 前面的铺垫已经做好了.
视口单位基于页面的根元素，而百分比则基于它们所在的容器。因此，它们彼此不同，但各自都有各自的用处。 视口单位的用例 字体大小 ? CSS 视口单位非常适合响应式排版。...2.第二种解决方案：Flexbox和视口单位（推荐） 通过将100vh设置为body元素的高度，然后可以使用flexbox来使main元素占用剩余空间。...从容器中挣脱出来 我注意到一个用例最适合编辑版面。 一个子元素，即使父元素的宽度受到限制，它也会占据视口100％的宽度。 考虑下面： ?...1.添加 width: 100vw 最重要的一步，将图像的宽度设置为100%的视口。 ?...流行的顶部边框 你知道大多数网站使用的顶部边框吗？ 通常，它的颜色与品牌颜色相同，这会赋予一些个性。 ? 我们支持边框的初始值为3px。 如何将固定值转换为视口对象？下面是如何计算它的等效的vw。
，只有在“移动”视口为540px 或更小时才能切换。...540px 将是我们在移动交互式布局和静态桌面布局之间切换的断点。 伪类 一个 链接将 url 散列设置为 #sidenav-open，另一个设置为 empty('')。...3D transforms 我们的布局现在是堆叠在一个移动视口大小。除非我添加一些新的样式，否则它将默认覆盖我们的文章。...为了将移动设备上 Sidenav 的默认状态设置为屏幕外状态，我将元素的位置设置为： transform: translateX (- 110vw); 注意，我在典型的屏幕外代码 -100vw 中添加了...:target 时，将 translateX() 位置设置为 0。
容器查询 在 @container 之前，网页的元素只能响应整个视口的大小。这对于大型布局非常有用，但对于外部容器不是整个视口的小型布局，布局不可能进行相应调整。...在移动设备上，加载页面时，会显示带有 url 的状态栏，此栏会占用部分视口空间。在几秒钟和一些交互之后，状态栏可能会滑开，以便为用户提供更大的视口体验。...以下是新视口变体提供的所有新视口单位选项的完整列表： /* 高度视口单位 */ .new-height-viewport-units { height: 100vh; height: 100dvh...考虑一个子组件，它希望在不同的父级上下文中调整自己，而不是父组件拥有样式并更改子组件： /* parent owns this, adjusting children */ section:focus-within...通常这意味着深色主题样式出现在浅色主题之后；这将浅色设置为默认样式，将深色设置为可选样式。
vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值 如果我们将一个元素的宽度设置为 100vw 高度设置为 100vh，它将完全覆盖视觉视口： 这些单位有很好的浏览器兼容性，...但是，在移动设备上的表现就差强人意了，移动设备的视口大小会受动态工具栏（例如地址栏和标签栏）存在与否的影响。视口大小可能会更改，但 vw 和 vh 的大小不会。...因此，尺寸过大的 100vh 元素可能会从视口中溢出。 当网页向下滚动时，这些动态工具栏可能又会自动缩回。在这种状态下，尺寸为 100vh 的元素又可以覆盖整个视口。...代表 Small Viewport 的单位以 sv 为前缀：svw、svh、svi、svb、svmin、svmax。 除非调整视口本身的大小，否则这些视口百分比单位的大小是固定的。...当动态工具栏被缩回时，动态视口等于大视口的大小。 相应的，它的视口单位以 dv 为前缀：dvw, dvh, dvi, dvb, dvmin, dvmax。
响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容； 响应式布局的 5 种实现方案 百分比布局 媒体查询布局 rem 响应式布局 vw 响应式布局 flex 弹性布局...但是 padding、border、margin 等属性的情况又不一样 1、子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的...四、vw、vh 响应式布局 vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。...100vw = 视图窗宽度 ，100vh = 100 视图窗高度 如果移动端有 5 个不同的视口宽尺寸 750 ，640，480，375，320，则在不同尺寸下，对应的 1vw 的 px 值如下表 移动端尺寸...是自动应视口宽的，所以就达到了响应式开发的效果。
它可以用于检测元素是否进入或离开视口（viewport），或者与其他元素发生交叉 scroll 目前m端淘宝采用的是 scroll，它的特点是兼容性够好。...通过使用 IntersectionObserver，可以轻松地检测目标元素是否进入或离开视口，或者与其祖先元素交叉的程度。...('目标元素进入视口'); } else { // 目标元素离开视口 console.log('目标元素离开视口'); } }); }); // 监听目标元素...懒加载组件底层使用的技术是 IntersectionObserve 如果我们要利用 IntersectionObserve 实现一个自己的分页事件，也是挺便捷的。...，执行 loadData() 函数 isIntersecting && loadData(); }, { // 设置触发回调函数的阈值为 0.1 threshold
这里先以高度为宽度一半为例，也可以是其他任意比例。 一、思考如何实现 这个问题类似于：我们在移动端页面，上面有一张宽度 100% 的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。...我们可以借助这个想法，根据元素高度，来为元素设置一个相应比例的高度即可。...二、实现方法1 - 通过 vw 视口单位实现 所谓视口单位(viewport units)是相对于视口(viewport)的尺寸而言， 100vw 等于视口宽度的 100%，即 1vw 等于视口宽度的...三、实现方法2 - 通过子元素 padding 实现 通过设置子元素的 padding 属性来实现，是比较常用，也是效果比较好的一种，这里需要理解的是：子元素的 padding 属性百分比的值是先对父容器的宽度而言...分析： 这里我们将父容器 .box 宽度设置为 200px，子元素 .text 的 padding:10% ，因此 .box 的 padding 计算结果为 20px; 接下来结合主题，我们利用这个原理
=no"> Viewport 属性： 属性 含义 取值 width 定义视口的宽度，单位为像素 正整数或 device-width（设备的宽度） height 定义视口的高度，单位为像素 正整数或 device-height...=1, minimum-scale=1"> 如何合理设置 rem 的大小呢？...使用公式：（元素大小 / 设计稿大小）* 100vw 将元素大小转换为 vw 单位的大小。...当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。...Flexbox 布局的两个基本概念： 容器：弹性布局的父元素（display=flex的元素）。 项目：弹性布局容器中的每一个子元素。
这里先以高度为宽度一半为例，也可以是其他任意比例。 一、思考如何实现 这个问题类似于：我们在移动端页面，上面有一张宽度 100% 的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。...二、实现方法1 - 通过 vw 视口单位实现 所谓视口单位(viewport units)是相对于视口(viewport)的尺寸而言，100vw 等于视口宽度的 100%，即 1vw 等于视口宽度的 1%...下面看看这种情况下，图片加载成功和失败的对比： [1] 三、实现方法2 - 通过子元素 padding 实现 通过设置子元素的 padding 属性来实现，是比较常用，也是效果比较好的一种，这里需要理解的是...：子元素的 padding 属性百分比的值是先对父容器的宽度而言。....box 宽度设置为 200px，子元素 .text 的 padding:10% ，因此 .box 的 padding 计算结果为 20px; 接下来结合主题，我们利用这个原理，来实现等比例的问题：
background-attachment CSS 属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。 它一共有三个属性: fixed: 键字表示背景相对于视口固定。...当然，你可以直接去这里查看:https://codepen.io/jack-cool/pen/zYxzOpb 这里解释下使用transform: translate3d来实现视差滚动的原理: 1、给容器设置上...transform-style: preserve-3d和perspective: xpx，那么处于这个容器下的子元素就会处于 3D 空间中; 2、给子元素分别设置不同的transform: translateZ...()，这时不同子元素在 3D Z 轴方向距离屏幕的距离也就不一样; 3、滚动滚动条，由于子元素设置了不同的transform: translateZ()，那么他们滚动的上下距离translateY相对屏幕...总结下来就是: 父容器设置transform-style: preserve-3d和perspective: xpx，子元素设置不同的transform: translateZ() 看完了用 css 实现滚动视差的两种方式
CSS: .section-image { width: clamp(70px, 80px + 15%, 180px); } 通过设置最小、首选和最大宽度，图像将根据其容器宽度缩小或增长，这是由于使用了固定值和百分比...： 首先，我们将最小值设置为 0%。...条件边界半径 大约一年前，我在 Facebook 提要 CSS 中发现了一个巧妙的 CSS 技巧。它是关于使用 CSS max() 比较函数根据视口宽度将卡片的半径从 0px 切换到 8px。...9999 是一个很大的数字，强制该值为 0px 或 8px。 有了上面的内容，当卡片占据整个视口宽度时，它的半径为零，或者在更大的屏幕上为 8px。...间距 有时，我们可能需要根据视口宽度更改组件或网格的间距。不带 CSS 比较功能！我们只需要设置一次。
也就是说在不设置网页的viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。因此我们可以明显看出来，默认为布局视口时，根植于pc端的网页在移动端展示很模糊。...标签中我们会将width设置称为device-width，device-width一般是表示分辨率的宽，通过width=device-width的设置我们就将布局视口设置成了理想的视口。...3. px与自适应 上述我们了解到了当通过viewport元标签，设置布局视口为理想视口时，1个css像素可以表示成： 1 CSS像素 = 物理像素／分辨率 我们直到，在pc端的布局视口通常情况下为980px...： image.png 子元素的初始宽高为0，通过padding可以将父元素撑大，上图的蓝色部分是一个正方形，且边长为100px,说明padding不论宽高，如果设置成百分比都相对于父元素的width...2. vw单位换算 同样的，如果要将px换算成vw单位，很简单，只要确定视图的窗口大小（布局视口），如果我们将布局视口设置成分辨率大小，比如对于iphone6/7 375*667的分辨率，那么px可以通过如下方式换算成
实现方式 1、background-attachment 通过配置该 CSS 属性值为fixed可以达到背景图像的位置相对于视口固定，其他元素正常滚动的效果。...: auto; height: 100vh; } .parallax__group { transform-style: preserve-3d; /* 保留子元素3D变换效果 */ position...justify-content: center; align-items: center; } /* 背景层样式，设置为最远的层 */ .parallax__layer--back {...{ transform: translateZ(0px); z-index: 3; } 实现原理 通过设置 perspective 属性，为整个容器创建一个 3D 空间。...4、组件库方案 在当前成熟的前端生态中，想要获得精彩的视差动画效果，你可以通过现有的开源组件库来高效的完成开发。
initial-scale=1.0"> 百分比尺寸示例 .container { width: 80%; /* 容器宽度为视口宽度的...这样，无论视口宽度如何变化，.box 的宽度都在这两个值之间调整。 六、视口单位 视口单位（vw 和 vh）用于根据视口的尺寸来设置元素的尺寸。... .full-screen { width: 100vw; /* 视口宽度的 100% */ height...: 100vh; /* 视口高度的 100% */ background-color: #34495e; color: #fff;... .full-screen 元素的宽度和高度都设置为视口的 100%。
显示模式按钮点击事件： 为 switching 按钮添加点击事件监听器，当点击时，将 mode 元素（布局选项区域）的 display 属性设置为 flex，使其显示出来。 3....width: 800px; 设定文章宽度为 800px。 max-width: calc(100vw - 200px); 确保文章最大宽度不超过视口宽度减去 200px。...min-height: 100vh; 使文章的最小高度为视口高度。 border-radius: 6px; 给文章添加 6px 的圆角。....operates>svg 选中所有直接子元素为 svg 的元素，设置图标大小、底部间距、鼠标指针样式和填充颜色。 :hover 伪类为不同位置的图标设置鼠标悬停时的填充颜色。 5....根据点击的选项，执行不同的布局处理： 经典模式：隐藏工具区域，设置布局容器为两栏布局。 浏览模式：隐藏工具区域，设置布局容器为三栏布局。 工具模式：显示工具区域。 最后隐藏布局选项区域。
标准模式不包含，标准模式下可以通过设置 box-sizing: border-box 将标准盒模型转化成怪异模式下的盒模型。 怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。...，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目； nav 描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表...； ch 代表元素所用字体 font 中“0”这一字形的宽度； vh 1vh 相当于视口高度的 1%，100vh 就是视口的高度； vw 1vw 相当于视口宽度的 1%，100vw 就是视口的宽度； vmax...视口高度 vw 和宽度 vh 两者中的最小值 vmin 视口高度 vw 和宽度 vh 两种中的最大值； % 相对于父级元素的大小来确定； 参考：CSS [1] CSS percentage...，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用 e.target 属性可以获取到当前触发事件的子元素。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
云直播
腾讯会议
