2.3移动Web网页开发——移动端布局（含Flex伸缩布局、rem、less、vhvw）

lanmy_dl

已于 2022-10-24 19:30:10 修改

阅读量977

点赞数 1

分类专栏：前端文章标签：前端 css css3 1024程序员节

于 2022-10-11 12:06:02 首次发布

本文链接：https://blog.csdn.net/lanmy_dl/article/details/127206886

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。当默认宽度是百分比，高度是像素值时候

通过盒子的宽度设置成百分比根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。

在早期用来应对不同尺寸的PC端，如今也是移动开发使用的比较常见的布局方式。

优点：通过百分比设置宽度，可以自适应不同尺寸屏幕
缺点：高度和文字大小都是通过px固定取值，所以如果当显示屏幕过大或过小可能会导致某些页面元素被拉的很长很扁，不能正常显示。

felx布局（弹性布局）

浏览器提倡的，渲染更快，
要有父级和子级的结构，其中父级为弹性容器，子级是弹性盒子，
父级添加了display:flex;子级的尺寸都可以弹性伸缩，

使用原因：因为float:left当父级元素的高度是无的时候，会发生浮标现象，导致子集元素在外了，可以用 can i use查看适配浏览器，一般除了老版本78的IE浏览器不能使用flex开发。

默认主轴是水平，默认侧轴是垂直

在这里插入图片描述

看一个例子
.box是弹性容器、.box 下的div1 2 3是弹性盒子，排列后是下图：

在这里插入图片描述

然后加上flex布局

在这里插入图片描述

变成了这样
为了让盒子之间有好看的间距，需要在父级增添一个属性

调节主轴的对齐方式：justify-content（父级）

justify-content: center; /* 三块挨着一起在中间 */
justify-content: space-between; /*之间有间距，两侧的两边没有 */
justify-content:evenly; /*各个地方三块左右之间等间距 */
justify-content: space-aroud; /*如下图，三块之间等距，两侧的两边1/2，本质是间距加在子级的两侧 */

在这里插入图片描述

只是主轴方向有距离了，对齐了，但是上面还是紧贴的

