前端(移动端)学习笔记

小刘私坊

已于 2023-05-09 20:46:30 修改

阅读量602

点赞数 1

分类专栏：前端文章标签：前端学习笔记

于 2023-05-09 20:06:35 首次发布

本文链接：https://blog.csdn.net/python_ghost/article/details/130587752

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

PC端网页和移动端网页的区别：

PC端屏幕大，网页固定版心
移动端屏幕小，网页多数为100%

在谷歌浏览器中可以调试移动端网页的代码

屏幕尺寸：

屏幕尺寸指的是对角线的长度,一般用英寸来度量

在这里插入图片描述

分辨率：

PC分辨率

1920*1080

1366*768

…

缩放150%

（1920/150%）*(1080/150%)

总结：硬件分辨率（出厂设置）

缩放调节分辨率（软件设置）

移动端主流的设备分辨率：

在这里插入图片描述

视口：

使用meta标签设置视口宽度，制作适配不同设备宽度的网页

手机屏幕尺寸不一样，网页宽度为100%
网页的宽度和逻辑分辨率尺寸相等

不设置meta，默认情况下，网页宽度和逻辑分辨率不相等

目标:网页的宽度和逻辑分辨率尺寸相等

解决办法:添加视口标签

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 viewport  视口
 width=device-width   视口宽度=设备宽度
 initial-scale=1.0  缩放1倍 (不缩放)

二倍图：

图片分辨率，为了高分辨率下图片不会模糊失真

市场上设计稿参考iphone6/7/8，设备宽度375产出设计稿
二倍图设计稿的尺寸750px

布局：

百分比布局：

百分比布局，也叫流式布局

效果：宽度自适应，高度固定

flex布局：

给父盒子设置

子盒子会按主轴均匀排序

justify-content：

调节主轴的对齐方式

/* 弹性盒    默认以主轴x轴对齐*/
display: flex;

/* 调节主轴的对齐方式
flex-start 默认值 起点开始依次排列
flex-end  终点开始依次排列
center  沿主轴居中排列
space-around 沿主轴均匀排列，空白间隔分布在弹性盒子两侧
space-between  沿主轴均匀排列，空白间隔分布在相邻盒子之间
space-evenly   沿主轴均匀排列，弹性盒和容器之间的间距相等
*/
justify-content: space-evenly;

align-items：

侧轴的对齐方式

/* 
align-items  侧轴的对齐方式
flex-start 默认值 起点开始依次排列
flex-end 终点开始依次排列
center  沿侧轴居中排列
stretch 弹性盒子沿着侧轴被拉伸至铺满容器
*/

align-items: stretch;

flex-direction：

改变主轴的方向

/* flex-direction改变主轴的方向
column  主轴是y轴
column-reverse
row   默认值  主轴是x轴
row-reverse
*/
flex-direction: row;

flex-wrap:

是否换行

/* 
flex-wrap 是否换行
nowrap 默认值  不换行
wrap  换行
wrap-reverse
*/
flex-wrap: wrap-reverse;

添加给子元素:

/* 修改弹性盒子的伸缩比 */
flex: 1; /*占用父盒子的剩余尺寸*/

移动适配：

rem：

长度单位

效果:屏幕宽度不同，网页元素的尺寸不同（等比缩放）

相对单位
rem单位相对于html标签的字号计算结果
1rem=1 HTML字号大小

媒体查询：

手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号 —媒体查询

媒体查询能够检测视口的宽度，编写差异化的css样式

当某个条件成立，执行对应的css样式

语法：

@media  媒体类型  and|not|only (媒体特性){
    //css代码
}

媒体类型：

all 用于所有设备
print 用于打印机和打印预览
screen 电脑屏幕平板电脑智能手机

问题2

设备宽度不同，HTML标签字号设置多少合适

设备宽度大，元素尺寸就大

设备宽度小，元素尺寸小

将网页等分成10份，HTML标签的字号为视口宽度的 1/10

@media screen and (min-width: 320px) {
    html {
        /*根字号*/
        font-size: 32px;
    }
}
@media screen and (min-width: 375px) {
    html {
        font-size: 37.5px;
    }
}
@media screen and (min-width: 414px) {
    html {
        font-size: 41.4px;
    }
}

工作中，书写代码的尺寸要参考设计稿的尺寸，设计稿中是px还是rem？

