scroll={{y:'calc(100vh-表头与顶部的距离px)'}}//根据页面视口区域高度计算表格高度，以确定什么时候出滚动条exportfunctiongetHeight(){ letclientHeight

body{background:#000;display:flex;align-items:center;height:100vh;justify-content:center;}.watch-face

postcss-px-to-viewport-8-plugin适配简述postcss-px-to-viewport-8-plugin是一个PostCSS插件，用于将以像素为单位的样式转换为视口单位（如vw、vh

一，px（像素）：像素是屏幕上显示的最小单位，它是固定的，不随页面缩放而改变大小。在响应式设计中，使用像素单位可能会导致布局在不同屏幕尺寸上显示不一致。例如：现在在你电脑上一个字为16px，大小正好，可能到比你分辨率要高的电脑上，字体16px大小不变，但是分辨率有变化，导致字体在别的电脑上可能会导致不适配的情况发生二，em：em是相对长度单位，它是相对于父元素字体大小的倍数。如果父元素的字体大小为

*{margin:0;padding:0;list-style:none;}.content{width:800px;height:100vh;background-color:black;margin

轮播图之渐进淡出css样式.bg{width:100vw;height:100vh;overflow:hidden;background-image:url('../..

padding:0;box-sizing:border-box;}body{display:flex;justify-content:center;align-items:center;height:100vh

1.简单的线性渐变.layout{width:100%;min-height:100vh;background:linear-

会拐弯的步骤条效果如下代码部分这边我是自己封装了一个step.vue的组件,因为需要响应式，我这边需要兼容4:3和16:9的页面(vh,vw这些是封装了样式计算宽高完成响应式布局)，所以加了一些宽度的判断

实现一个元素水平和垂直居中元素示例：居中的内容flex布局.container{display:flex;justify-content:center;align-items:center;height:100vh

Js日历*{margin:0;padding:0;box-sizing:border-box;}.date{width:59vh;height:59vh;margin:0auto;background-color

开发大屏主要是两方面的工作：大屏之关键-前期的自适应适配根据ui稿绘制图表，调细节方案实现方式优点缺点vwvh1.按照设计稿的尺寸，将px按比例计算转为vw和vh1.可以动态计算图表的宽高，字体等，灵活性较高

drag/*外部放置滑动区域*/.container{width:100%;height:100vh;display:flex;justify-content:center;align-items:center

body{margin:0;padding:0;}#credit{width:100vw;height:100vh;background:black;background-size:cover;}Cesium.Ion.defaultAccessToken

微信小程序中的scroll-view，如果纵向滚动的话，需要设置height，对于全局的scrollview，直接设置100vh就可以了，对于局部的，高度不能写死，只能自己计算了微信小程序为了适配，引入了

scrollView的bindscrolltolower是实现滚动加载的方法，如果不注意会发生无法触发的情况，需要两个条件1.page未设置成100vh,在app.wxss设置page{height:100vh

裁剪视频时间#裁剪视频并且重新编码ffmpeg-ss0.962-iinput.mp4-presetslow-to23.852-c:vh264_nvenc-presetmedium-profile:vhigh-youtput.mp4

html,body{position:fixed;top:0;left:0;height:100vh;overflow:scroll;}实现方式超级简单，但是我调了好多次都没有实现效果，研究了半天发现是页面缓存的问题

可以使页面无橡皮筋效果.layout{position:fixed;top:0;bottom:0;width:100%;height:100%;overflow:hidden;}不要将手机页面的高度设为100vh

vw和vhwidth：100vwheight：100vhvw：100vw是占满屏幕宽度vh：100vh是占满屏幕高度没有滚动条的时候100vw=100%有滚动条的时候100vw包含滚动条，窗口大小不变100%

Vulnhub靶机]DriftingBlues:4靶机渗透思路及方法（个人分享）靶机下载地址：https://download.vulnhub.com/driftingblues/driftingblues4_vh.ova

阅读本篇文章,你将大致了解到手机专用的自适应方案--移动端REM的应用什么是remcss中长度单位有很多,比如:px,em,rem,vh,vw,ex,in,pt等.其中rem是根据根元素html的font-size

rem是相对于html大小的比例值rem是相对于html大小的比例值vh/hw是以屏幕(视口)为准的,和百分百%很相似不管屏幕多大都是把屏幕分成100份----特别注意PC端的兼容性问题,ps:手机浏览器是没有兼容性问题的

.uni-margin-wrap{width:100%;}.swiper{//#ifndefAPP-PLUSheight:calc(100vh-44px-50px);//非APP平台下生效//#endif

但公共样式文件里面还没有编写内容在这里我将一一讲解公共样式内应该有什么样式,和为什么首先给page添加高度和背景色,当然这个背景色可以在app.vue内添加page{/*设置page高,让每个页面的最小高度为整个视窗的高*/min-height:100vh

align-items:center;justify-content:center;font-size:30px;color:#fff;background:rgba(0,0,0,0.8);height:100vh

记录一下小程序转H5遇到的问题目录1.图片src无效时显示白框2.请求显示跨域3.小程序中样式写100vh正好满屏，在H5中100vh会因为标题栏的问题超出一部分4.H5端不支持保存图片的API5.H5

发送效果HTML//这里是一个svg的占位SendCSS#send-btn{display:flex;align-items:center;justify-content:center;height:100vh

pxpx表示像素，所谓像素就是呈现在显示器上的一个个小点，每个像素点都是大小等同的，所以像素为绝对长度单位。在移动端中存在设备像素比，px实际显示的大小是不确定，之所以认为px为绝对单位，在于px的大小和元素的其他属性无关emem是相对长度单位。相对于当前对象内文本的字体大小。如果当前对象内没有设置，则相对于浏览器的默认字体尺寸（1em=16px）为了简化font-size的换算，可以在css中的

container{display:flex;.nav-left{background:blue;}.main{height:calc(100vh);background:yellow;}}这样不生效，

重新触发授权的处理逻辑实现获取当前位置，计算目标地址与当前位置的距离触发对选中的信息展示弹窗实现开始导航操作需要源码私我第一步：使用map组件第二步：定义样式.container{width:100%;height:100vh

1.命令行实操1.1解码音视频文件ffmpeg-c:vh264-c:alibfdk_aac-i10s.mp410s_cmd_out.yuv-fs16le10s_cmd_out.pcm同一种格式的解码，解出来的大小是一样的

目前主流的移动端适配的两种方案1.flex+rem单位做适配效果（比如淘宝和小米移动端）当前市场最多2.flex+viewportwidth/vh单位做适配效果（比如B站移动端）新兴，马上的一个趋势让flex

代码：Document*{padding:0;margin:0;}/*1vw=1/100视口宽度1vh=1/100视口高度（用不到，了解）*/.box{width:50vw;height:50vw;background-color

使用vw/vh布局，可以实现视口宽度不同，网页元素宽高等比缩放效果，比rem的优势在于，在代码中直接写vw/vh就能实现移动适配效果，不用引入js文件，比rem更简单，但有兼容问题，目前大厂已经转型到了

移动适配——vw/vh、使用vw单位设置网页元素的尺寸，实现在不同宽度的设备中，网页元素尺寸等比例缩放相对单位vw：viewportwidth视口的宽1vw=当前屏幕宽度的1/100vh：viewportheight

整体思路整体宽高布局100vw，100vh，每个模块的宽高：使用vw，vh字体大小适配：px转化为vw、vh处理公共样式：新建一个rem.scss文件图表根据屏幕尺寸变化自动resize()：自定义指令图表里的文字

emem作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN比如父元素font-size:12px;自身元素如果写成：font-sise:2em;则自身元素用px表示就是24px（相对父元素字体大小）;但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）；remrem作用于非根元素时，相对于根元素字体大

那么今天，我们就一起来对移动适配的另一种方式——vw/vh，进行学习。

Vue前端适配自定义vh和vw方案话不多说，直接上代码1、在assets/css文件下新建global.scss，代码如下：以适配屏幕为1920x1080为例，其他尺寸根据具体需求修改即可。

rem适配1.rem单位rem是一个相对单位，1rem就是html文字的大小比如html{  font-size:35px;}则此时1rem就是35像素.2.如何让网页的内容随着设备的不同而自动适配大小?媒体查询mediaquery可以自动检测视口的宽度。媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小.使用媒体查询,根据不同的视口宽度,设置不同的(html)根字号，就完成了适配语法：

背景公司需要开发一个用于4k大屏展示的项目，所以给到的UI视觉稿也是参照4k屏进行了设计（单位为px），而我们开发所用的屏幕多为1080p/2k屏，为了让大家开发时不用关注适配问题，我设计了这套基于vw/vh

vw适配原理实现在不同宽度的设备中，网页元素尺寸等比缩放的效果vw单位尺寸确定设计稿对应的vw尺寸（1/100视口宽度）vw单位的尺寸=px单位数值/（1/100视口宽度）在实际的生产环境中，vw、vh

vw/vh是什么？

目录文章目录版本说明目录移动Web第四天01-vw适配方案vw和vh基本使用vw布局vh布局混用问题02-综合案例-酷我

参考文章参考视频main{height:100vh;scroll-snap-type:yproximity|mandatory;/*proximity是接近时触发翻页，mandatory是强制翻页*/overflow-y

%百分比4.vw和vh5.vmin和vmax6.vm7.ch8.ex3.总结1.单位类型与相对基准单位名称单位类型（相对/绝对）相对基准px相对屏幕像素缩放后的尺寸百分比相对font-size相对于继承

视窗高度（vh）：相对于视口（浏览器窗口

css部分.content{display:block;/*height:100vh;*/margin-top:85rpx;}如上注释height即可

（PLC以VB、VH为例）河北