标签：变量 less 适配 html rem css

一  css弊端 css是非程序式语言，没有变量、函数、作用域；代码间看起来没有逻辑，冗余度高；没有好的计算能力；不方便扩展和复用； 二  less简介 是一门css的扩展语言，称为css 的预处理器

• 并没有减少css的功能，是在现有的css语法上加入程序式语言的特性，即扩展了css的动态特性
• 引入了变量、运算、函数等功能

三 less使用 1.变量的定义与使用 变量命名规范： eg； @color:deeppink;        //定义粉色的变量 body{        //使用     background-color:@color; }

• 只要在上面更改变量，所有的引用都可以变了

2.less的编译 要编译成css文件才能使用 vs code 中的easy  less插件 3.less的嵌套 （1）嵌套 less中这样写：子元素直接写在父元素里 编译出的css是这样的： （2）伪类 嵌套的时候默认为子代选择器，如果不想表示子类，想表示伪类、交集、伪元素选择器，则内层选择器前加上&符号 4.less的运算 在less中数字、颜色、变量都可以运算 语法：直接用+ - * / 符号

•  运算符左右要有空格隔开   1px + 5
• 两个不同单位的运算，取前一个值的单位。只有一个数有单位就取这个单位。
• 颜色之间有数字也可以运算，eg：#666-#222=#444

四 rem适配方案 场景：等比例适配当前设备；使用媒体查询来等比缩放适配 1.rem开发适配方案一 设计稿中iphone678一般750px宽

• 要把屏幕竖着分成15等分（也可以是20份、10份），把每一份750/15=50px作为html字体大小
• 在320px的设备上时，字体大小为320/15=21.33px

设置不同屏幕下的html文字大小： 然后设置元素的比例宽高是多少rem就好了。rem表示html字体大小的倍数 2.rem开发适配方案二flexible.js+rem 是方案一的优化 优势：不用写不同屏幕的媒体查询了 原理：把当前设备竖着划分成10等分，需要知道html大小，然后：

• 可以限定最大750px

3.px转换成rem的插件：cssrem setting中更多中settingjson 搜索cssroot 默认html16px，我们改成75（因为屏幕750,10份）       五 轮播图 1.  下载swiper插件 官网 package中swiper.min.css，css中swiper.css 官网复制html css js结构 2. 使用 ？？？？？？？？？？                        

标签：变量,less,适配,html,rem,css
来源： https://www.cnblogs.com/mhhh/p/15767024.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。