如何确定rem的数值

1:根据视口宽度，设置不同的HTML标签字号
2：书写代码，尺寸是rem单位
2.1：确定设计稿对应的设备的HTML标签字号
2.2 查看设计稿宽度–确定参考设备宽度(视口宽度)–确定根字号（1/10视口宽度）
3.量取的设计稿的宽度87px87px

使用ps量取，需要除以2（二倍图）

4.计算rem单位的尺寸
N37.5=87/2 N=87/2/37.5
rem单位的尺寸=px单位的值/2/根字号

使用pxcook，就不需要除以2

flexible：

使用flexible.js 实现再不同宽度的设备中，网页元素尺寸等比缩放效果

flexible.js 是手淘开发的一个用来适配移动端的js文件
原理：根据不同的视口宽度，给html根节点设置不同的font-size

<script src="./js/flexible.js"></script>

less文件：

目标：使用less运算写法完成px到rem单位的转换

less支持计算写法

less浏览器不识别，把less语法快速编译生成css代码

单行注释不会编译到css文件。多行会编译到css文件

less是一个css预处理器，less文件后缀为less
扩充了css语言，使css具备一定的逻辑性，计算能力

Easy Less插件：

vscode插件
作用：less文件保存自动生成css文件

更改less编译后的路径

（shift+ctrl+p）—》输入 settings.json

"less.compile": {
    "out": "../css/"
  },

计算：

.box {
  width: 100+10px;
  width: 100-10px;
  width: 100 * 2px;
  /* 
  除法
  */
  width: (68/37.5rem);
  height: (29/37.5rem);
}

嵌套：

& 表示当前选择器

缩进位置

.father {
  width: 200px;
  height: 200px;
  background-color: yellow;
  .son {
    width: 80px;
    height: 80px;
    background-color: rebeccapurple;
    // & 表示当前选择器 .son
    &:hover {
      color: #fff;
    }
  }
  &:hover {
    background-color: aqua;
  }
}

变量：

@加变量名

定义变量

// 变量 --用来存储数据的

// 1 定义  2使用
@width: 20px;
@height: @width+10px;
@colors: red;

.father {
  width: @width*3;
  height: @width*3;
  background-color: @colors;
  .son {
    width: @width;
    height: @width;
    color: @colors;
    background-color: yellow;
  }
}

导入其他less文件：

@+import 文件路径

@import './01体验less.less';
@import './02-计算less.less';
@import './03嵌套.less';
@import './04变量.less';

禁止导入：

单行注释加out:false

// out:false

注意：

保存会自动编译成css文件

settings.json文件修改保存位置

html文件内导入css文件即可

vm/vh:

相对单位

相对于视口的尺寸计算结果

100vw=100%视口宽度 1vw=1/100视口宽度

100vh=100%视口高度 1vh=1/100视口高度

1:确定设计稿对应的vw尺寸  （1/100视口宽度）
   查看设计稿宽度--确定参考设备宽度(视口宽度)---确定vw尺寸
   
   375px=100vw  1vw=3.75px
   
 2：vw单位的尺寸=px单位数值/(1/100视口宽度)

注意：相对于屏幕宽高，屏幕变化也会发生变化，不需要flexible.js文件

平面转换：

改变盒子再平面内的形态（位移，旋转，缩放）

2D转换

属性:transform

位移：


transform：translate(水平移动距离，垂直移动距离)
取值：
  像素单位数值
  百分比(参照盒子自身的尺寸)
  
x轴正向为右，y轴正向为下

translate()  只给出一个值  表示x轴移动的距离
单独设置某个方向移动的距离   translateX()   translateY()

旋转：

transform:rotate(角度)
角度单位是 deg

取值 
正 顺时针旋转
负 逆时针旋转

设置旋转原点：

transform-origin

改变转换原点

默认原点是盒子中心点

transform-origin:原点水平位置 原点垂直位置
取值：
 方位名词:(left   top  bottom center  right)
 像素单位数值
 百分比(参照盒子自身尺寸)

多重转换：

 transform: translate(600px) rotate(360deg);

需要先平移再旋转，因为旋转会改变坐标轴方向，需要提前设置好平移

原理

旋转会改变坐标轴方向
先写旋转，后面的转换效果的轴以转换后的轴为准，影响到转换结果

缩放：

