css中vw,vh单位
时间: 2024-03-19 19:39:19 浏览: 17
在CSS中,vw和vh是视窗单位,用于根据视窗的宽度和高度来设置元素的尺寸。具体介绍如下:
1. vw(Viewport Width):表示视窗宽度的百分比,1vw等于视窗宽度的1%。例如,如果视窗宽度为1000px,那么1vw就等于10px。
2. vh(Viewport Height):表示视窗高度的百分比,1vh等于视窗高度的1%。例如,如果视窗高度为800px,那么1vh就等于8px。
使用vw和vh单位可以实现响应式设计,使元素的尺寸相对于视窗大小而变化。例如,可以将一个元素的宽度设置为50vw,表示该元素的宽度为视窗宽度的50%。
需要注意的是,vw和vh单位是相对于视窗大小而言的,当视窗大小改变时,元素的尺寸也会相应地改变。
相关问题
CSS 100vw 100vh出现滚动条
当使用CSS的100vw和100vh作为元素的宽度和高度时,如果页面的内容超出了视口的大小,那么浏览器会自动添加滚动条以便用户滚动查看内容。这是浏览器默认的行为,无法通过CSS来直接控制。如果你想去掉滚动条,可以尝试使用CSS的overflow属性来隐藏滚动条,例如:
```css
body {
overflow: hidden;
}
```
但是这样会导致页面内容被截断,用户无法查看到被隐藏的部分。因此,建议在设计页面时考虑到滚动条的存在,合理安排页面内容的布局和排版,避免出现滚动条影响用户体验。
vue3适配移动端vw vh单位配合@media做的适配
Vue3本身并不提供移动端适配的方案,但是可以使用vw、vh单位,以及@media媒体查询来实现移动端适配。
1. 设置html的font-size
在入口文件中,可以通过计算屏幕宽度来设置html的font-size,例如:
```javascript
// main.js
const setHtmlFontSize = () => {
const html = document.documentElement
const screenWidth = html.clientWidth
html.style.fontSize = screenWidth / 375 * 16 + 'px' // 375是设计稿宽度,16是基准字体大小
}
setHtmlFontSize()
window.addEventListener('resize', setHtmlFontSize)
```
在上述代码中,我们根据屏幕宽度计算出一个字体大小,然后设置到html标签的font-size属性上。
2. 使用vw、vh单位
在样式中,我们可以使用vw、vh单位来设置元素的宽度、高度、字体大小等。vw表示视口宽度的百分比,vh表示视口高度的百分比。
例如:
```css
.container {
width: 80vw;
height: 50vh;
font-size: 4vw;
}
```
在上述代码中,.container元素的宽度为视口宽度的80%,高度为视口高度的50%,字体大小为视口宽度的4%。
3. 使用@media媒体查询
有些情况下,我们需要针对不同的屏幕尺寸设置不同的样式。这时候可以使用@media媒体查询来实现。
例如,在手机竖屏状态下,我们需要将某个元素的宽度设置为100%:
```css
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
```
在上述代码中,当屏幕宽度小于等于768px时,.container元素的宽度会被设置为100%。
综上所述,我们可以使用vw、vh单位配合@media媒体查询来实现移动端适配。