rem 适配布局 + LESS + 媒体查询

1. rem 基础

 rem 是一个相对单位,类似于 em ,em 是父元素字体大小。

 em 是相对于父元素  的字体大小来说的

 rem 是相对于 html 元素 字体大小来说的

 rem 优点 就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制

 比如:根元素(html )设置的 font-size=12px;非根元素设置 width:2rem;则换成px 表示 24px(12px*2rem)

2. 媒体查询(@media)

 @media 可以针对不同的屏幕尺寸设置不同的样式

 语法规范:

@media  mediatype  and | not | only (media feature){

  CSS - Code;

}

  • 用 @media  开头
  • mediatype  媒体类型     

  all:用于所有设备,

  print:用于打印机和打印预览,

  screen:用于电脑屏幕,平板电脑,手机等

  • 关键字 and  not   only   

  and:可以将多个媒体特性连接到一起,相当于“且”的意思

  not:排除某个媒体类型,相当于“非”的意思,可以省略

  only:指定某个特定的媒体类型,可以省略

  • media  feature 媒体特性 必须有小括号包含

  width:定义输出设备中页面可见区域的宽度

  max-width:定义输入设备中页面最大可见区域宽度

  min-width:定义输入设备中页面最小可见区域宽度

 案例:

@media screen and(max-width:500px){

  body{

    background:pink;

  }

}

 注意点:

1. screen 还有 and 必须带上,不能省略

2. 小括号中的 数字 后面必须跟单位,970px  这个 px 不能省略

3. 媒体查询最好的方法就是从小到大

3. 媒体查询 + rem 实现元素动态大小变化

 rem 单位是跟着 html 来走的,有了 rem 页面元素可以设置不同大小尺寸

 媒体查询可以根据不同设备宽度来修改样式

 媒体查询 + rem 就可以实现不同设备宽度,实现页面元素大小的动态变化

4. 引入资源(理解)

 当样式比较繁多的时候,可以针对不同的媒体使用不同 stylesheet(样式表)。

 原理,直接在 link 中判断设备的尺寸,然后引入不同的css文件。

 语法规范:

<link  rel = "stylesheet"  media = "mediatype   and | not | only (media  feature)"  href = " style.css" >

 案例:

<link  rel = "stylesheet"  media = "screen  and (min-width:320px)"  href = " style320.css" >

<link  rel = "stylesheet"  media = "screen  and  (min-width:640px)"  href = " style640.css" >

5. Less基础

 Less 变量:变量是指没有固定的值,可以改变的,因为CSS中的一些颜色和数值等经常使用,样式后缀名.less 。

 @变量名:值;

 1. 变量名规范

  • 必须有 @ 为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感

 案例:

@color:pink;// 定义变量

body{

  color:@color;  // 使用变量

}

 2. 编译

通过vscode中的插件 Easy LESS 编译为 css 文件,只要保存一下 Less 文件,会自动生成 CSS文件

 3. Less 嵌套

1.内层选择器的前面没有 & 符号,则它被解析为父选择器的后代

  CSS中选择器嵌套:

  #header .logo{

    width:10px;

  }

  Less 嵌套写法:

  #header{

    .logo{

      width:10px;

    }

  }

 2. 如果有 & 符号,它就被解析为父元素自身或父元素的伪类(交集|伪类|伪元素选择器)

   CSS中选择器嵌套:

   a:hover{

     color:red;

   }

   Less 嵌套写法:

   a{

     &:hover{

       color:red;

     }

   }

3.Less 运算

 less 中运算 可以使用 加(+),减(-),乘(*),除(/)四种运算

 运算符中间左右有个空格隔开 1px  +  5

 对于两个值之间只有一个值有单位,则运算结果就取该单位

 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位

案例:

@font:50px;

@border:5px +5;

div{

  width:200px - 50;

  height:200px * 2;

  border:@border  solid #ccc;

  img{

    width:82rem / @font;   //1.65rem

  }

}

6. rem + less + @media 开发

 动态设置 html 标签 font-size 大小

① 假设设计稿是 750px

② 假设整个屏幕划分为 15 等分(划分标准不一,可以是20份,也可以是10份)

③ 每一份作为 html 字体大小,这里就是 50px

④ 在320px 设备的时候,字体大小为 320 / 15 就是21.33px

⑤ 用页面元素的大小 除以不同的 html 字体大小 会发现他们的比例还是相同的

⑥ 比如 以 750px 为标准设计稿

⑦ 一个 100*100像素的页面元素在 750 屏幕下,就是 100 / 50 转换为 rem 是 2rem * 2rem 比例是1:1

⑧ 320 屏幕下,html字体大小为 21.33  则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是1:1

⑨ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果。

相关推荐