【CSS】关于CSS的几种移动端布局方式

最新推荐文章于 2024-04-22 16:58:34 发布

Composition55555

最新推荐文章于 2024-04-22 16:58:34 发布

阅读量2.8k

点赞数 11

文章标签： css html less css3

本文链接：https://blog.csdn.net/weixin_41619240/article/details/109177619

版权

【笔记】2020入门笔记专栏收录该内容

32 篇文章 4 订阅

订阅专栏

一、移动端布局

01.meta视口标签设置

<meta name="viewport" content="width=device-width,initial-sacle=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" >

initial-scale 初识缩放比

user-scalable 用户缩放

maximum-scale 最大缩放比

minimum-scale 最小缩放比

02.移动布局的分类有哪些？

流式布局（百分比布局）
弹性布局（flex）
less+rem+媒体查询布局
响应式布局

03.为什么需要二倍图？

（1）物理像素和物理像素比

物理像素：即分辨率，屏幕显示的最小单位

PC端1个px就是一个物理像素，一一对应的关系
但在移动端1个px不是一个物理像素，不是对应关系

中间存在一个转换比，即物理像素比

这是因为移动端的物理像素进行了压缩，分辨率变高

（2）二倍图（根据需要确定多倍图）

如果在移动端直接插入原图，那么由于物理像素比，图片也会被放大，会变模糊，

因此这里需要，先准备原图两倍大小的图片（这里的两倍是指物理像素比，不一定是两倍的），然后手动缩小为一半，那么在移动端显示的时候会放大为两倍，这次放大因为原图先缩小了两倍，那么在放大时即恢复原图大小，就不会变模糊

（3）背景二倍图

用background-size设置图片大小
特别注意精灵图的二倍图转换

04.样式初始化

引入样式：初始化CSS文件

二、流式布局

01.什么是流式布局？

流式布局
- 也称百分比布局，非固定像素布局
- 宽度用百分比自适应，高度用像素值固定
- 搭配最大、最小宽度
  
  min-width，max-width

02.为什么需要流式布局

浏览器、屏幕尺寸、分辨率不一致

03.流式布局有什么缺陷？

并非所有元素都是自适应的（高度、图片、文字大小等都是固定的）

仿京东首页

三、初识flex布局

01.几个概念

flex布局

即弹性盒子布局，是给父元素添加flex属性，以控制子元素的位置和排列
主轴和侧轴

主轴：即沿着flex元素排列方向所在的轴

侧轴：垂直于flex元素排列方向的轴

02.几个属性

（1）父元素的属性

设置再父元素中，控制的是子元素的排列

1.flex-direction:设置主轴方向，设置了其中一个为主轴，则另一个为侧轴

属性值	描述
row	水平排列，沿着X轴方向从左到右排列，默认值,
column	垂直排列，沿着Y轴方向从上到下排列
row-reverse	水平排列，沿着X轴方向从右到左排列
column-reverse	垂直排列，沿着Y轴方向从下到上排列

2.justify-content：设置在主轴方向上的子元素的排列方式

属性值	描述
flex-start	沿主轴方向从左到右（从上到下）排列，默认值
flex-end	从主轴方向从右到左（从下到上）排列
center	居中对齐
space-around	平均分配剩余空间
space-between	两端贴边，中间仔平均分配剩余空间

水平方向：

垂直方向：

3.flex-wrap：设置子元素是否换行

属性值描述
nowrap 不换行，默认值，缩放父元素，同时也会缩放子元素
wrap 设置换行
4.align-items：设置在侧轴方向上的单行子元素的排列方式————仅适用于单行

属性值描述
flex-start 从头开始
flex-end 从后开始
center 在侧轴上居中对齐
stretch 拉伸（默认值）
水平方向：

垂直方向：
5.align-content：设置在侧轴方向上的多行子元素的排列方式——————适用于多行

这个属性只有在设置了换行的情况下才使用，且在单行情况下是没有效果的

即需要搭配flex-wrap:wrap;

属性值描述
flex-start
flex-end
center
space-around
space-between
stretch
水平方向：

垂直方向：
6.flex-flow：复合属性，同时设置主轴方向和是否换行

属性值	描述
nowrap	不换行，默认值，缩放父元素，同时也会缩放子元素
wrap	设置换行

属性值	描述
flex-start	从头开始
flex-end	从后开始
center	在侧轴上居中对齐
stretch	拉伸（默认值）

属性值	描述
flex-start
flex-end
center
space-around
space-between
stretch

语法：

