前言:html,body{height:100%} 这句话的意思是 屏幕(可视窗口)的高度和html,body的高度一样
1.使用<script></script>标签引入rem.js 2.设置cssrem根标签值 ui 图除以2 再除以10 换数据需要重启vscode 3.测量的尺寸 2倍图除以2 4.宽度使用百分比或者rem,内外边距,文字大小,高度等使用rem
rem (root em)是一个相对单位，类似于em，em是当前盒子字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
根html 为 12px html { font-size: 12px; } 此时 div 的字体大小就是 24px div { font-size: 2rem; }rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。
rem.js将html根标签文字大小(1rem的值)动态的设置为当前屏幕宽度的1/10 链接js用script标签 src="路径"千万不要用Link !!!
就是根据不同的屏幕大小,引入不同的样式文件
安装easy less插件
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
Less 里面写 @witdh: 10px + 5; div { border: @witdh solid red; } 生成的css div { border: 15px solid red; } /*Less 甚至还可以这样 */ width: (@width + 5) * 2; 乘号（*）和除号（/）的写法运算符中间左右有个空格隔开 1px + 5对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位如果两个值之间只有一个值有单位，则运算结果就取该单位混合语法.类名(); 点类名括号; 混合的调用 只能调用类选择器和id选择器
.box{ width:100px; height:200px; backgroud-color:pink; } .nav { .box(); font-size:100px; }不建议超过3层嵌套,这样也不利于维护 如果超过三层,可以选择第三层的子集继续开始新的less结构
div{}; div p {}; // 将css改为less #header .logo { width: 300px; } #header { .logo { width: 300px; } }如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接
.father { p { float: left; font-size: 14px; color: skyblue; a { text-decoration: none; font-size: 16px; color: yellowgreen; &:hover{ color:red; } } span { font-size: 20px; color: orange; } } ul { float: left; li { float: left; color: skyblue; list-style: none; font-size: 30px; } } }语法: @import "less文件" 注意@import 后面必须有控格 作用:提高了css文件的维护效率
看见 / 符号就自动计算了 比如背景里面的背景定位和背景尺寸中间的/符号.
background:url(a.jpg) no-repeat 40px 50px / 200px 300px;这种情况下 less会自动把/ 当作运算符
border-radius:200px 20px 100px 60px / 100px 200px 300px 60px;这种情况下也会自动运算
解决方法:1.分开写 2.写完less,单独再css里面写.
阿里用的就是这个,后面js也要学到
注意:最后写完以后发现,不适配pc端,都乱了 这个时候用媒体查询,限制死最大rem值 这里最大值一定是最大值的1/10
如果设置10份,那就设置 750 / 10 份 一份 75px
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- 链入js适配文件 --> <script src="./js/rem.js"></script> <link rel="stylesheet" href="./css/style.css" /> <!-- 页面只能链入css文件 --> <link rel="stylesheet" href="./css/index.css" /> <!-- rem适配4步 1.srcipt 2.cssrem设置为ui图/2/10 3. 2倍图测量尺寸/2 4.宽高都用百分比或者rem --> </head> <body> <!-- 版心 --> <div class="container"> <!-- 顶部栏 --> <div class="top-bar"> <img src="./images/topnav.png" alt="" /> </div> <!-- 优惠部分 --> <div class="cheap"> <div class="cheap-card"> <div class="cheap-card-hd"> <span>全场优惠</span> <span>0/1</span> </div> <div class="cheap-card-bd"> <a href="#" class="icon-add"> <p>添加优惠</p> </a> </div> </div> <div class="cheap-card"> <div class="cheap-card-hd"> <span>优惠券</span> <span>0/3</span> </div> <div class="cheap-card-bd"> <a href="#" class="icon-add"> <p>添加优惠</p> </a> </div> </div> <div class="tips"> <h5>提示:</h5> <p>1.买家下单时只可选择其一(全场优惠或者优惠券)</p> <p>2.优惠券一旦设置后不可修改</p> </div> </div> </div> </body> </html>less
//先导入公共的base @import "base"; body { background-color: #eee; } // 版心 .container { width: 100%; // 限制一下版心的最大宽度768px max-width: 768px; margin: 0 auto; .top-bar { width: 100%; img { width: 100%; } } .cheap { padding: 0 0.32rem; .cheap-card { width: 100%; .cheap-card-hd { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 1.066667rem; font-size: 0.373333rem; span { &:nth-child(2) { color: #888888; } } } .cheap-card-bd { display: flex; justify-content: center; align-items: center; width: 100%; height: 2.986667rem; background-color: #fff; border: 0.08rem dashed #ccc; a { display: block; text-align: center; color: #ccc; font-weight: normal; p { font-size: 0.32rem; margin-top: 0.24rem; } } .icon-add { font-size: 1.333333rem; color: #aeaeae; } } } .tips { width: 100%; margin: 50px 0; color: #888888; p { margin: 5px 0; } } } }