关于HarmonyOS的学习

day8

一、移动端开发

移动布局区域的类型 网页区域（设计稿） 区域（设备类型）

理性区域 => 当网页区域等于可视区域的时候，可以得到理性区域 => 设置了viewport后，可以让网页区域变成和可视区域一样

单位px px 像素，画素。像素其实就是屏幕的一个一个的小点，分辨率越高，屏幕的清晰度越好。分辨率越高，屏幕上能显示的像素点越密集。一般在pc端，一个像素点 是网页里面的一个像素点。当你把网页直接切换到手机模拟器里面的时候，其实一个像素点对应的就不是网页里面的一个像素点了

像素分类 => 物理像素：就是屏幕的上的像素，物理像素数量是固定的 => 逻辑（虚拟）像素：其实咱们进行网页开发使用的像素 => 正常情况下，一个网页像素和物理像素是相等的。但是随着屏幕越来越高清，出现了2k、4k屏幕，因此逻辑像素和物理像素有时候是不相等的 => 尤其是在手机端里面，屏幕更小能显示是像素点更少，为了高清能让用户有更好的体验，出现了高清屏，苹果手机第一个使用的。高清屏（retina）里面其实显示的是双倍的像素点 => 也把高清屏叫做2倍屏

单位rem 主要是用来做屏幕适配的 在移动端使用最多，pc端更多的使用的依旧是px，可以在使用px的时候对网页进行一些限定的处理

单位em 相对于容器字体大小的

vw和vh vw表示的是视口的宽度 vh表示的是视口的高度 vw把屏幕的宽度划分成了100vw，vh把屏幕的高度划分成了100vh 可以实现元素的自适应，不需要参照物，直接参照的是设备

二、宽高自适应

宽高自适应

为了自适应，布局的时候可以让内容增加或者减少，这样的开发会更便利 自适应 => width:auto;

高度自适应 => height:auto;

宽高自适应的属性 => min-width 最小宽度，可以给元素一个宽度的限定，如果这个宽度缩小到设置的最小宽度，那么宽度就不会再改变。如果没有缩写到最小宽度，那么元素可以自适应，可以防止网页变形 => max-width 最大宽度，可以给元素一个宽度的限定，如果这个宽度是小于最大宽度的，那么就是自适应的 => min-height 最小高度 => max-height 最大高度

三、渐变属性

1.线性渐变，从一个方向渐变到另一个方向 background: linear-gradient(to bottom, red, yellow) 默认从上往下 to bottom 从下往上 to top 从左到右 to right 从右到左 to left

2.从一个角到另一个角渐变（deg表示度数） background: linear-gradient(to right bottom, red, yellow) 从左上到右下 to right bottom 从左下到右上 to right top 从右上到左下 to left bottom 从右下到左上 to left top

3.颜色值后面的百分比指的是一个颜色值从什么位置开始进行渐变开始 径向渐变：从圆心到圆四周的渐变 background-image: radial-gradient(green 10%, yellow 30%, red)

4.浏览器私有前缀 当一个属性还没有正式成为标准的一部分，为了浏览器能更好的支持，因此提出了浏览器私有前缀的东西 => 解决兼容问题 私有前缀 => -webkit- 谷歌 => -moz- 火狐 => -o- 欧朋 => -ms- IE 要各个浏览器都支持 => -webkit-border-radius => -moz-border-radius => -o-border-radius => -ms-border-radius => border-radius

四、2D 3D属性

1.透视属性（景深），近大远小 perspective: 500px

2.transform 变形属性 元素进行位移、缩放、旋转 值1表示x，值2表示y，值3表示z，值4表示度数，前三个值必须写数值，1表示要沿着该轴进行旋转，0表示不旋转

将2d转为3d transform-style: preserve-3d

translate 位移，就是元素的位置发生改变，和相对定位类似 => translateX() => translateY() => translateZ() 属于3D => translate('值1表示的是x位置', '值2表示的是y位置')

scale 缩放，可以把元素进行放大或者缩小 => scaleX() => scaleY() => scale('值1表示水平', '值2表示垂直') 属性值 => 大于1表示放大，小于1表示缩小，但是不能给0 => 可以给小数

rotate

旋转 属性 => rotateX() 上下 => rotateY() 左右 => rotateZ() 顺时针或者逆时针（绕圈圈）

注意点 => 两个transform之间会进行覆盖，但是一个transform可以写多个属性值

3.变形原点属性 transform-origin: left top;