调节侧轴的对齐方式：align-items(父级）

红色为常用

align-items: center
align-items: stretch
self:center(作用于选定的某个子级元素）

align-items: center; /* 在垂直方向居中 */
align-items: stretch; /*拉伸，默认是有的，如果子级元素没有height，那么高就会拉满整个父级元素 */

也有添加在子级元素上的align-self
单独控制子级某个盒子

在这里插入图片描述

如果这时候把子级元素的高均去掉的话，可以看到弹性的两个子盒子由于默认的align-items: stretch效果，会在侧轴方向拉满，但是对于设置了align-self:center的子级块，高度则只有内容的高度
如果这时候再把子级元素的宽去掉，可看到主轴均变成了内容的宽度，另外两个子盒子还是默认的拉满侧轴高度（注意align-items: stretch是侧轴的默认）

felx修改弹性盒子（子级）伸缩比

注意是作用于子级元素的，是父级剩余尺寸的份数，当父级元素变了自然也会变

在这里插入图片描述

父级除去50px,剩余的分成四份，

更换主轴方向flex-direction（父级）

使用flex-direction改变元素排列方向

事先要添加display: felx;
这下y就是主轴了，横向排列就是纵向的

在这里插入图片描述

align-items: center; /* 现在就是水平居中了*/
justify-content: center; /*现在就是垂直居中了 */
要看主轴在哪儿，所以这两个属性并不是绝对的，只是对应主轴的对齐方式

使用flex-wrap实现弹性盒子多行排列效果（父级）

要实现下面那个效果，之前用浮动，可以设置好固定的宽度，父级容纳不下，超过自然会换行了

父级div块500px，下面含有100px的正方形8个，

在这里插入图片描述

在这里插入图片描述
效果却是这样，宽被挤压了

父级添加了display:flex;子级的尺寸都可以弹性伸缩
所以添加换行css
flex-wrap: wrap; /*换行，就不挤压了；默认nowrap也就是不换行 */

在这里插入图片描述

行之间可以看出间距很大？所以用到align-content

弹性盒子换行多行排列felx-wrap:wrap，对齐方式align-content

在这里插入图片描述

align-content:center; /* 所有盒子在垂直的中间*/
align-content:space-around; /* 中间2倍，两侧两边一倍*/
align-content: space-between; /* 只有中间有间距，两边的就没有*/
这个没有evenly哦（按理justify-content是均分，中间==两侧）

在这里插入图片描述

单行文字超出显示省略号

例如给一个.text h5的文字加超行显示省略号

<div class="text">
	<h5>热污染给他任何武器疼无人光荣问问斯坦福日晚间</h5>
	<p>颜色：白色  尺码：M  数量：1</p>
</div>
<div class="common">
	<a href="#">立即付款</a>
	<a href="#">查看详情</a>
	<a href="#">取消订单</a>
</div>

/*因为是弹性盒子，其实强制让在一行会去撑开其他的内容，如果固定盒子下面就可以实现效果*/
h5{
	text-overflow: ellipsis; /*省略号*/
	white-space: nowrap; /*只保留一个空白不换行*/
	overflow: hidden; /*溢出隐藏*/
	-webkit-line-clamp: 2; /* 2行超出隐藏，和不换行不同存 */
}

/*所以就要给父盒子设定固定的大小，但是懒得量,加入在往上父级元素是.order*/
.order .txt {
	flex: 1; 
	width: 0; /*一定要有，为了溢出的时候显示省略号，没有width就是弹性盒子*/
}

/*flex默认主轴排上面三个排在一行，如果想要他们排在一列，就要*/
.common {
	display: flex; /*默认主轴一行排*/
	flex-direction: column; /*主轴在垂直了，换行排了*/
	align-items: center; /*主轴y轴，实际上就是水平居中了*/
	justify-content: center; /*实际上就是垂直居中了*/
}

固定定位position:fixed;（子级那块）

以京东底部栏为例：下层的内容块距需要加一个内外边设置一个高度，至少是整个fixed底部的高度才不会把footer内容掩盖住，不然就重合了

在这里插入图片描述

压在别人上面的固定定位，以底部支付功能作为固定定位，会脱标

从这样
在这里插入图片描述
加定位的三行代码，position:fixed; left:0; bottom:0;

在这里插入图片描述

可以看到脱标了加个width:100%;
高也就是要和底部的盒子一样大，免得掩盖其他内容

在这里插入图片描述

定位

移动适配

当视口变小，跟着设备宽度等比变化

rem：目前多数企业在用的解决方案

rem （媒体查询、flexible.js）
less

rem:能够使用rem单位设置网页元素的尺寸，使得网页效果是屏幕宽度不同，网页元素尺寸也不同（等比缩放）；

像素布局就是固定像素，移动设备上不行；而百分比布局只是宽可以自适应，高是固定的像素，也不行。

html标签字号也叫根字号

html{
	font-size: 20px;
}

.box{
	width: 5rem; 
	height: 3rem;
	background-color: pink;
}

这样在移动设备上的宽是100px，高是60px，但还是没有实现移动设备（因为仍为固定值），而是让在不同的计算结果不一样，

怎么设置不同的html标签字号?设置多少合适？

rem移动适配——媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的CSS样式，一般html的标签字号是视口width的十分之一

在这里插入图片描述

只有在375的视口宽度下生效，如下图；

在这里插入图片描述

电脑的显示分辨率要调为100%，不然可能会有小数375.几，导致没效果，所以（后面flexible就规避了）

根据设计稿的视口，进行把设计稿的像素转换为rem,保留三位小数

在这里插入图片描述

flexible

flexible.js是手淘开发出的一个用来适配移动端的js框架，核心原理就是根据不同的视口宽度给网页中的html根节点设置不同的font-size，直接引入就好，规避了分辨率设置的百分比

在这里插入图片描述

Less语法

使用Less运算写法完成px单位到rem单位的转换，能够快速编译生成css代码，保存后自动生成css文件，Less是一个CSS预处理器，Less文件后缀是.less；扩充了CSS语言，使CSS具备一定的逻辑性、计算能力。（注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件）

安装和展示作用

先搜索安装 Easy LESS 的VScode插件

在这里插入图片描述

例如在less文件中写：（html的标签字号是1rem是37.5px，设计稿的像素值是68px），rem是最后的单位哦

在这里插入图片描述

即可生成对应css文件如下：

在这里插入图片描述

语法

注释

单行注释： // 注释内容快捷键：ctr + /，只能存在于less，没有在css里
块注释：/* 注释内容 */ 快捷键： shift + alt + A，也可以存在于css文件里

计算（less4.0 & 之前）

加、减、乘直接书写计算表达式
除法需要添加小括号或者.（点），推荐小括号不爆红,less4.0新增语法要求这两点
如果不加括号就会原样去css height:100 / 25rem; 而不是4rem；less4.0之前的语法就可以直接除

在这里插入图片描述

选择器

嵌套写法大括号{}在里面
&符号，表示当前选择器，代码改位置的时候方便，不然另写就要.father:hover{}选起

例如less这样写
在这里插入图片描述
相应的css

交集选择器 div.off{}既是div且class="off"的
下面充分运用了&，同级，想要给off加灰色，但是又不想重新和active同级写less

<div class="active off">进行中</div>

在这里插入图片描述

less变量设置属性值

在这里插入图片描述
例如less这样写

在这里插入图片描述
相应的css

要修改的时候直接修改变量值就可，比较方便
包括上面的37.5rem也可以

less引入less@import ‘./xxx.less’; 后缀可写可不写

可以是@import ‘./xxx.less’;
也可以是@import ‘./xxx’;
在这里插入图片描述

使用less语法指定导出CSS文件路径

一般我们想要把css放在一堆，而不一定在和less同级

方法一：配置EasyLess插件，实现所有Less有相同的导出路径

在这里插入图片描述

注意json文件里面都是双引号

导出路径，如果没有会创建，注意要有/不然就是文件名而非文件夹

在这里插入图片描述

方法二，单独指定的文件夹（在需要的less文件第一行写路径注释）
注意没有引号也没有分号

在这里插入图片描述

禁止导出Less（第一行添加 // out:false）

对于被别人导入的这种less就不需要导出成css
在第一行输入的是// out:false

在这里插入图片描述

vw / vh:未来的解决方案

@vw: 3.75vw;
100% == 100vw
在这里插入图片描述
不允许混用，均为vw或者均用vh

.box{
	width: 50vw;
	height: 30vw;
}
.box{
	width: 50vh;
	height: 30vh;
}

在这里插入图片描述

Tab栏、选项卡

上面点了，下面换内容这样的叫Tab栏、选项卡,保证菜单的个数要和内存的个数相等的
视频区域padding:(84 / @vw) (5 / @vw) 0;
在这里插入图片描述
视频区域布局效果

要让滚动的时候浮在最表面，z-index = 1

然后虽然是在上层但是透明的颜色，设置一个背景色background-color:#fff
在这里插入图片描述

常用css

font-family: black; /太多了略/
font-stretch: normal; /字体的拉伸正常/
letter-space: 0px; /letter-space是增加或减少字符间的空白,即字符间距/
text-align: center; /* 文字水平居中 */
line-height: 30px; /* 文字垂直居中就是添加行高*/
text-decoration: underline、line-through; /文字加下划线、删除线/
字体图标有自己的fontsize，所以要选定再调(当图标类名权重大有自己的字体大小可能标签压不过，可以直接使用类名例如 .iconfront{font-seize:30px;}
本来父级里面三个块里面的内容各自都是左对齐（块之间是space-around），要让里面各自居中，只需要text-align: center;即可

在这里插入图片描述

padding: 20px; /* 指容器内里，里面的就会收 */
margin: 20px; /* 指该容器外和另一个容器间隔 */
border: 1px solid #fff; /* 边框线*/
border-radius:10px; /边框圆角/
div:nth-child(2n+1) ; /奇数的孩子/
flex-wrap: wrap; /*换行，而不挤压；默认nowrap也就是不换行 */
display:block、inline-block; /* 例如a标签就成为了块级元素才有宽高,多个元素时行内块仍是一行排可以设置宽高但有换行导致的间距*/
linear-gradient(90deg,#6fc2aa 5%, #54b196 100%); /* 渐变颜色*/
backgorund-size: contain; /* 全部放进缩进盒子里面，显示所有的图片*/

在这里插入图片描述

像素大师
当在一张图片（区域）上面还要加东西时，把这个图片（区域）设置好宽高，以后设置就在这上面找，定位时候：子绝父相（图为父，div class下加所有的为子），再top:(15 / 37.5rem)可以写负

注意vertical-align可以调节大图小字（重要）

lanmy_dl

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
2.3移动Web网页开发——移动端布局（含Flex伸缩布局、rem、less、vhvw）

使用原因：因为float:left当父级元素的高度是无的时候，会发生浮标现象，导致子集元素在外了，可以用 can i use查看适配浏览器，一般除了老版本78的IE浏览器不能使用flex开发。flexible.js是手淘开发出的一个用来适配移动端的js框架，核心原理就是根据不同的视口宽度给网页中的html根节点设置不同的font-size，直接引入就好，规避了分辨率设置的百分比。例如在less文件中写：（html的标签字号是1rem是37.5px，设计稿的像素值是68px），rem是最后的单位哦。
复制链接

扫一扫