移动端使用viewpoint(视窗)的宽度和高度 vw vh

最新推荐文章于 2024-08-27 15:08:39 发布
最新推荐文章于 2024-08-27 15:08:39 发布
阅读量1k 收藏
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35671953/article/details/54091963
版权

vh：相对于视窗的高度：视窗高度是100vh。

vw：相对于视窗的宽度：视窗宽度是100vw。

用法：

height:100vh;
width:100vw;
vae的粉
关注
专栏目录
移动端热点问题
MingL520的博客
05-31 491
像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。//ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。
学Web的第二十一天
Mr_MengXie的博客
08-08 924
学Web的第二十一天
HTML5移动端viewpoint视口,移动端屏幕与视口
weixin_42308943的博客
06-21 743
屏幕像素px(pixels)：物理像素，硬件像素，设备像素dp,dip(deveice independent pixels)：逻辑像素、设备无关像素、CSS像素pt(point)：1/72英寸dpr(devicePixelRatio): 设备像素缩放比，即 1dp的长度相当于几个px的长度ppi,dpi：像素密度(像素每英寸)，斜向一英寸里的物理像素数量em: 相对于父元素的font-size的...
移动端布局(1)
qq_41486048的博客
03-22 211
黑马pink老师移动端布局笔记
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
最新发布
幽幽谷
08-27 1514
如何做一款定制化的数据大屏？ 开发可视化数据大屏如何做自适应？ vw vh、rem、scale 到底哪种比较好？ 时间不够，有没有偷懒的方法？
关于移动端布局总结
LOxia的博客
03-18 585
移动端布局总结， 万事开头难，写移动端更是如此，需要掌握移动端开头的思维
CSS3视窗单位vw、vh、vmin、vmax说明
热门推荐
王乐平 技术博客
01-07 1万+
vw、vh做为CSS3中的新单位，已经出来挺久的了，这里也我个人也做一下详细的总结。说明vw、vh、vmin和vmax是CSS3中的新单位，是一种视窗单位，也是相对单位。它们的大小都是由视窗大小来决定的，单位1，代表类似于1%。具体描述如下：vw：视窗宽度的百分比 vh：视窗高度的百分比 vmin：当前较小的vw和vh vmax：当前较大的vw和vh视窗，指的是浏览器可视区域的宽高，也就是wi
手机淘宝视窗viewpoint
weixin_30832143的博客
05-20 88
<script type="text/javascript"> //手机淘宝参考viewport var metaEl=doc.createElement('meta'); var scale=isRetina?0.5:1; metaEl.setAttribute('name','viewport'); metaEl.setAttribute('content','initial-sc...
px、rpx、em、rem 、vw/vh、百分比的区别？
sisterAn的博客
08-06 1892
px：绝对长度单位，来描述一个元素的宽高以及定位信息 rpx：微信小程序独有的、解决屏幕自适应的尺寸单位 em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认16px）em作为字体单位，相对于父元素字体大小；em作为行高单位时，相对于自身字体大小，整个页面内 1em 不是一个固定的值。 rem：相对单位，可理解为”root em”，相对根节点html的字体大小来计算，CSS3新加属性，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，.
px、em、rem、%、vw、vh、vm等单位有什么区别？
IT修真院：初学者转行到互联网的聚集地
11-05 1307
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能。 大家好，我是IT修真院西安许恒倩，一枚正直纯洁善良的web程序员。 今天给大家分享一下官网CSS任务三深度思考中的知识点——px、em、rem、%、vw、vh、vm等单位有什么区别？ （1）背景介绍： 传统的项目开...
复习（h5c3+移动web）
Jiang_XiaoBai007的博客
10-27 401
##第一个阶段复习:H5C3+移动web ###1. H5是什么？ H5是html5，HTML5包含了HTML5，CSS3，JS等技术，可以说是一种技术的集大成者。新增了语义化标签，如等等，在写页面bai的时候直接可以通过语义化标签来du替代div,提高浏览器的解析能力，HTML语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析 #####H5新增了以下的几大类元素: 内容元素: header , nav , footer , section 表单控件: calender , date ,
认识视口的宽度-----vw
weixin_57375608的博客
08-31 467
vw-视口的宽度
移动端viewPoint的理解
轻风细雨_林木木
05-30 466
理解参考：https://v3.bootcss.com/css/ 参考bootSrap手册 移动设备优先 理解。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 代码解析： viewport 表示视口 user-scalable=no（禁用缩放） width=device-width（可见宽度为设备宽度） initial-scal.
前端vh和vw
Anony_me的博客
04-12 4005
1.vh vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，但是设置height:100vh，该元素会被撑开屏幕高度一致。 2.vw vw就是当前屏幕宽度的1%，补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况 ...
移动端获取当前屏幕高度和滚动加可视区域代码
风烟
06-28 1万+
let scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); let curH = window.innerHeight + scrollTop; let docH = Math.max(document.documentElement.clientHeight, document.bo...
移动端获取当前屏幕的高度_手机移动端屏幕宽高详解
weixin_30229479的博客
12-30 5033
### 前因目前的移动端布局，以响应式布局居多，以适应在不同分辨率的屏幕，实现布局的方式可能有很多种，但是不管使用哪种方式，获取设备的可用宽高就能为问题的关键。### 宽高的获取“`document.documentElement.clientWidthdocument.documentElement.clientHeightdocument.body.clientWidthdocument.bo...
javascript 各种得到浏览器宽度和高度的函数
weixin_34392435的博客
09-28 221
2019独角兽企业重金招聘Python工程师标准>>> ...
移动Web学习07-适配单位vw/vh&哔哩哔哩移动端vw单位适配案例
沉睡的猫的博客
04-16 1277
1.1、VW相对单位 前面我们已经学习了rem单位 ，他是一个相对单位、相对于HTML表格字号大小 VW/VH也是一个相对单位，他是相对于视口的尺寸计算结果 VW：viewport width VH: viewport height <meta name="viewport" content="width=device-width, initial-scale=1.0"> 不管是使用vw还是vh这个视口标签一定需要加、因为视口宽度默认是980、加这个可以让视口等于我们设备的宽度 1.2、
什么是视口(viewport)？移动端适配方案有哪些
m0_64711772的博客
03-31 244
什么是视口(viewport)？移动端适配方案有哪些
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值