.father {
    /* 首先要给父元素添加flex */
    display: flex;
    
    width: 100%;
    height: 200px;

    /* 父元素中常见的六种属性 */
    /* 1.设置主轴方向 */
    flex-direction: row;

    /* 2.设置在主轴方向上的子元素的排列方式 */
    justify-content: center;
    
    /* 3.设置子元素是否换行 */
    flex-wrap: nowrap;
    
    /* 4.设置在侧轴方向上的单行子元素的排列方式————仅适用于单行 */
    align-items: center;
    
    /* 5.设置在侧轴方向上的多行子元素的排列方式——————适用于多行 */
    align-content: center;
    
    /* 6.复合属性，同时设置主轴方向和是否换行 */
    /* flex-flow: row nowrap; */
}

（2）子元素的属性

属性值	描述
flex	设置子项元素对剩余空间的分配，每一个子元素项都可单独设置，将所有子元素占的份数加起来，即为占父元素的比例
align-self	单独设置子项自己在侧轴上的排列方式，包括`flex-start`;`flex-end`;`center`;`stretch`;`baseline`;
order	order控制子项的排列顺序，越小越靠前,默认值为0

语法：

.son{
     /* 子元素上的属性 */

    /* 1.设置元素对剩余空间的分配份数 */
    /* 即，将所有子元素占的分数加起来，然后占父元素宽度的几分之几 */
    flex: 1;

    /* 2.设置子项自己在侧轴上的排列方式 */
    align-self: center;

    /* 3.order控制子项的排列顺序，越小越靠前，默认为0 */
    order: inherit;
}

仿携程首页小案例

四、关于rem

01.解决问题：

如何让高度也自适应？

02.相关概念

em——是相对于父元素的字体大小进行的单位设置，浏览器默认（1em=16px)
rem——即root em，是相对于HTML元素（根）的字体大小进行的单位设置

03.优点

每个页面只有1个html标签，可以通过修改HTML中文字大小font-size来改变页面中元素的大小，进行整体控制
文字大小随屏幕大小变化
高度自适应
高度、宽度等比例缩放

04.rem适配

是为了让一些不能等比自适应的元素，在设备尺寸改变时，等比例适配当前设备
主要使用媒体查询，根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化时，元素尺寸也会发生变化，从而达到等比例缩放的适配
用less动态计算并设置html根标签的字体大小
将设计稿中的元素宽、高、位置，按照同等比例换算为rem为单位的值

方法：

首先要有一套标准的屏幕尺寸，比如width:750px
然后要设置html标签里的文字大小：font-size

在这里要先划分屏幕的份数，比如划分为15份（其它值也可以），再用屏幕尺寸除以份数，这里是 750/15=50px;

那么这里html标签里的文字大小为：font-size:50px;

那么整个页面中的元素尺寸有这样一个换算关系：1rem = 50px
最后，在页面中的元素的单位都需要换算成rem单位的，其rem值 = 元素本身尺寸(px)/根标签字体大小，如：100x100px的图片尺寸就设置为：2x2rem；

五、关于媒体查询

01.媒体查询——media query

媒体查询可以针对不同的屏幕尺寸设置不同的样式

02.怎么定义

如何声明一个媒体查询？

@media 媒体类型关键字媒体特性

媒体类型：all | print | screen
关键字：and | not | only
媒体特性：width | max-width | min-width

【注意】CSS中的 max-width 和 min-width 都包含 “等于”

@media screen and (max-width: 800px) {
    body {
        background-color: #f00;
    }
}

@media screen and (min-width: 801px) {
    body {
        background-color: #f0f;
    }
}

p {
    font-size: 1rem;
}

/* 	
	以上样式：
		在屏幕上 并且 最大宽度是800px 时，设置一种样式
					最小宽度是801px时，改变为另一种样式 
*/
/* 即，根据不同的屏幕尺寸，改变为不同的样式 */

03.如何引入资源

在link中引入

<link media="screen and (min-width:320px)" rel="stylesheet" href="123.css">

六、初识less语法

01.less简介

less：一门CSS扩展语言，也称为CSS预处理器，引入了变量、运算、函数等功能

02.less变量

以@为前缀
不能包含特殊字符
不能数字开头
区分大小写
语法：
```
@color:red;

div {
    color:@color;
}
```

03.less编译

借助插件

04.less嵌套

语法

.father{
    width: 100px;
    height: 100px;
    background-color: red;
    
    .son {
        width: 50px;
        height: 50px;
        background-color: blue;
    }
}

交集 | 伪类 | 伪元素选择器
- 内层选择器的前面没有添加**&符号**，则会被解析为外层选择器的后代
- 如果有**&符号**，则被解析为伪类
```
.father{
    width: 100px;
    height: 100px;
    background-color: orange;
    
    &:hover{
        width: 200px;
    }
}
```

05.less运算

less中，任何数字、颜色、变量都可以参加运算，提供 加(+)、减(-)、乘(*)、除(/) 四则运算方式
运算符左右两侧有空格
两个不同单位的值运算，以第一个值的单位为主

只有一个值有单位，以该单位为主

div {
    width:100px - 2;
    height:(100px + 30) * 2;
    background-color: #666 - #333;
}

七、响应式布局

（未完待续~~~）