一、移动端适配-rem
适配:页面变大,内容变大。页面变小,内容变小,
- 长度单位。用rem单位设置网页元素的尺寸。
- 相对单位。相对于浏览器html标签的字体大小
rem&em区别:
- em 跟父元素和自己的字体大小有关。
- rem只跟html标签字体大小有关。
1、如何用rem进行移动适配
1)检测屏幕大小-媒体查询@media
@media(媒体特性){
选择器{
css属性;
}
}
如:
/* 当查询到屏幕宽度为375px时,将body的背景颜色改为粉色 */
@media(width:375px){
body{
background-color: pink;
}
}
2)设置html标签字号
- 目前rem布局方案中,将网页等分成10份,html标签的字号为视口宽度,推荐 html字体大小=1/10的屏幕宽度
@media(width:375px){
html{
font-size: 37.5px;
}
}
/* 将盒子宽度设为75px width=75/37.5 */
.box{
width: 2rem;
height: 2rem;
background-color: pink;
}
2、flexible.js
使用flexible.js配合rem实现在不同宽度中的适配
引入js:把屏幕分成了10份,设置了html的字体大小为当前页面的10分之一,不需要写媒体查询
<!-- 在body最下面引入js文件--规范 -->
<body>
<script src="./js/flexible.js"></script>
</body>
3、Less语法
- less是一个CSS预处理器,Less文件后缀是 .less
- 扩充了CSS语言使CSS具备一定的逻辑性、计算能力。
- 常用的预处理器还有Sass 、Stylus
1)注释
// 单行注释 ctrl+/
/*
多行注释 alt+shift+a
*/
2)运算
// 加法
width: 200px + 300px;
// 减法
height: 200px - 20em;
// 乘法
margin: 50rem * 5;
// 除法
padding: (20rem / 10px);
// padding: 20rem ./ 10px;
注意点:
1.符号之间使用空格隔开
2.存在多个单位时,以第一个为准
3.除法两种写法,添加点或者小括号
常用:
// /假如我们测量的值是75*75px 转em
.one{
height: (75rem / 37.5);
width: (75rem / 37.5);
}
4) 后代选择器
直接嵌套在里面
.father{
.son{
}
// 伪类选择器写法:
//&表示当前包裹他的元素,一般配合伪元素和伪类选择器
&::after{
content: '';
}
p{
&:nth-child(2){
color: chartreuse;
}
}
}
5) 定义变量
作用:方便后面的维护和修改
// 定义变量
//采用驼峰命名法,语义化
@BaseSize:37.5rem;
p{
width:(150 / @BaseSize);
}
6) less导入
@import "文件路径"
// 引入其他less文件
@import url(./test.less);
// 第二种
// @import './test.less';
7)less导出css文件
//out:"../css/"
第二种:
//out:url(../css/)
禁止导出
//out:false
4、项目搭建
- 文件目录 文件夹 images(不更新的图片) 、js 、lib-iconfont 、less 、 update(经常更新的图片) 、css 、ico图标 如:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ANQ3jnu4-1665476756299)(.\asset\项目目录.png)]
-
创建 index.html 、index.less 文件 ,index.less会自动创建index.css文件保存在css文件夹中,index.html中需要用link引用index.css文件-见4
-
在index.less中引入 normalize.less和base.less
// 导入初始化的base.less @import './base.less'; // 导入移动端兼容性normalize.less @import url(./normalize.less);
-
在index.html中引入
<!--导入标题图标 -->
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<!-- 导入字体图标 -->
<link rel="stylesheet" href="./lib/iconfont/iconfont.css">
<!-- 导入当前文件css -->
<link rel="stylesheet" href="./css/index.css">
在底部body上面引入js文件
<!-- 要做适配:需要导入js -->
<script src="./js/flexible.js"></script>
1、vw/vh
<style>
.box{
width: 53.33vw;
height: 53.33vw;
background-color: pink;
}
/* 注意点:vw和vh不会一起使用,一起使用会导致盒子变形 */
/* 保证盒子不变形,统一使用一个单位,建议使用vw */
</style>
</head>
<body>
<div class="box"></div>
<!--
vw是视口宽度 vw=1/100的视口宽度
vh是视口高度 vh=1/100的视口高度
-->
</body>
项目中使用就
@BaseSize:3.75vw;
2、 文本溢出显示省略号
.ellipsis-2 {
// 溢出隐藏
overflow: hidden;
// 文本溢出换成省略号
text-overflow: ellipsis;
// 弹性盒子
display: -webkit-box;
// 溢出到第几行
-webkit-line-clamp: 2;
// 从上到下垂直排列子元素
-webkit-box-orient: vertical;
}
3、 vmin和vmax
100vmin指的是屏幕宽和高中较小的那个
100vmax指的是屏幕宽和高中较大的那个
vmin和vmax一般推荐使用vmin可以解决移动端横屏文字显示不一致的问题,替换vw即可