一、移动端适配
适配:页面变大,内容变大。页面变小,内容变小,
1、rem
- 长度单位。用rem单位设置网页元素的尺寸。
- 相对单位。相对于浏览器html标签的字体大小
rem&em区别:
- em 跟父元素和自己的字体大小有关。
- rem只跟html标签字体大小有关。
2、如何用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;
}
3、flexible.js
使用flexible.js配合rem实现在不同宽度中的适配
引入js:把屏幕分成了10份,设置了html的字体大小为当前页面的10分之一,不需要写媒体查询
<!-- 在body最下面引入js文件--规范 -->
<body>
<script src="./js/flexible.js"></script>
</body>
4、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
5、到目前为止的项目搭建
-
文件目录 文件夹 images(不更新的图片) 、js 、lib-iconfont 、less 、 update(经常更新的图片) 、css 、ico图标 如:
-
创建 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>
-
在index.less中定义变量基准值
// 转rem基准值 @BaseSize:37.5rem;