【鸿蒙开发从0到1 day06】

一.视口

视口:用来约束html,html和设备的大小进行适配
(注释视口)


添加视口

二倍图

概念:设计稿里面每个元素的尺寸的倍数

作用:防止图片在高分辨率屏幕下模糊失真

可以使用pxcook

如果我们的原图大小是设计图的两倍,可以使用pxCook去原图抓取到设计图的大小

开发====>两倍===>设计

三.适配方案

复制代码
宽度适配: 宽度自适应
百分比布局
flex布局
等比适配:宽高等比缩放
rem,是相对单位,相对于HTML标签的字号计算结果
1rem =1 HTML字号大小

如何知道屏幕尺寸,从而知道html字体大小

复制代码
因为rem是相对html里面的字体大小来改变尺寸
所以你想要实现适配,根据html的尺寸来设置html里面的字体大小
如何知道屏幕尺寸,从而知道html字体大小

运行结果:

rem-flexible.js

复制代码
flexible.js 是手淘开发出的一个用来适配移动端的js 库。

核心原理就是根据不同的视口宽度给网页中 html根节点设置不同的iont-size。

引入js文件

核心原理: 通过js来获取视口的宽度,然后设置html里面的字体大小

复制代码
rem终极方案
     1.引入js文件
      2.给盒子设设置rem尺寸

1.rem值的计算-px转rem

复制代码
1.确定设计稿的尺寸(375px),等分成10份,其中一份37.5
将设计稿的px/37.5就等于rem的值

下载一个px2rem的插件,然后把设计搞得1/10的大小写进去,在页面中就会帮你自动转换

运行结果:

在调试的时候,你要改成你设计稿的大小

2.vm

相对视口尺寸计算结果

vw: viewport width

1vw = 1/100视口宽度

vh:viewport height

1vh = 1/100视口高度

复制代码
### 2,px转vw
px转vw --> 确定视口的大小(375),将视口大小等分成100份
将设计图的尺寸 / 3.75 得到vw的值

四.总结

本章主要学习了移动端开发中,如何从把网页中的图片大小转换成移动端的图片大小,以及移动端中如何将网页端的px单位转成移动端的单位方法,以及在vscode中用到的一些插件

相关推荐
鸿蒙小白龙1 小时前
OpenHarmony 与 HarmonyOS 的 NAPI 开发实战对比:自上而下与自下而上的差异解析
harmonyos·鸿蒙·鸿蒙系统·open harmony
鸿蒙小白龙3 小时前
OpenHarmony平台大语言模型本地推理:llama深度适配与部署技术详解
人工智能·语言模型·harmonyos·鸿蒙·鸿蒙系统·llama·open harmony
某柚啊3 小时前
iOS移动端H5键盘弹出时页面布局异常和滚动解决方案
前端·javascript·css·ios·html5
huangql5201 天前
截图功能技术详解:从原理到实现的完整指南
前端·html5
Bert丶seven1 天前
鸿蒙Harmony实战开发教学(No.4)-RichText组件基础到高阶介绍篇
华为·harmonyos·arkts·鸿蒙·鸿蒙系统·arkui·开发教程
鸿蒙小白龙1 天前
openharmony之分布式蓝牙实现多功能场景设备协同实战
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
鸿蒙小白龙1 天前
openharmony之分布式购物车开发实战
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
鸿蒙小白龙1 天前
openharmony之分布式相机开发:预览\拍照\编辑\同步\删除\分享教程
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
●VON1 天前
重生之我在大学自学鸿蒙开发第九天-《分布式流转》
学习·华为·云原生·harmonyos·鸿蒙
Bert丶seven2 天前
鸿蒙Harmony实战开发教学(No.7)-Image组件基础到进阶篇
华为·harmonyos·arkts·鸿蒙·鸿蒙系统·arkui·开发教学