前端(移动端)学习笔记

news2025/11/1 7:19:59

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;
}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/506911.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

31 - 买股票的最佳时机问题

31 - 买股票的最佳时机问题

文章目录 1. 买股票的最佳时机I2. 买股票的最佳时机II3. 最佳买卖股票时机4. 买股票的最佳时机III5. 买股票的最佳时机IV 1. 买股票的最佳时机I dp数组含义&#xff0c;本题两个状态&#xff1a;持有股票、不持有股票 dp[i][1] &#xff1a;表示第i天不持有股票所得最多现金dp…
阅读更多...
最时髦的AI画画，一文包教包会

最时髦的AI画画，一文包教包会

最时髦的AI画画&#xff0c;一文包教包会 大概半年前&#xff0c;AI 绘画工具 Disco Diffusion 从 Text-to-Image 开发社区和设计行业&#xff0c;火到了普通用户的视野中。即便它界面简陋&#xff0c;满屏英文和代码&#xff0c;也“劝退”不了人们。因为对那些没有任何美术功…
阅读更多...
kali php无法执行,直接下载或显示php文件内容

kali php无法执行,直接下载或显示php文件内容

问题描述&#xff1a; 开启apache或nginx&#xff0c;访问php文件要么直接显示php文件内容&#xff0c;要么直接下载&#xff0c;这都是php文件无法解析的问题&#xff0c;需要nginxphp-fpm解决 1、安装NGINX 查看是否安装&#xff0c;如下图则已安装 #apt-cache policy ngi…
阅读更多...
Linux安装MinIO及springboot项目整合使用实战（详细）

Linux安装MinIO及springboot项目整合使用实战（详细）

以往的项目&#xff0c;用的比较多的OSS服务是腾讯云和阿里云的存储服务&#xff0c;不过从去年到今年&#xff0c;最近的几个项目&#xff0c;普遍要使用Minio,所以我在开发服务器和测试服务器上都装上了minio 一、首先minio的安装 MInIO的安装有很多方法、单实例的、集群分…
阅读更多...
Django学习——安装、创建项目、数据库、用户管理案例

Django学习——安装、创建项目、数据库、用户管理案例

目录 1、 安装django 1.1django是第三方模块&#xff0c;用pip install django 安装&#xff1a; 1.2 python的安装目录 &#xff1a; 2、创建项目 2.1在终端创建的步骤 执行过程 2.2使用pycharm&#xff08;企业版&#xff09;创建 django项目 2.3对比两种方式 2.4默认…
阅读更多...
推荐5款体积小、无广告、超实用的办公软件

推荐5款体积小、无广告、超实用的办公软件

大家好&#xff0c;我又来啦&#xff0c;今天给大家带来的几款软件&#xff0c;共同特点都是无广告、超实用&#xff0c;大家观看完可以自行搜索下载哦。 1.网络分析工具——Wireshark Wireshark 是一款开源的网络分析工具&#xff0c;它可以让你捕获和浏览网络上的数据包&am…
阅读更多...
《我命由我不由天》蔡志忠——笔记二

《我命由我不由天》蔡志忠——笔记二

目录 经典记录 天才不是天生的 如何认识自己、如何发掘和重用自己 自己拯救自己才是唯一出路 了解自己是人生第一个智慧 科学家证实&#xff0c;成就与选择目标的年龄成反比&#xff01; “努力无用论” 经典记录 天才不是天生的 美国物理学家理查德费曼两三岁时&#x…
阅读更多...
Ubuntu18.04 制作系统ISO镜像并物理机还原（Systemback）

Ubuntu18.04 制作系统ISO镜像并物理机还原（Systemback）

简单记录使用Systemback工具打包Ubuntu系统得到iso镜像文件&#xff0c;并在物理机上进行还原&#xff08;安装&#xff09;的流程。测试结果发现&#xff0c;使用打包的iso文件安装得到的Ubuntu系统继承了我之前的Ubuntu系统&#xff0c;包括并不限于如下内容&#xff1a;Home…
阅读更多...
公司新来个卷王，让人崩溃...

公司新来个卷王，让人崩溃...

最近内卷严重&#xff0c;各种跳槽裁员&#xff0c;相信很多小伙伴也在准备今年的面试计划。 在此展示一套学习笔记 / 面试手册&#xff0c;年后跳槽的朋友可以好好刷一刷&#xff0c;还是挺有必要的&#xff0c;它几乎涵盖了所有的软件测试技术栈&#xff0c;非常珍贵&#x…
阅读更多...
母亲节营销案例大盘点，真的有被狠狠共情住

母亲节营销案例大盘点，真的有被狠狠共情住

