less 基础使用

Posted 2021-03-04 zzhqdkf

less安装

1，首先需要安装node。js  版本8.0以上   node -v 检查版本

2，基于node在线安装less     npm i -g less   使用lessc -v 检查版本

--

使用@开头，定义变量名     @color:pink;

 

less编译

　　Easy LESS插件用来把less文件编译未css文件

　　安装完毕插件，重新加载vscode  只要保存一下less文件会自动生成css文件

 

less嵌套

　　伪类的嵌套     a{      &:hover{}    }

 

less运算     运算符左右两侧必须加空格     如果两个参与运算的数都有但那位，那么运算结果以第一个的单位为准

width:200px + 100     width:82 / 50rem (1.64rem)

 

rem适配方案   在不同屏幕下  页面元素自动等比例缩放

<meta name="viewport" content="width-device-width,user-scalable=no,

initial-scale=1.0, maximum-scale=1.0, minmum-scale=1.0">

link rel   xxxxxx  href="caa/normalize.css">

 

　　@media screen and (min-width:320px){html{font-size:21.33px;}}  你如果在320屏幕下字体未21.33

       @media screen and (min-width:750px){html{font-size:50px;}} 你如果在750屏幕下字体大小未50px

 div{width:2rem}  首先选一套标准尺寸例如在750屏幕下来定义尺寸  其他的自动适配

 

-------------苏宁网页案例制作---------------

新建适配的css文件 ，因为PC端也可以打开我们的网页 默认字体50px　　这句话卸载最上面

//设置常见的尺寸，修改html的字体大小

html{font-size:50px};

@no:15;

//320

@media screen and (min-width:320px){html{font-size:320px/@no;}}

//360

@media screen and (min-width:360px){html{font-size:360px / @no;}}

//375 ip 678

@media screen and (min-width:360px){html{font-size:375px / @no;}}

//384

@media screen and (min-width:384px){html{font-size:384px / @no;}}

//400

@media screen and (min-width:400px){html{font-size:400px / @no;}}

//414

@media screen and (min-width:414px){html{font-size:414px / @no;}}

//424

@media screen and (min-width:424px){html{font-size:424px / @no;}}

//480

@media screen and (min-width:480px){html{font-size:480px / @no;}}

//540

@media screen and (min-width:540px){html{font-size:540px / @no;}}

//720

@media screen and (min-width:720px){html{font-size:720px / @no;}}

//750

@media screen and (min-width:750px){html{font-size:750px / @no;}}

--在index里导入common. 

@import "common"

@import 导入的意思，可把一个样式文件导入到另外一个样式文件里面

link时把一个 样式文件引入到html页面里面    首页里只引入indexcss文件就行，好了适配完成

 

接下来，给body指定最小宽度

 

body{

min-width：320px;    最小宽度适配到320px;

width:15rem;             宽度未15rem

margin:0 auto;          在电脑端居中显示

line-height:1.5;         行高

font-family:Arial,Helvetica      文字;

background:#F2F2F2;      背景颜色

}

@baseFont:50;

 导航

固定，宽，搞固定定位居中，left50% transfrom:translateX(-50%) top 0

导航布局，flex布局，左右a标签rem固定 中间flex:1

左右宽高，margin上右下左距离     （感觉给父元素padding应该也可以，还方便）

左盒子居然时一个背景图片，background：url（../xxxxx.png）no-repewat;

背景缩放  background-size:做盒子的宽度 左盒子的高度

右侧只有两个字，text-aligncenter line-height:右侧的高度 ok

输入框form>input    outline:none禁止文字蓝色背景  border:0 默认边框为零，设置字体大小，padding的左边距

轮播图下边的图片分为三个图片  div{display:flex;a{flex:1;img{width:100%}}}

nav模块 采用固定宽高，浮动的技术来布局

nav{width:750rem/@baseFont; a{ float:left;width:150rem/@baseFont;height:140rem/@baseFont;

img:{widht:82rem/50;height:82/50;display:block;margin:10rem/50 auto} } }

a{text-align:center}>span{font-size:25rem/50;      }

 

 

{额外的--（二倍精灵图的做法）1，把精灵图等比例缩放原来的一半，测量坐标 -81px 0 ;backgound-size:200px auto;}

 

@media screen and (min-width:360px){html{font-size:375px / @no;}}