rem+less

最新推荐文章于 2022-11-14 08:41:01 发布

幻墨如烟u

最新推荐文章于 2022-11-14 08:41:01 发布

阅读量269

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/sjs1766349405/article/details/121234452

版权

less

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

一、rem基础

1.em和rem

我们前面的百分比布局和伸缩布局如果单独使用，页面发生变化的时候，我们的字体大小不会发生变化，而且元素的高度也不会随着屏幕的变化而变化。

(1)em

em也是一个相对单位，基准是参照父元素字体大小。

 <style>
      html {
        font-size: 12px;
      }
      #box {
        /* 相当于html的字体大小的2倍，也就是2*12=24em */
        font-size: 2em;
      }
      p {
        /* 相当于父元素#box的2倍，也就是24*2=48em */
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <div id="box">
      我是父元素
      <p>我是子元素</p>
    </div>

(2)rem

rem (root em)是一个相对单位，基准是相对于html元素的字体大小。

 <style>
      html {
        font-size: 12px;
      }
      #box {
        /* 相当于html的字体大小的1倍，也就是1*14=24em */
        font-size: 1rem;
      }
      p {
        /* 相当于html字体大小的2倍，也就是12*2=24em */
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <div id="box">
      我是父元素
      <p>我是子元素</p>
    </div>

(3)总结

由于px是固定单位，em的参照点又是变化的父元素，所以我们以后移动端开发的单位最好是选择rem.因为所有的元素的参照点都是html根元素的字体大小。如果我们再能设置在不同的移动设备终端，更改一下html的字体大小，那么对应的每个标签的字体大小也会跟着改变，也就是达到了不同终端的页面适配的目的。

二、媒体查询

1.什么是媒体查询

媒体查询（Media Query）是CSS3新语法。

使用 @media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式

2.媒体查询语法规范

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

（1）mediatype 查询类型

媒体类型主要有下面几种

all:用于所有设备

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

screen:用于电脑屏幕、平板和手机终端

（2）关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

（3）媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

（4）媒体查询书写规则

三、less 基础

1.维护css弊端

CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力

2.Less 介绍

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。

3.Less 使用

（1）变量

使用less以后，css中也可以定义变量了

@变量名:值;

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

比如新建01.less文件.里面代码如下

@color: #000;

div {
  background: @color;
}

(2)vocode Less插件

Less嵌套

@color: #000;
@marginT: 10px;
div {
  background: @color;
  margin-top: @marginT;
  ul {
    list-style: none;
    li {
      width: 20%;
      float: left;
      background-color: @color;
    }
  }
}

生成的01.css代码如下：

div {
  background: #000;
  margin-top: 10px;
}
div ul {
  list-style: none;
}
div ul li {
  width: 20%;
  float: left;
  background-color: #000;
}

（4）&号拼接

如果遇见（交集|伪类|伪元素选择器），利用&进行连接

比如01.less代码如下：

a {
  &:hover {
    color: red;
  }
}

div&.box {
  color: yellow;
}

div {
  &::before {
    content: "";
    display: block;
  }
}

生成的01.css代码如下：

a:hover {
  color: red;
}
div.box {
  color: yellow;
}
div::before {
  content: "";
  display: block;
}

（5）less运算

less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

比如01.less代码如下：

@bd: 1px;
div {
  border: @bd+1 solid #000;
}

div {
  &.box {
    width: @bd*5+2;
  }
}

生成的01.css代码如下：

div {
  border: 2px solid #000;
}
div.box {
  width: 7px;
}

幻墨如烟u

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录