移动端布局必须要懂的知识

发表于2023-08-25更新于2023-09-01

视口viewport以及二倍图

1.视口是什么

1
2
3
4
5
6
7
viewport                                                 //视口
<meta
initial-scale                            初始缩放比大于0的数字
maxium-scale                        最大缩放比 大于零的数字
minium-scale                        最小缩放比 大一零数字
user-scalable             用户是否可以缩放 yes或者no（1或0）        //视口标签
一般情况vscode会自己生成好

2.二倍图

1
2
3
4
5
6
7
8
💡 物理像素就是我们说的分辨率
px是开发像素   在苹果八中1px开发像素=2个物理像素
视网膜屏下图片给我们放大会模糊开发图片应当大屏幕像素比倍数然后再更改大小
这就是二倍图多倍图的设计
background-sizi：图片宽  图片高                  //背景！图缩放写一个是宽高就等比例缩放
（可以百分比）继承父亲
cover         完全覆盖盒子            
contain     图像扩展至最大尺寸

3.移动端css初始化

1
2
3
4
5
6
7
推荐使用  normalize.css
官网    http://necolas.github.io/normalize.css/
流式布局（称为百分比布局）
应该设置最大最小值避免影响盒子内容影响
max-width                 //最大宽度
mix-width                  //最小宽度（高度也是一样）
移动端使用精灵图应当缩放然后再测量大小

Flex布局

1.Flex布局Flex容器属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
给父亲加flex盒子称为flex容器其中的子元素自动成为容器成员来操纵里面成员
对父元素设置的
flex-direction                （x轴默认主轴 元素按照主轴排列）           //主轴的方向
row                     默认从左到右
row-reverse             从右到左
column                  从上到下（设置y为主轴）
column -reverse         从下到上


justify-content                                            //设置主轴上子元素排列方式
flex-start                默认值从头部开始
flex-end                  从尾部开始排列
center                    再主轴居中对齐
space-evenly             所有地方间距相等
space-around             每个子集都有相同间距(中间子集间距为2倍的子集间距)
space-between            先两边贴边再平分剩余空间   ！！！


flex-wrap                                                        //设置子元素是否换行
nowrap                 默认不换行 一行装不下会缩小子元素宽度
wrap                   换行向下
wrap-reverse           向上换行


align-items                                          //设置侧轴上子元素排列方式(单行)
flex-start             从上到下
flex-end               从下到上
center                 挤再一起居中（垂直居中）
stretch                拉伸(默认)
flex-flow              复合属性，相当于同时设置flex-direction  flex-wrap


align-content                                        //设置侧轴上子元素排列方式(多行)
flex-start              默认从侧轴头部开始排列
flex-end                再侧轴尾部开始排列
center                  侧轴中间显示
space-around            子项在侧轴平分剩余空间
space-between           子项再侧轴先分布两头，再平均分
stretch                 设置子项元素高度平分父元素高度

2.Flex 元素(儿子的属性)

1
2
3
4
5
6
7
8
9
10
11
12
flex ：1；                                           // 分配剩余空间份数

align-self :                                         //控制子项自己一个再侧轴排列
auto                    默认值继承父亲align-items没有父容器为stretch
stretch                 拉伸充满
center                  元素中心显示
flex-start              元素容器开头
flex-end                元素容器结尾
baseline                位于元素容器基线上

order:                                               //定义排列顺序  越小越靠前默认0

媒体查询以及移动端布局方式

1. 媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@media   媒体类型 and   (媒体特征){                        //媒体查询
}
mediatype             媒体类型值
all                   所有设备
print                 打印机打印预览
scerr                 电脑 平板 手机

关键字
and                  连接 相当于且
not                  排除某个相当于非
only                 指定某个特定

媒体特性
width              定义输出设备界面可见区域宽度
min-width          定义输出设备中页面最小可见宽度
max-width         定义输出设备最大可见区域宽度
引入资源就是针对不同的屏幕尺寸调用不同的css文件
<link  rel="stylesheet"  href=''css文件  " media ="screen and (媒体特征)">

书写顺序   应该从小到大写
min-width(从小到大)
max -width(从大到小)

2.rem单位以及vw与vh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
可通过修改html里面的文大小来给变页面中元素大小控制整体
当设置
html{
   font-size:30px          1个rem 等同于 30px
}
可使用媒体查询改变html文字大小实现不同屏幕下的布局
flexible.js  使用rem 将屏幕分为10份(如在365px屏幕下一个rem就是36.5px)
使用插件要更改css root才能转换为要使用的rem
还是要给屏幕给一个超过你所要项目大小就将font-sizi改好
记得提权!important

相对单位根据屏幕可见视口分成100分1个就是一份
(一般只使用一个不会vw wh一起用 对全面屏手机不友好)
vw(viewport width)
1vw = 1/100视口宽度
vh(viewport height)
1vh = 1/100视口宽度

Less 与Scss

1.Less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 使用less直接新建less文件
 html不能直接使用less   vscode中插件easy less
 下载后保存less文件回自动生成css文件然后html引用

1.0  less中变量的声明
    @变量名:值;
2.0 less书写嵌套规则
less嵌套 子元素样式直接写在父元素里面就好了
如果有伪类  交集选择器  伪元素选择器  我们内层选择器前面加&
3.0 less运算

颜色16进制也可以运算
可以进行加减乘除运算   除法运算要加(15 / 2px )
运算符左右都要敲空格
两个数参与运算 如果只有一个有单位,则与有单位的为准
两个数参与运算 ,如果2个都有单位 且不一样以第一个单位为准

2.less文件操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@import "less名"          文件导入
less导出文件到指定文件夹
方法一
配置easyless产检实现
设置→搜索easyless→在setting.json中编辑
json文件中添加代码
"out": "路径最后要加/"
方法二
less文件中添加
// out: 路径也要加斜杠

禁止导出
less第一行添加
// out:false

3.scss

1
2
3
4
5
6
7
8
9
💡 sass使用$来标记变量   $变量名: 变量值

也可以变量符合属性    块级中声明只能在块级中使用 

以空格分割的多属性值也可以标识变量

$basic-border: 1px solid black;

&选择父级             (其他使用基本和less保持一致)

Bootstrap

1.简单使用

1
2
3
4
5
6
7
8
💡 官方文档   https://v3.bootcss.com/

引入插件需要先引入jq文件在引自己的js文件

布局容器
.container    响应式布局容器分大屏小萍

.container-fluid  流式布局百分比宽度

2.栅格系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
把视口尺寸分成12等分
行 row
列 colu
小屏(手机)                   .col-xs-占列份数
小屏设备(平板 )            .col-sm-占列份数
中等                           .col-md-占列份数
宽屏                           .col-lg-占列份数
列嵌套最好加一个行 row
列偏移
.col-类型-offset-偏移份数
列排序
.col-leix-push-要推的份数
.col-leix-pull-要拉的份数
响应式工具
hidden-类型           就会某个屏幕下隐藏
visible-leix          就会再某一个屏幕下显示