首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

height:100vh,width:100vw

1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5 但是当div...进行嵌套的时候,em始终是按照当前div继承的字体大小来缩放,参照后面的例子。...2.rem 这里的r就是root的意思,意思是相对于根节点来进行缩放,当有嵌套关系的时候,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。...参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 但是有个好处是当元素没有内容时候,设置height:100%该元素不会被撑开...4.vw vw就是当前屏幕宽度的1% 补充一句,当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置, 但是100vw是相对于屏幕可见宽度来设置的,所以会出现50vw 比50%大的情况

40130

(转载非原创)React 并发功能体验-前端的并发模式已经到来。

如果列表过长,数据过多,UI“卡顿”,即渲染对用户可见。这种卡顿也会大大降低产品性能。开发人员可以使用一些技术,如节流和防抖,这些技术会有一定帮助,但不是完美的解决方案。...React 始终将用户界面更新和渲染放在首位。...并发模式保证了用户界面始终处于激活状态,并且持续在后台更新数据,并发模式也始终使用React 的两个钩挂:useTransition 和useDeferredValue 使用useDeferredValue...Suspense使组件能够在渲染前等待一段预定的时间。 Suspense的主要作用是从组件异步读取数据,而无需担心数据的来源。Suspense最适合延迟加载的概念。... <div

5.8K00

15 v-if 条件渲染与 v-for 列表渲染

或者我们可以使用一个div包装一下: Title Paragraph 1 Paragraph 2 但如果此处如果不方便添加或者我们不想添加div的话,vue提供了一个不可见的元素标签template,可以解决这个问题: Title</h1...所以,template是非可见元素,在vue中template仅是为了方便处理群组关系而存在的。...组件的缓存和复用 另处,值得一提的是,v-if是条件渲染,只有条件为true,组件才会创建;而另一个具有同样效果的指令v-show,仅是改变组件的display样式,无论显示与否,始终都会创建。...仅使可见的组件元素享用唯一的key,不可见的元素用一个简单的占位符代替。 为了实践这个想法,作者写了一个示例。模板代码为: <!

1.8K20

CSS 定位详解

div { position: fixed; top: 0; } 上面代码中,div元素始终在视口顶部,不随网页滚动而变化。...页面向下滚动时,工具栏变成固定位置,始终停留在页面头部(fixed定位)。 ? 等到页面重新向上滚动回到原位,工具栏也会回到默认位置。...它的具体规则是,当页面滚动,父元素开始脱离视口时(即部分不可见),只要与sticky元素的距离达到生效门槛,relative定位自动切换为fixed定位;等到父元素完全脱离视口时(即完全不可见),fixed...页面继续向下滚动,父元素彻底离开视口(即整个父元素完全不可见),#toolbar恢复成relative定位。 五、 sticky 的应用 sticky定位可以实现一些很有用的效果。...5.2 表格的表头锁定 大型表格滚动的时候,表头始终固定,也可以用sticky实现(查看 demo)。 ? CSS 代码也很简单。

1.7K40

如何优化网站页面打开速度提升体验度?

12.png 所以在网站建设的过程中,要把用户体验始终贯穿其中,关于提升网站页面的打开速度,这里有一些方法和技巧分享。...4、延迟显示可见区域外的内容 用户停留在第一屏的时候,不加载第一屏以下的图片信息,只有当用户把鼠标往下滚动的时候,这些图片才开始加载,这样可以提升可见于去的加载速度,提升用户体验。...6、合并优化 CSS样式的出现,使网页实现了内容和元素表现方法的分离,用户打开CSS样式设计的网页,CSS样式一般是被下载到用户本地的计算机中,而不像HTML标签每次打开网页都需要解析一次。...另外,CSS样式载某些地方可以替代图片,这就是为什么提倡使用Div+CSS的原因。

1.2K20

CSS | 视差滚动 | 笔记

引言 视差滚动(Parallax Scrolling)是一种效果, 能够使不同层次的元素以不同的速度进行滚动, 从而产生了视觉上的深度感和动态效果。...通过设置transform-style和 perspective,使该容器的子元素处在3D空间中, 然后设置transform: translateZ使物体在滚动的时候在Y轴移动位移不同,产生视觉差。...这里图片看起来没有近大远小,是因为手动放大了图片尺寸), 举个例子,你坐在行驶的车上,看路边风景,你会发现路边的树飞快的经过,而远处的山看起来就没多大变化, 更极端的是看夜空中的月亮,你会发现看起来他始终在那一个地方...核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能,地址栏有时可见,有时隐藏,改变了视口的可见大小。...当页面加载时,将高度设置为 window.innerHeight 将正确地将高度设置为窗口的可见部分。 如果地址栏是可见的,那么 window.innerHeight 是全屏的高度。

51921

CSS 定位详解

div { position: fixed; top: 0; } 1 2 3 4 复制 上面代码中,div元素始终在视口顶部,不随网页滚动而变化。...页面向下滚动时,工具栏变成固定位置,始终停留在页面头部(fixed定位)。 等到页面重新向上滚动回到原位,工具栏也会回到默认位置。...它的具体规则是,当页面滚动,父元素开始脱离视口时(即部分不可见),只要与sticky元素的距离达到生效门槛,relative定位自动切换为fixed定位; 等到父元素完全脱离视口时(即完全不可见),fixed...页面继续向下滚动,父元素彻底离开视口(即整个父元素完全不可见),#toolbar恢复成relative定位。 # 五、 sticky 的应用 sticky定位可以实现一些很有用的效果。...# 5.2 表格的表头锁定 大型表格滚动的时候,表头始终固定,也可以用sticky实现(查看 demo )。 CSS 代码也很简单。

1.7K10
领券