vw适配方案

最新推荐文章于 2024-06-07 23:26:45 发布
最新推荐文章于 2024-06-07 23:26:45 发布
阅读量117 收藏
点赞数
分类专栏： css 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ioncannontic/article/details/131152879
版权

vw和vh基本使用

vw 和 vh 是相对单位，相对视口尺寸计算结果

  • vw：viewport width(1vw = 1/100 视口宽度)
  • vh：viewport height(1vh =  1/100 视口高度)

vw布局

vw单位尺寸 = px单位数值 / (1/100 视口宽度) 

  • 确定设计稿对应的vw尺寸(1/100 视口宽度)

查看设计稿的宽度---确定参考设备宽度(视口宽度)---确定vw尺寸

vh问题

vh是 1/100 视口高度，全面屏视口高度尺寸大，如果混用可能导致盒子变形

真的想不出名儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue移动端 / PC端适配解决方案
weixin_48862362的博客
11-24 2651
1.开发环境 npm 安装插件​​​​​​ npm install postcss-px-to-viewport --save-dev 2.项目根目录添加配置文件 postcss.config.js > node_modules > public > src postcss.config.js 3.添加配置 module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px'
vue3移动端适配的解决方案（老方案）
12-01
用于《vue3移动端适配的解决方案》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/127734001
react-vw-layout:使用create-react-app脚手架搭建 vw 适配方案 react 16 && react dom 16 搭配使用，一个多页面路由项目 && react-router 4+
05-03
最近在react 上配置使用vw 适配方案，总体表现优秀。所以很多同学们都在观望vw 适配到底行不行，靠不靠谱。 在这里，从我在项目中实战应用下来但经验来说，可行，靠谱！ 简单配置，一劳永逸，高可靠的还原设计师的稿子，给你底气和设计师对标UI。 欢迎挑战还原度，从此做一个自信的前端工程师。哈哈～ 一定要看到底，可能有你会遇到坑的解药！拿走不谢++++ 给个小星星吧 该demo 为vw 适配方案 react 16 && react-router-dom 4+ 搭配使用，一个多页面路由项目. 步骤： 1、创建项目 && 初始化 create-react-app react-vw-layout cd react-vw-layout 2、开启我们的配置之路&&简单配置 react 把配置都隐藏了，需要我们手动来显示配置 npm run eject //Are you sure you want t
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
程序员成长指北
12-16 8085
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言当接到可视化大屏需求时，你是否会有以下疑问????如何做一款定制化的数据大屏？ 开发可视化数据大屏如何做自适应？ vm vh、rem、scale 到底哪种比较好？ 时间不够，有没有偷懒的方法？ 最近在公司开发了一个可视化大屏，开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：大屏之关键...
vue 项目关于不同分辨率的电脑网页适配方案
前端，请指教
04-27 650
【代码】vue 项目关于不同分辨率的电脑网页适配方案。
前端学习之vw,vh适配
qq_45839045的博客
01-07 1596
em em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN 比如父元素font-size:12px; 自身元素如果写成：font-sise:2em;则自身元素用px表示就是24px（相对父元素字体大小）; 但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）； rem rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN 比如根元素（html）设置fon
可视化大屏幕的适配方法-vw/vh
weixin_68531033的博客
10-10 3050
vw和vh也是css中标准的单位，和px,rem, %一样 vw和vh适配方案，按照设计稿的尺寸，将px按比例计算转为vw和vh。1.在src/style下新建一个use.scss文件,定义好设计稿的宽度和高度两个变量。2.使用scss内置的`math.div`函数，定义两个`vw`和`vh`的计算函数。屏幕视口宽度 = 100vw，屏幕视口高度 = 100vh。3.传入具体的像素值，其帮我们自动计算出vw和vh的值。假如设计稿宽高为 1920px = 100vw。首先vw和vh的换算公式如下。
移动适配——vw / vh
weixin_43914599的博客
11-18 488
vw 、 wh、响应式布局
移动web适配:rem适配 vw/vh适配
W261206的博客
06-25 1086
rem适配 vw/vh适配 与两者的区别
Day06-移动适配（vw/vh）
weixin_45831040的博客
09-10 173
目标：能够使用vw单位设置网页元素的尺寸相对单位：相对视口的尺寸计算结果 vw：viewport width 1vw = 1/100视口宽度 vh：viewport height 1vh = 1/100视口高度目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果 vw单位尺寸 1.确定设计稿对应的vw尺寸 （1/100视口宽度） 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）2.vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )vh单位尺寸
一次讲清移动端适配解决方案-rem和vw.docx
10-26
一次讲清移动端适配解决方案-rem和vw.docx
Mobile_Adapter:移动端适配方案（rem 和 vwvh）
05-11
Mobile_Adapter使用create-react-app的前端适配方案px 转 rempx 转 vw 或者 px 转 vh 使用 `create-react-app`脚手架创建项目或者使用本例中两个示例模板创建（`npm install`） 根据不同的适配方案，使用不同的文件...
移动端适配方案.doc
03-13
移动端适配方案 ...移动端适配方案是解决移动端屏幕尺寸和像素密度的差异对网页显示的影响的技术方案，通过了解像素视口概念、视口、像素问题、完美视口和 vw 单位，可以更好地实现移动端网页的适配。
大屏适配解决方案——vw和vh适配方案
xiaoququ的博客
07-03 2402
= 类名需要与项目公共类名作区分，不然会相互影响 ==// index.vue 页面。
完美的响应式布局vw+vh+rem屏幕适配方案！
weixin_41796631的博客
05-06 2981
https://blog.csdn.net/qq_24182885/article/details/81479457
移动适配的另一种方式—— vw / vh
m0_75195798的博客
11-17 2027
移动适配的另一种方式—— vw / vh
Web前端—移动Web第四天（vw适配方案、vw和vh的基本使用、综合案例-酷我音乐）
放下华子我只抽RuiKe5的博客
11-22 431
在移动Web开发的第四天，我们主要学习了vw适配方案、vw和vh的基本使用以及综合案例-酷我音乐。首先，我们了解了vw适配方案，它是一种相对单位，可以根据屏幕宽度进行自适应。接着，我们学习了vw和vh的基本使用，vw表示视口宽度的1%，vh表示视口高度的1%，通过这两个单位可以实现更加精确的布局。最后，我们通过一个综合案例-酷我音乐，将所学知识应用到实际项目中，实现了一个简单的移动端音乐播放器界面。
pc端 如何使用vw实现自适应 vue sass 自定义函数
c327127960的博客
04-23 988
pc端 如何使用vw实现自适应 vue sass 自定义函数
前端性能优化：提升网站加载速度的终极指南
最新发布
喔的嘛呀的博客
06-07 495
综上所述，通过以上优化方案和具体措施，我们可以有效地提升网站的加载速度，改善用户体验，提高转化率，从而在激烈的市场竞争中脱颖而出，取得更好的业绩和口碑。作为前端工程师，我们应该不断学习和探索，不断优化和提升网站性能，为用户创造更好的上网体验。
vhvw适配 vue3
09-17
vh和vw是CSS中的单位，用于实现响应式布局。在vue3中，你可以通过引入全局的scss文件来使用vh和vw适配方案。首先，在assets/css文件下新建一个global.scss文件，定义vw和vh的计算函数。然后，在vue.config.js文件中进行引入，将全局scss文件导入到项目中。这样，你就可以在Vue组件中愉快地使用vh和vw进行适配了。 代码示例: 在global.scss文件中定义vh和vw的计算函数: ``` $vm_base: 1920; $vh_base: 1080; @function vw($px) { @return ($px / $vm_base) * 100vw; } @function vh($px) { @return ($px / $vh_base) * 100vh; } ``` 在vue.config.js文件中引入global.scss: ``` css: { loaderOptions: { sass: { prependData: `@import "@/assets/css/global.scss";` } } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值