Less+Rem响应式项目实战
在浏览器端使用less
less无法在浏览器端直接使用,浏览器不识别- 必须解析成
css代码 - 通过
less解析插件（javascript） - 引入
less文件需要加上type="text/less",less解析插件会遇到type="text/less"时进行解析，其他不解析 less.watch();无刷新预览样式- 以
http形式打开网页预览,<script src="../lib/less/less.min.js"></script>会通过Ajax方式请求数据，本地启动方式会跨域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/less" href="../less/test.less">
<script src="../lib/less/less.min.js"></script>
<script>less.watch();</script>
</head>
<body>
<h3>在浏览器端使用less</h3>
<p>1.less无法在浏览器端直接使用</p>
<p>2.浏览器不识别</p>
<p>3.必须解析成css代码</p>
<p>4.通过less解析插件（javascript）</p>
<p>5.引入less文件需要加上 type="text/less" </p>
<p>6.less.watch(); 无刷新预览样式</p>
<p>7.以http形式打开网页预览</p>
</body>
</html>
rem基础
项目结构
SuNing
├── css
├── demo
│ ├── 01-less-在浏览器端直接使用.html
│ ├── 02-rem-认识.html
│ └── 03-rem-适配.html
├── images
│ ├── advert.png
│ ├── ***.jpg
├── js
│ └── index.js
├── less # less分模块
│ ├── adapter.less
│ ├── banner.less
│ ├── index-swiper.less
│ ├── index.less
│ ├── mixins.less
│ ├── nav.less
│ ├── reset.less
│ ├── tabs.less
│ ├── test.less
│ ├── topBar.less
│ └── var.less
├── lib #三方库
│ ├── font-awesome
│ ├── less
│ │ ├── less.js
│ │ └── less.min.js
│ ├── swiper
│ └── zepto
├── index-swiper.html
├── index.html
└── readme.md
使用less对rem进行适配
- index.less引入当前页面所需要的所有模块，这样各个模块中的变量就可以相互使用
/*index.less 引入所需要的所有模块*/
//变量
@import "var";
//混入
@import "mixins";
//适配
@import "adapter";
//重置样式
@import "reset";
//模块
@import "topBar";
@import "banner";
@import "nav";
@import "tabs";
- var.less 定义项目用到的所有变量
@charset "UTF-8";
//变量
//rem适配方案不好维护 设备会更新 设计稿尺寸 预设基准值
//适配主流设备十几种
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸
@psdWidth:750px;
//预设基准值
@baseFontSize:100px;
//设备的种类
@len:length(@adapterDeviceList);
//主体颜色
@snColor:#fabc09;
- mixins.less项目所有混入代码
less没有循环语法，使用函数的迭代模拟循环，给函数的执行附加条件，根据数组的长度去停止当前循环
//遍历使用的是for循环
//需要序号来判断 通过序号遍历 @index 1 开始
//遍历成功
//提取数组中数据extract(@adapterDeviceList,@index)
.adapterMixin(@index) when ( @index > 0){
@media (min-width: extract(@adapterDeviceList,@index)){
html{
font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
}
}
.adapterMixin( @index - 1);
}
- adapter.less 适配方式，调用混入文件中的自定义函数
.adapterMixin(@len);
项目搭建
本项目以750px作为设计稿宽度,预设基准值为100px进行适配.
版心
width:100%是因为适配宽度为750px,720px当设备宽度750 > 设备宽度 > 720时,会以720为基准进行适配,这样会造成屏幕两边有空白不利于显示.rem一般用作内部元素(内容)的布局:图标,字体,输入框等等- 页面的大的布局一般会结合其他布局,如百分比/伸缩布局等等
注意:
大的布局容器宽度要与设计稿一致是宽度最好使用
100%
/*版心*/
.sn_container{
position: relative;
width: 100%;
max-width: 750px;
min-width: 320px;
margin: 0 auto;
padding-top: 90rem/@baseFontSize;
padding-bottom: 100rem/@baseFontSize;
}
轮播图
因为图片本身具有自适应特性,不需要设为rem,使用百分比进行等比缩放即可
- 结构
<!--轮播图-->
<div class="sn_banner">
<ul>
<li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner02.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner03.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner04.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner05.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner06.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner07.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
</ul>
<ul>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
- 样式
.sn_banner{
width: 100%;
overflow: hidden;
position: relative;
ul{
&:first-child{
width: 100%*10;
transform: translateX(-100%/10);
-webkit-transform: translateX(-100%/10);
li{
width: 100%/10;
float: left;
a{
display: block;
width: 100%;
img{
display: block;
width: 100%;
}
}
}
}
&:last-child{
position: absolute;
right: 20rem/@baseFontSize;
bottom: 20rem/@baseFontSize;
li{
margin-left: 12rem/@baseFontSize;
width: 12rem/@baseFontSize;
height: 12rem/@baseFontSize;
border-radius: 50%;
float: left;
background: #fff;
&.now{
background: @snColor;
}
}
}
}
}
工具使用
安装tree-node-cli
npm install -g tree-node-cli
# 执行如下命令即可在终端中生成，复制保存下来即可。
treee -L 3 -I "node_modules|.idea|objects|.git" -a --dirs-first
说明
windows用户需要用treee代替tree，避免和系统的tree命令冲突。 treee
-
指定路径的级别为3级。
-L 3 -
忽略文件夹（正则表达式匹配的，
.git会匹配到.gitignore,所以.gitignore文件没有显示出来）。
-I "node_modules|.idea|objects|.git" -
显示所有文件（默认前缀有
.的不会显示，例如".electron-vue）。
-a -
目录在前，文件在后（默认是字母排序，和
idea显示的顺序不一致）。
--dirs-first
完整说明
-V, --version 输出版本号
-a, --all-files 打印所有文件，包括隐藏文件
--dirs-first 目录在前，文件在后
-d, --dirs-only 仅列出目录
-I, --exclude [patterns] 排除与模式匹配的文件。用 | 隔开,用双引号包裹。 例如 “node_modules|.git”
-L, --max-depth <n> 目录树的最大显示深度
-r, --reverse 按反向字母顺序对输出进行排序
-F, --trailing-slash 为目录添加'/'
-h, --help 输出用法信息
swiper插件使用
<!--轮播图-->
<style>
.swiper-container img{
width: 100%;
display: block;
}
</style>
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide"><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner02.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner03.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner04.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner05.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner06.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner07.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
</ul>
<ul class="swiper-pagination">
</ul>
</div>
<script src="lib/zepto/zepto.min.js"></script>
<script src="lib/swiper/js/swiper.jquery.min.js"></script>
<script>
$(function () {
/*
* 1.自动轮播
* 2.无缝循环
* 3.指示功能
* */
new Swiper('.swiper-container',{
autoplay:1000,
loop:true,
pagination:'.swiper-pagination',
autoplayDisableOnInteraction:false
});
})
</script>