⼀直以来&#xff0c;节⽇营销都是品牌借势和消费者建⽴情感链接的好时机。尤其是在母亲节这个温情的⽇⼦⾥&#xff0c;借助催泪、温情的⼴告歌颂母爱的无私与伟⼤来打动消费&#xff0c;也成为品牌母亲节营销的标配。 随之⽽来的&#xff0c;越来越多的品牌也⾯临困局&#x…
阅读更多...
基于粒子群算法优化的核极限学习机(KELM)分类算法-附代码

基于粒子群算法优化的核极限学习机(KELM)分类算法-附代码

基于粒子群算法优化的核极限学习机(KELM)分类算法 文章目录 基于粒子群算法优化的核极限学习机(KELM)分类算法1.KELM理论基础2.分类问题3.基于粒子群算法优化的KELM4.测试结果5.Matlab代码 摘要&#xff1a;本文利用粒子群算法对核极限学习机(KELM)进行优化&#xff0c;并用于分…
阅读更多...
三硬币模型——机器学习课后作业

三硬币模型——机器学习课后作业

题目要求&#xff1a; 给出解决代码如下&#xff1a; import numpy as npdef miu_calc(pii, pi, qi, yj):up_b pii * pi ** yj * (1 - pi) ** (1 - yj)up_c (1 - pii) * qi ** yj * (1 - qi) ** (1 - yj)return up_b / (up_b up_c)yj np.array([1, 1, 0, 1, 0, 0, 1, 0, 1…
阅读更多...
MySQL数据库的备份与恢复

MySQL数据库的备份与恢复

一、数据备份的重要性 备份的主要目的是灾难恢复。 在生产环境中&#xff0c;数据的安全性至关重要。 任何数据的丢失都可能产生严重的后果。 造成数据丢失的原因&#xff1a; 程序错误人为操作错误运算错误磁盘故障灾难&#xff08;如火灾、地震&#xff09;和盗窃 二、数据…
阅读更多...
华为OD机试 - 第一个错误的版本（Java）

华为OD机试 - 第一个错误的版本（Java）

一、题目描述 你是产品经理&#xff0c;目前正在带领一个团队开发新的产品。不幸的是&#xff0c;你的产品的最新版本没有通过质量检测。由于每个版本都是基于之前的版本开发的&#xff0c;所以错误的版本之后的所有版本都是错的。 假设你有 n 个版本 [1, 2, …, n]&#xff…
阅读更多...
【seata的部署和集成】

【seata的部署和集成】

seata的部署和集成 seata的部署和集成一、部署Seata的tc-server1.下载2.解压3.修改配置4.在nacos添加配置5.创建数据库表6.启动TC服务 二、微服务集成seata1.引入依赖2.修改配置文件 三、TC服务的高可用和异地容灾1.模拟异地容灾的TC集群2.将事务组映射配置到nacos3.微服务读取…
阅读更多...
应用在虚机和容器场景下如何优雅上下线

应用在虚机和容器场景下如何优雅上下线

在生产场景中部署的服务提供者常因业务升级或其他场景需要下线和上线的部署操作&#xff0c;本文总结了应用在上下线过程中会遇到的典型问题&#xff0c;并思考在虚机和容器场景该如何处理这些问题&#xff0c;规避该过程中可能出现的服务消费者的请求失败&#xff0c;实现应用…
阅读更多...
人工智能学习07--pytorch16--MobileNet网络详解

人工智能学习07--pytorch16--MobileNet网络详解

MobileNet详解 DW卷积&#xff1a; 每个卷积核的深度为1&#xff0c;而不是像之前一样等于特征矩阵的深度。 每个卷积核只负责输入特征矩阵的一个channel进行卷积运算&#xff0c;再得到相应的输出矩阵的一个channel。 因为每个卷积核只负责一个channel&#xff0c;则采用的特征…
阅读更多...
Android WebView 的 addJavascriptInterface 探究

Android WebView 的 addJavascriptInterface 探究

Android WebView 的 addJavascriptInterface 探究 一、前言 Java和JS交互的方式有多种，这里探讨的方式是通过以下方式进行的交互。 webView.addJavascriptInterface(this, "JSBridge") 这篇文章是想弄明白 JavaScript 和 Java是如何实现这种方式互调的，就从源码…
阅读更多...
C高级 day1

C高级 day1

初始工作路径不在家目录下&#xff0c;在不切换路径的情况下&#xff0c;在家目录下创建一个subdir目录&#xff0c;在subdir这个目录下&#xff0c;创建subdir1和subdir2&#xff0c;并且把/etc/passwd拷贝到subdir1中&#xff0c;把/etc/group文件拷贝到subdir2中&#xff0c…
阅读更多...
java获取登陆用户ip方法

java获取登陆用户ip方法

今天和大家分享一下获取登录用户 ip的方法&#xff0c;如果你想获取自己的登陆用户 ip&#xff0c;可以参考以下思路&#xff1a; 1.可以通过 Java动态链接库的方式获取到&#xff0c;方法很简单&#xff0c;就是把需要的 ip地址添加到动态链接库中&#xff0c;然后在需要用到时…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023