移动适配rem

91 阅读1分钟

移动适配rem

屏幕宽度不同,网页元素尺寸不同

媒体查询------写在style里,媒体特性里无空格

@media (媒体特性 width:375px) {

​ 选择器 {

​ css属性

​ .box {

​ font-size:

​ }

​ ......

​ }

电脑的默认缩放会影响浏览器media效果不适用

min-width 最小

max-width 最大

可以搭配and使用完成

(min-width:xxxpx) and (max-width:xxxpx)多少到多少以内的写法。

flexible框架

这是手淘团队开发出的一个框架,会根据屏幕尺寸自动适配

script标签要放在要放在body的结束标签前面

px to rem使用方法 alt+z 转换所有数值px-rem

预处理语言 less

less也叫糖衣语法,用于各种简化写法

单行注释 //注释内容

快捷键: ctrl+/

块注释:shift+alt+a

运算

1.单位在表达式中不占单位,如果有多个,以第一个为准。

2.运算符前后要么用空格隔开,要么都不用。

内嵌

变量用法------

@themeColor @fontSize 。。。。。

1,设定

@变量名字:变量; <--改变这个变量,一变全变。

2,需要的变量的元素例如,给其添加

color:@变量名字

导入less------

@import url(./目标文件);

或者 @import ‘./目标less文件’;

不要忘记import后面的空格和最后的《;》

导出less---------

//out: ../目标位置/你要导出之后的名字

文件夹名称后面一定要加/

1,css导出路径后面一定要写/,如果不写只是普通的文件名

2.less配置信息,一般要写在第一行。

禁止导出---------

//out: false

压缩导出----------

//compress:true,//out:./目标位置/文件名字