移动端布局rem适配和less的使用

321 阅读1分钟

今天主要学习rem布局, Rem布局

根据HTML文字大小来完成文字缩放 @media mediatype and|not|only(media featuer){

Css-code} Screen 电脑、平板、手机

@media screen

Ant:且,将多个连接到一块

Not:排除某个属性

Only:指定某个属性

Width 可见区域宽度

Min、max-width,最大最小区域。要加括号包起来

在屏幕上 并且 最大宽度是800像素 设置我们想要的样式

@media screen and (max-width:800px)

 

引入方式:link,后面也要加media=“screen and (max-width:800px)”

 

设置html的文字大小37px

用想要设置的高宽文字大小/37px得出余数等于相对应的rem单位

 

Less是css的预处理器,后缀名为.less

加上&符号,表示不生成后代选择器

@import url();

@import'./'

导入其他less文件

将less生成所有的css文件导入文件夹

Easy LESS的扩展配置,在最后一行加

 "less.compile":{

"out": "./css/"

   }

或者在less文件的第一行加

// out: ./css/