Day09_单位转换-综合案例
Day09_单位转换-综合案例
背景 : 前面我们已经把HarmonyOS生态系统中的PC端和移动端的项目进行了开发 ; 但是我们目前使用的单位是px ( 像素 ) 单位 , 是一种固定形式的布局, 但是再实际开发的时候我们可使用的单位还是有很多的 ; 本节课我们主要学习的就是常见的单位
今日学习目标
- 常见单位
- 单位转换
- 不同单位再Harmony生态里面的应用
- 常见的Harmony生态中APP的布局方法
- 综合案例
1. 常见单位
背景 : 实际开发的过程中布局单位有很多, 每一种单位代表了不同的含义 , 接下来要详细为大家解释一下常见的单位有哪些
1) 固定单位px
含义 : 单位名称为像素，可以理解成在当前电脑分辨率的情况下是固定单位 ; 但是像素px是相对于显示器屏幕分辨率而言的。像素的使用性特别广。使用px定义文字，无论用户怎么设置，都不会改变大小。
案例 :
<style>
*{margin:0;padding:0}
/* 在这里需要注意的是px为固定单位, 就算使用对应的方法,把浏览器显示比例放大或者是缩小, 元素的大小和字体的大小仍然是固定的值 */
div{
width:200px;
height:200px;
background-color:red;
font-size:30px
}
</style>
<div>我是一个普通的div</div>
2) 百分比单位%
含义 : 百分比单位是占容器或者是父元素的百分之多少 , 一般应用于宽度高度上面比较多 ; 同时在窗口的自适应里面应用频率比较高 ; 如果高度使用百分比单位 , 推荐一定要添加 html,body{height:100%} 此代码; 因为元素默认高度是自适应的 ( height:auto ) ;
案例 :
<style>
/*3)如果想要让div占满整个窗口的大小 需要把子元素设置成高度100% 同时添加代码*/
body,body{
height:100%
}
body{
/*2)当付父元素有固定的高度的话, 则子元素会有自己的高度; 百分比使用父元素这里取值占比*/
/*height:100px;*/
}
div{
width:500px;
/*此时高度为固定的高度*/
/*height:500px;*/
background-color:red;
/*1)注释掉固定高度换成百分比单位*/
/*高度使用百分比实现不了对应的效果*/
height:50%;
}
</style>
<body>
<div></div>
</body>
3) 相对单位em
含义 : 单位名称为相对长度单位。它没有一个固定数值，支持小数点后三位数，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
注意 : 若父元素设置了文本大小，这父级大小会随文本大小而改变，会继承父级元素的字体大小。
注意 : em是一个单位 , 可以应用于字体上面, 也可以应用于宽度高度上面均可以实现效果; 简而言之, 只不过是根据字体大小进行缩放的一个倍数
案例1 :
<style>
*{
margin:0px;
height:0px;
}
div{
width:300px;
height:300px;
background-color:red;
/*父元素字体大小*/
/*当父元素拥有自己的字体大小,子元素没有自己的字体大小,则em参照的是父元素字体大小;*/
/*10em=200px*/
font-size:20px
}
/*在这里:em是相对单位,元素本身没有字体大小, 父元素也没有字体大小则参照的是默认字体:16px*/
/*此时10em=160px*/
p{
width:10em;
height:10em;
font-size:1em;
}
</style>
<div>
<p>
千锋教育
</p>
</div>
案例2 :
<style>
*{
margin:0px;
height:0px;
}
div{
width:300px;
height:300px;
background-color:red;
font-size:20px
}
/* 在这里父元素拥有自己的字体大小; 子元素也有自己的字体大小; */
/* 当有自己的字体大小的时候, 我们em参照的是以自己的字体为参照 */
/*10em=180px*/
p{
width:10em;
height:10em;
font-size:1em;
font-size:18px;
}
</style>
<div>
<p>
千锋教育
</p>
</div>
4) 相对单位rem
含义 : rem是CSS3新增的一个相对单位（root em，根em），是相对HTML根元素。通过它既可以做到只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 目前，除了IE8及更早版本外，所有浏览器均已支持rem。
案例 :
<style>
*{
margin:0px;
height:0px;
}
div{
width:300px;
height:300px;
background-color:red;
font-size:20px
}
/* 在此案例中,子元素, 父元素均有自己的字体大小; */
p{
width:10rem;
height:10rem;
font-size:1rem;
font-size:18px;
}
</style>
<div>
<p>
千锋教育
</p>
</div>
5) vw和vh
含义 : vw和vh代表了视口的宽度和视口的高度 , vw代表的是viewport width 视口的宽度 ; vh代表的是viewport height 视口的高度 ; 视口指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）; 在这里的视口宽度视口高度我们代表的是 : 视觉视口 ;
注意1 : width:100vw; 代表的是一个完整的视口宽度 ; height:100vh; 代表的是一个完整的视口高度 ; 如果要考虑单位转换, 则需要考虑不同屏幕窗口的大小 ;
注意2 : 1vw = 代表了视口宽度的 1% 1vh = 代表了视口高度的 1% ;
注意3 : 如果是iPhone678手机中 , 手机屏幕尺寸宽度375px 100vw = 375px 1vw = 视口宽度的1% = 3.75px
注意4 : vw和vh是单位 , 可以应用于宽度,高度, 字体大小 ; 如果宽度高度使用同一个单位的话 , 则能出现一个正方向, 同时能进行伸缩显示; vw再实际开发的时候使用频率域rem一样; 都有使用的;
案例 :
<style>
*{margin:0;padding:0}
div{
width:10vw;
height:10vw;
background-color:red;
font-size:2em
}
</style>
<div>
你好
</div>
6) vmin和vmax
含义 : vmin和vmax代表了视口宽度和视口高度里面的最小值和最大值 ; vmin 代表的是 vw 和 vh 中的最小值 ; vmax 代表的是 vw 和 vh 中的最大值 ; 主要考虑到横纵屏幕切换的时候 , 让我们的界面变得更加美观 ; 但是再实际开发过程中 , 使用vmin的频率比较高 ;
特点 :
<style>
*{margin:0;padding:0}
html,body{height:100%}
body{
display:flex;
flex-direction:column;
}
header{
height:10vmin;
background-color:blue;
}
section{
flex:1;
background-color:yellow;
}
footer{
height:10vmin;
background-color:orange;
}
/*切换到设备模拟器之后,切换横纵屏幕;头部所占的高度是一样, 使用vmin 的时候, 该单位参照的是视口中的最小值; */
</style>
<body>
<header>头部</header>
<section>主体</section>
<footer>尾部</footer>
</body>
2. 单位转换
1) px to rem
像素单位和rem单位进行转换的时候 , 可以使用插件进行转换, 除了插件转换之外 , 还可以自行转换rem也是可行的; 接下来我们使用传统的方式来恢复单位转换 ;
<!--单位转换px to rem-->
<style>
*{margin:0;padding:0}
/*
设计稿测量的大小为 : 300px * 300px
在这里我们需要注意的是 需要讲300px*300px 转换成rem单位使用
1) 了解 300px * 300px 是物理像素
2) 首先需要讲物理像素转换成可以写在代码里面的CSS像素: 物理像素 / dpr = CSS像素
得出 : 300/2 * 300/2
最终 : 150px * 150px 这个距离是我们CSS像素
3) 最终开发的时候我们需要讲CSS像素中的数值转换成rem单位;
rem是相对于根目录字体大小进行缩放的倍数; 如果想要转换成rem我们需要知道 1rem=16px
所以编码的时候如果想要使用rem单位
则需要讲CSS像素,继续将距离除以赌赢的字体大小
w : 150 / 16 = 9.375rem
h : 150 / 16 = 9.375rem
4) 总结一点 : 如果想要转换成rem单位, 我们需要将 测量的距离 / dpr / font-size 即可完成
5) 需要注意的是 每次除以对应的根目录字体大小不好完成, 但是我们可以调整根目录字体大小;也是可以的
例如:调整根目录字体大小为:50px;
300 / 2 /50 = 300 / 100 =0.3rem
也许有的小伙伴会有疑问, 为哈两次计算的结果不一样 ? 原因点就是根目录字体大小调整了;
*/
div{
width:9.375rem;
height:9.375rem;
background-color:red
}
</style>
<div>
</div>
2) px to vw
乍一看像素单位和vw单位之间没有任何联系 , 但是像素单位和vw之间也存在千丝万缕的关系 , vw代表的是视口的距离 , 视口的距离默认就是像素单位; 100vw代表了一整个完整的视口 ; 所以要考虑像素和vw单位必然得考虑手机机型;
注意 : 需要注意的是 , 像素和vw单位转换的时候 , 比较复杂, 实际开发的时候我们可以使用插件完成
<style>
/*
1) 以iPhone45为例
100vw=320px ? 为啥是320px 因为手机屏幕视口的宽度为320px
转换
1vw=3.2px
提问
1px=?vw 需要等式左右除以320即可
1px=0.3125vw
100px=31.25vw
2) 以iPhone678为例
100vw=375px ? 为啥是375px 因为手机屏幕视口的宽度为375px
转换
1vw=3.75px
提问
1px=?vw
1px=0.2667vw
100px=26.67vw
*/
</style>
<div>
</div>
3. 不同单位再Harmony里面的应用
开发过程中常见的单位以rem和vw和vmin使用的频率比较高 ; 所以这些方法一定要知道
4. 综合案例
案例1
案例2
案例3
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
28
0- 0
已为社区贡献7条内容
所有评论(0)