window.innerWidth和100vw的区别

最新推荐文章于 2024-06-07 22:07:24 发布
最新推荐文章于 2024-06-07 22:07:24 发布
阅读量481 收藏
点赞数
原文链接：http://www.cnblogs.com/DonaldTrump/p/6599475.html
版权

做一个弹出图片的效果

一开始我是用js写的，$('.mask img').eq(1).css({width:window.innerWidth+'px'})

后来想起来用css的vw的写法好像更简单点，设置100vw即可

这2中情况一般来说没什么区别，不过有上下滚动条的情况下，js的写法会比css的写法多一个滚动条的宽

 

转载于:https://www.cnblogs.com/DonaldTrump/p/6599475.html

baiwang1108
关注
css3中的width:100vh以及calc(100vh - 10px)，calc() 用法案例
m0_49714202的博客
10-21 6273
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; **vmax**: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; **vmin**: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小， 即**window.innerWidth/window.innerHeight**大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小
hieight:100vh;width:100vw;
weixin_44934844的博客
03-25 473
hieight:100vh;width:100vw; 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是root的意思，意思是相对于根节点来进行...
微信小程序开发01
juntech.top
09-10 265
微信小程序开发01 1、从0开发helloworld 从0开发hello,world,初始化一个项目，基本架构只留下pages文件夹和project.config.json。 现在我们着手写hello,world! 创建项目3个app基本文件： app.js/wxss/json 创建about文件夹 创建4个基本文件：about.js/wxml/wxss/json 往文件里面写东西 在完成上面...
内容不设高度的前提下父元素铺满页面的height:100vh与window.innerWidth
qq_43721140的博客
03-11 1709
问题场景：实现在不设置子内容高度的前提下父元素铺满页面
php css 改变宽度,css怎么设置宽为100vw
weixin_42676876的博客
03-21 272
在css中，可以使用“width:100vw;”样式来设置宽为100vw，width属性可以设置元素的宽度。vw是一个视口单位，是指相对于视口的宽度；1vw等于视口宽度的1%，比如浏览器的宽度为1920px，则“1vw=19.2px”。本教程操作环境：windows7系统、CSS3版、Dell G3电脑。在css中，可以使用“width:100vw;”样式来设置宽为100vw。css width属...
CSS width = 100vw 和width = 100%的区别
weixin_43322018的博客
07-30 4766
最近在写项目的时候，学习了一个新的知识点，想要记录一下， vw和vh相对的当前浏览器的视口 ，例如当前视口尺寸为375px 那么100vw = 375px width = 100% 是指当前width相对于父元素的宽度，100%时宽度等于父元素的宽度 ...
<script setup> import HelloWorld from './components/HelloWorld.vue' import TheWelcome from './components/TheWelcome.vue' </script> <template> <div class='container' ref='container'></div> </template> <script> import * as THREE from "three"; import {ref} from "vue"; import {onMounted} from "vue"; import {OrbitControls} from "three/examples/jsm/controls/OrbitControls" const scene=new THREE.Scene() const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000) camera.position.z=5 const renderer=new THREE.WebGLRenderer() renderer.setSize(window.innerWidth,window.innerHeight) const geometry=new THREE.BoxGeometry(1,1,1) const material=new THREE.MeshBasicMaterial({color:0x00ff00}) const cube=new THREE.Mesh(geometry,material) scene.add(cube) function render(){ renderer.render(scene, camera); requestAnimationFrame(render); } const container=ref(null) function fun(){ const controls=new OrbitControls(camera,container.value) controls.enableDamping=true container.value.appendChild(renderer.domElement); render() } onMounted(fun); </script> <style > *{ margin:0; padding:0; } .container{ height:100vh; width:100vw; bcakground-color:#f0f0f0; } </style>帮我检查以上代码并改正
06-02
在代码中，`bcakground-color`应该改为`background-color`，以修正样式错误。此外，需要将组件导入语句放入`<script>`标签中，并且将组件添加到模板中，以便正确... width: 100vw; background-color: #f0f0f0; } ```
2. 使用视口单位vw设置:csshtml { font-size: 5vw; /* 视口宽度的5% */}3. 使用javascript动态设置:js
最新发布
09-20
var viewportWidth = window.innerWidth || document.documentElement.clientWidth; // 计算并动态设置字体大小为视口宽度的5% var fontSize = (viewportWidth / 100) * 5; document.body.style.fontSize = ...
ts中怎么修改<canvas id="canves" width="367" height="367"><canvas>的宽高为80vw
05-05
canvas.width = 80 * window.innerWidth / 100; canvas.height = 80 * window.innerWidth / 100; ``` 这里使用了`window.innerWidth`来获取屏幕宽度，然后将宽高都设置为屏幕宽度的80%。 完整的代码如下： ```...
使用css的100vw出现滚动条
05-03
使用CSS的100vw可能会出现滚动条的情况，主要...var viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; ``` 然后使用获取到的viewportWidth进行布局计算。
width: 100%和 width: 100vw这两种写法有什么区别
舒一笑的博客
06-07 1436
相对于父元素宽度，适用于需要根据父元素宽度调整的情况。：相对于视口宽度，适用于需要占据整个视口宽度的情况。
彻底理解 innerWidth、outerWidth、screen.width、vw 和 getBoundingClientRect的区别
聪明的竹子的博客
10-08 3590
起因 说实话，撸了接近三年的前端。每次要用到innerWidth、outerWidth、screen.width 、vw、clientWidth和 getBoundingClientRect，都很可耻地点击谷歌浏览器，然后…你懂的。才能知道我应该用那个。在此之前，我草草写了一篇极短的文章，天真地以为自己理解了，谁知不然，每次都是很熟练地…,哦不。 贴上图片，引以为戒: 说实话，至今没看懂这张图片，并且不知道为什么当初会吧这张图片放上去。手动狗头 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来
CSS单位之vw、vh、vmin、vmax、%
时光清浅处，一步一安然
02-14 3828
视窗(Viewport)是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。注意：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。下面通过一个例子来说明。下面是用一个例子来说明。
CSS宽度100％和宽度100vw之间有什么不同？
阿酷tony
10-29 2032
使用 vw 作为网站中所有内容（包括字体大小和高度）的单位，无论分辨率如何，网站始终与设备的屏幕宽度成比例显示。这使得确保您的网站在工作站和移动设备上显示完全相同变得非常容易。 您可以在您的 body CSS 和 中指定的所有内容中设置 font-size: 1vw （或适合您的项目的任何大小） rem 设备将根据屏幕自动缩放很容易将现有项目甚至框架（例如已经使用 rem 作为一切单元的 Bootstrap）移植到这个概念。
css 100vw、100vh出现滚动条怎么解决
热门推荐
m0_52726759的博客
02-13 1万+
css，100vw、100vh滚动条问题
PC端项目中 vw 带来横向滚动条的问题
zk_html的博客
11-05 1252
Windows 系统中的滚动条是会占据视口空间的。在 MacOs 系统中，当不滚动页面时，滚动条默认是隐藏的。它们也不占据任何的视口空间，这就表示 100% 的body宽度等于 100% 的屏幕宽度。在 Windows 系统中，滚动条的宽度会从窗口的宽度中减掉（一般是17px宽）。vw 单位忽视了滚动条占据视口空间（滚动条是不会影响vw单位计算的），还是计算整个视口的宽度。
滚动条出现，挤压页面宽度，导致布局错乱的三种解决方法
qq_36132291的博客
04-21 1万+
出现原因 页面内容超出高度，浏览器出现滚动条的时候，因为滚动条是占位的，所以页面会被挤压，导致页面内容出现错乱。 解决方案一：新属性 overlay （目前仅chrome支持） chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 解决方案二：margin-right: calc(100%
css3新单位vw、vh、vmin、vmax的使用介绍
qq_47443027的博客
08-03 3628
有时为了突出弹出框，或者避免页面元素被点击。我们需要一个覆盖整个可视区域的半透明遮罩，这个使用。)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。）单位除了可以用来设置元素的宽高尺寸，也可以在文本中使用。），在竖屏和横屏状态下显示的字体大小是不一样的。是相对于父元素的大小设定的比率，）大小来决定的，单位。：视窗宽度的百分比（...
CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动
macleer的博客
07-22 5173
很简单，只要一行代码就搞定了： .wrap-outer { margin-left: calc(100vw - 100%); } 或者： .wrap-outer { padding-left: calc(100vw - 100%); } 然后就可以庆祝放鞭炮啦！！ 首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值