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;}}