CSS 移动端内容总结(三)rem适配布局

最新推荐文章于 2025-07-06 16:01:26 发布

原创最新推荐文章于 2025-07-06 16:01:26 发布 · 589 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #css #css3

本文总结了CSS在移动端的应用，包括rem基础概念、媒体查询的使用、Less预处理器的基本操作，以及两种常见的rem适配方案。通过实例解析了如何通过媒体查询结合rem进行响应式布局，并介绍了flexible.js在移动端适配中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 内容总结

1.rem基础

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

不同的是rem的基准是相对于html元素的字体大小

比如：html：设置font-size=12px，非根元素设置width：2rem，则换成px表示就是24px

2.媒体查询

Media Query 是CSS3新语法

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

语法规范

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

用@media开头注意符号
mediatype媒体类型

值说明
all 用于所有设备
print 用于打印机和打印预览
scree 用于电脑屏幕、平板电脑、智能手机等

值	说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕、平板电脑、智能手机等

关键字and not only

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

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

值解释说明
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

  <style>
   @media screen and (max-width:500px) {
      body {
        background-color: rgb(159, 185, 64);
      }
    }
    @media screen and (max-width:800px) {
      body {
        background-color: rgb(224, 54, 54);
      }
    }
  /* 从小到大写 */
  </style>

媒体查询+rem案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    @media screen and (min-width: 320px) {
      html {
        font-size: 50px;
      }
    }

    @media screen and (min-width: 640px) {
      html {
        font-size: 100px;
      }
    }

    div {
      height: 1rem;
      font-size: .5rem;
      background-color: rgb(211, 245, 156);
      color: aliceblue;
      text-align: center;
      line-height: 1rem;
    }
  </style>
</head>

<body>
  <div>购物车</div>
</body>

</html>

引入资源

link判断设备尺寸，引入不同样式表

html文件

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css320.css" media="screen and (min-width:320px)">
  <link rel="stylesheet" href="css640.css" media="screen and (min-width:640px)">
</head>

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</body>

css320.css

html{
  font-size: 20px;
}
div{
  width: 100%;
  height: 2rem;
}

css640.css

html{
  font-size: 12px;
}
div{
  width: 20%;
  height: 2rem;
  float: left;
  background-color: rgb(245, 201, 201);
}

3.Less基础

Less变量：@变量名：值；
1. 变量命名规范
  - 必须有@为前缀
  - 不能包含特殊字符
  - 不能以数字开头
  - 大小写敏感
```
@color：pink；
body{
  background-color:@color;
}
```

Less编译

Easy Less 插件用来把less文件编译为css文件

在这里插入图片描述

html文件

  <link rel="stylesheet" href="css320.css"><!--引入生成的css文件-->
</head>

<body>
  <div></div>
</body>

less文件

@color:red;
div{
  width: 100%;
  height: 20px;
  background-color:@color;
}

在这里插入图片描述

Less嵌套

/*css写法*/
#header .logo{
    width：300px;
}
#header:hover{
    width：200px;
}
#header::after
    content:'';
}

//less写法
#header{
    .logo{
        width：300px;
    } 
    &:hover{
        width：200px;
    }
    &::after{
        content:'';
    }
}

Less运算 ：+ - * / ，除法运算要加（）（320px/15），两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准，如果两个数单位不一样，以第一个数单位为准
```
//less里面写
@width:10px + 5;
div{
    border:@width solid red;
    background-color：#666 - #333;
}
//生成的css
div{
    border:15px solid red;
    background-color：#333;
}
```

4.rem适配方案

rem元素大小取值方法：

公式：页面元素的rem值=页面元素值（px）rem/ html font-size字体大小=页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）

假设想要的：页面元素值：100px*100px： div{width：100px；height：100px}

例子：2rem=(100rem / (750/15))

模板是750px 算出来的是比例2rem

最后用比例*根据@media得到的当前窗口的html的font-size 就是元素在当前窗口的宽度或高度

方案一：less+媒体查询+rem

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    @media screen and (min-width:320px) {
      html {
        font-size: 21.33px;
      }
    }

    @media screen and (min-width:720px) {
      html {
        font-size: 50px;
      }
    }

    div {
      width: 2rem;
      height: 2rem;
      background-color: rgb(143, 228, 122);
    }
  </style>
</head>

<body>
  <div></div>
</body>