HTML&CSS
JS
Vue.js
Java
MySQL
Redis
SpringBoot
前端补充
后端补充
🌻CSS 布局-移动端
type
status
date
slug
summary
tags
category
icon
password
点击带三角形的标题可以展开收缩内容。
平面转换
transform
作用:为元素添加动态效果,一般与过渡配合使用
概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)
平移
- 取值
- 像素单位数值
- 百分比(参照盒子自身尺寸计算结果)
- 正负均可
- 技巧
translate()
只写一个值,表示沿着 X 轴移动- 单独设置 X 或 Y 轴移动距离:
translateX()
或translateY()
定位居中
- 方法一:margin
- 方法二:平移 → 百分比参照盒子自身尺寸计算结果
旋转
- 取值:角度单位是 deg
- 技巧
- 取值正负均可
- 取值为正,顺时针旋转
- 取值为负,逆时针旋转
转换原点
默认情况下,转换原点是盒子中心点
- 方位名词(left、top、right、bottom、center)
- 像素单位数值
- 百分比
缩放
- 技巧
- 通常,只为
scale()
设置一个值,表示 X 轴和 Y 轴等比例缩放 - 取值大于 1 表示放大,取值小于 1 表示缩小
倾斜
取值:角度度数 deg
多重转换
多重转换技巧:先平移再旋转
- 多重转换原理:以第一种转换方式坐标轴为准转换形态
- 旋转会改变网页元素的坐标轴向
- 先写旋转,则后面的转换效果的轴向以旋转后的轴向为准,会影响转换结果
空间转换
transform
空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同。
平移
- 取值与平面转换相同
- 默认情况下,Z 轴平移没有效果,原因:电脑屏幕默认是平面,无法显示 Z 轴平移效果
视距
作用:指定了观察者与 Z=0 平面的距离,为元素添加透视效果
透视效果:近大远小、近实远虚
属性:(添加给父级,取值范围 800-1200)
旋转
- Z 轴:
rotateZ()
- X 轴:
rotateX()
- Y 轴:
rotateY()
左手法则—别太离谱
作用:根据旋转方向确定取值正负
使用:左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向
rotate3d
rotate3d(x, y, z, 角度度数)
:用来设置自定义旋转轴的位置及旋转的角度
- x,y,z 取值为0-1之间的数字
立体呈现
作用:设置元素的子元素是位于 3D 空间中还是平面中
属性名:
transform-style
flat
:子级处于平面中
preserve-3d
:子级处于 3D 空间
缩放
视口
媒体查询
rem
简介
- rem单位,是相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
媒体查询
媒体查询能够检测视口的宽度,然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
rem 布局
目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10。
flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
rem 移动适配
- 确定基准根字号
- 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)
- rem单位的尺寸
- rem单位的尺寸 = px单位数值 / 基准根字号
- VSC 插件计算
欢迎在下方留言讨论~
Loading...
Last update: 2024-07-08
🎉欢迎来到《现代网站开发技术》课程的开源文档笔记🎉