语法

transform:scale(倍数)
transform:scale(x轴倍数，y轴倍数)
一般情况下scale 设置一个值，表示x轴和y轴是等比例缩放
scale值大于1 表示放大， 小于1 表示缩小

渐变背景：

linear-gradient

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

设置透明加半透明黑色

background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.5)
            );

移动时间：

transition

哪个需要动作给谁设置

transition: all .5s;

透明度：

opacity

使图片或背景透明

opacity: 0;

空间转换：

X,Y,Z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

空间转换也叫3D转换

transform

空间位移：

transform: translate3d(x,y,z); 
transform: translateX(100px);
transform:translateY(100px);
远离眼睛方向 负值  
对着眼睛方向 正值
transform: translateZ(-100px);
            
取值:
  正负都可以
  像素单位数值
  百分比

注意

z轴方向的位移需要给父盒子设置透视

透视：

z轴是视线方向，移动效果是距离的远或近，电脑屏幕是平面的，无法观察远近效果

perspective 实现透视效果

perspective  添加给父级
perspective:值
取值：像素单位数值， 数值一般在800px-1200px
作用：空间转换时，为元素添加近大远小，近实远虚的视觉效果

透视距离也叫视距，就是人的眼睛到屏幕的距离

在这里插入图片描述

空间旋转：

绕着旋转轴旋转

/* transform: rotateZ(360deg); */

/* transform: rotateX(60deg);
transform: rotateX(-60deg); */

transform: rotateY(60deg);
transform: rotateY(-60deg);

立体呈现：

写父盒子位置

transform-style:preserve-3d
使子元素处于真正的3d空间

左手法则：

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

动画：

animation添加动画效果

多个状态之间的变化过程，动画过程可控(重复播放，最终画面，是否暂停)

动画实现步骤：

1：定义动画
/* 1:定义动画 
@keyframes 动画名称{
from {}
to {}
}
*/
@keyframes change {
    from {
        width: 200px;
    }
    to {
        width: 600px;
    }
}

2：使用动画

/* 2 使用动画 */
/* animation: 动画名称 动画花费时长; */
animation: change 2s;

动画属性：

animation：动画名称  动画时长  速度曲线  延迟时间  重复次数 动画方向 执行完毕时状态；

动画名称  动画时长 必须赋值
赋值不分前后顺序
如果有2个时间值，第一个时间表示动画时长，第二个表示动画延迟时间

拆分写法：

.box{
    width: 200px;
    height: 100px;
    background-color:pink;

    /* 动画名称 */
    animation-name: change;
    /* 动画时长 */
    animation-duration: 2s;
    /* 延迟时间 */
    /* animation-delay: 2s; */
    /* 动画执行完毕时的状态
    forwards 结束状态
    backwards 开始状态
    */
    animation-fill-mode: backwards;
    /* 
    steps(4);逐帧动画  速度曲线 */
    animation-timing-function: steps(4);
    /* 重复次数 
    infinite 无限循环
    */
    animation-iteration-count: infinite;
    /* 执行方向   alternate反向 */
    animation-direction: alternate;
}

/* 1:定义动画 
@keyframes 动画名称{
from {}
to {}
}
*/
@keyframes change {
    from {
        width: 200px;
    }
    to {
        width: 600px;
    }
}

background-color:pink;

/* 动画名称 */
animation-name: change;
/* 动画时长 */
animation-duration: 2s;
/* 延迟时间 */
/* animation-delay: 2s; */
/* 动画执行完毕时的状态
forwards 结束状态
backwards 开始状态
*/
animation-fill-mode: backwards;
/* 
steps(4);逐帧动画  速度曲线 */
animation-timing-function: steps(4);
/* 重复次数 
infinite 无限循环
*/
animation-iteration-count: infinite;
/* 执行方向   alternate反向 */
animation-direction: alternate;

}

/* 1:定义动画
@keyframes 动画名称{
from {}
to {}
}
*/
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}

小刘私坊

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端(移动端)学习笔记

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qpYDGWNu-1683633868266)(C:\Users\帅气的小刘\Desktop\demo\web\前端学习\image\img02.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cxzScsVE-1683633868266)(C:\Users\帅气的小刘\Desktop\demo\web\前端学习\image\cc.png)]单行注释不会编译到css文件。
复制链接

扫一扫