移动适配rem

qq_40832034

已于 2023-02-20 13:22:32 修改

阅读量1.8k

点赞数

文章标签： css css3 html

于 2022-06-11 16:06:12 首次发布

本文链接：https://blog.csdn.net/qq_40832034/article/details/124955670

版权

前端学习专栏收录该内容

37 篇文章 1 订阅

订阅专栏

一、移动适配

背景：因为移动端不同设备宽高不同，需要一种方法使得对所有宽高布局一致。
方法：
rem：目前多数企业在用的解决方案
vw / vh：未来的解决方案

用像素做单位没有办法实现等比例放大缩小，用百分比做单位也不能完全解决。
对于宽度来说，其父级元素无须确定宽度就能设置百分比
若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式

1、rem单位

相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小

<style>
    html{
      font-size: 20px;
    }
    div{
      width: 3rem;
      height: 3rem;
      background-color: aqua;
    }
  </style>

在这里插入图片描述

存在问题：
1、手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
2、设备宽度不同，HTML标签字号设置多少合适？

2、rem移动适配

(1)媒体查询（解决问题1）

目标：能够使用媒体查询设置差异化CSS样式

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
在这里插入图片描述
于是只有当移动端的宽度是320px时，才会有html标签为32px。

(2)移动适配（解决问题2）

目标：能够使用rem单位设置网页元素的尺寸

目前 rem 布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10，即如果网页宽度是320，设置HTML标签字号为32px大小是合适的
然后再配合rem就能实现不同设备中合适的html大小效果

<style>
    @media (width:360px) {
      html{
        font-size: 36px;
      } 
    }
    .box{
      width: 5rem;
      height: 3rem;
      background-color: aqua;
    }
  </style>

<body>
  <div class="box"></div>
</body>

这样得到的box应该就是长36x5=180px，宽36x3=108px;

rem适配原理：怎么根据设计稿中的px确定rem

确定设计稿对应的设备的HTML标签字号，如320px的html字体大小应为32px
rem单位的尺寸，如若设计稿中的宽度为68px，rem大小=68 / 32=1.813
设置weith:1.813rem

但是这样存在不同视口的设备分别需要一个一个设置html字体大小（根字号）的问题，太麻烦

解决：使用flexible js配合rem

flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
在这里插入图片描述

<style>
    .box{
      width: 5rem;
      height: 3rem;
      background-color: aqua;
    }
  </style>

<body>
  <div class="box"></div>
  <script src="../js/flexible.js"></script>
</body>

即可实现不同设备中网页元素尺寸等比缩放效果，原理就是上面的rem适配原理

二、less

以上步骤，比较繁琐的是计算px转rem时候需要另外计算，因为css不支持计算功能
——引入less，它是一个CSS预处理器, Less文件后缀是.less

1、实现

做法：在html目录下写一个以.less为后缀的文件，里面写入css想写的东西，只不过less中可以支持算术

.box{
    width: (68 / 37.5rem);
    height: (68 / 37.5rem);
    background-color: aqua;
}

写完保存，同一路经下会自动生成.css文件，里面是计算机按照less处理好的css

.box {
  width: 1.81333333rem;
  height: 1.81333333rem;
  background-color: aqua;
}

html中引入css，注意不能引入less

2、注释

单行注释
语法：// 注释内容
快捷键：ctrl + /
块注释
语法：/* 注释内容 */
快捷键： shift + alt + A

3、语法

① 使用less完成计算

运算：
加、减、乘直接书写计算表达式
除法需要添加小括号或 .

注意：表达式存在多个单位以第一个单位为准

②使用Less嵌套写法生成后代选择器

在这里插入图片描述

注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

在这里插入图片描述

③变量

存储数据，方便使用和修改。

思考：
Ø 网页中, 文字文字颜色基本都是统一的，如果网站改版，变换文字颜色，如何修改代码？
Ø 方法一：逐一修改属性值（太繁琐）
Ø 方法二：把颜色提前存储到一个容器，设置属性值为这个容器名

语法：
Ø 定义变量：@变量名: 值;
Ø 使用变量：CSS属性：@变量名;
在这里插入图片描述

④导入

思考：
Ø 开发网站时，网页如何引入公共样式？
Ø CSS：书写link标签
Ø Less：导入

导入: @import “文件路径”
在这里插入图片描述
导入后相应的css文件中就会有被导入的内容

⑤导出到指定路径

方法一：配置EasyLess插件，实现所有Less有相同的导出路径
方法二：控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

// out: ./css/
// out: ./css/c.css

注意一定要放第一行

⑥禁止导出

有些less文件不需要被导出，如bass.css，common.css，只需将相应的less文件在index.less中导入即可，不必非要生成对应的css文件，这种时候可以禁止导出，语法如下：

在less文件第一行添加: // out: false

三、实战–游乐园项目

1、首先搭建项目结构

注意index.html中需要引入的东西
在这里插入图片描述
base.css和normalize.css没有直接在html中引用，而是通过base.less和normalize.less在index.less中导入，因为这两个文件都有写禁止导出。

2、移动端布局

通常有主体和导航栏构成，底部导航栏不应占用整体位置否则主题内容的后面相应高度会被挡住，所以需要在主体内容中加一个

padding-bottom: (50 / 37.5rem);

目的是使得导航栏不会遮住任意主体内容。
在这里插入图片描述

注意底部标签栏要定义宽度，否则定位脱标会按照实际内容决定宽度

在这里插入图片描述

3、定义根变量

移动端中高度宽度、字体大小等一系列的size都不能直接用测量的px做单位，因为会有不一样的视口大小，必须全部转换为rem，除以视口宽度的十分之一。这里可以定义其为变量，方便水写和修改。
在这里插入图片描述

4、制作banner滑动图

因为banner滑动图往往底部会有小圆点，为了之后方便定位这个小圆点，这里设置其高度。（虽然是否设置高度的显示效果不变）在这里插入图片描述

 .banner{
        height: (160 / @rootsize);
    }

5、字体图标调节大小

注意，字体图标本质是文字，调大小用font-size，而不是width和height，如果调节不生效尝试提升优先级，将标签选择器改为类选择器。

.iconfont{
            font-size: (24 / @rootsize);
        }

6、不同状态

在这里插入图片描述

 <!-- 活动状态 -->
                 <div class="act off">进行中</div>

 // 活动状态
    .act{
        position: absolute;
        left: (15 / @rootsize);
        top: (-4 / @rootsize);
        width: (68 / @rootsize);
        height: (29 / @rootsize);
        background-image: url(../images/status_active.png);
        background-size: contain;
        font-size: (12 / @rootsize);
        color: #ffffff;
        text-align: center;
        line-height: (26 / @rootsize);
        // 已经截止的工作状态
        &.off{    //相当于同时选中act和off
            background-image: url(../images/status_default.png);
              }
        }

后台监测时间如果是进行中，就不给标签加off类，否则给其加off类即可，添加off就变灰色，方便。

注意这个.off中改变的类型最好是.act中有的属性，不是嵌套的，
如下面：如果a的颜色写在.iconfont和p中，下面color修改就不会生效。

footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height:(50 / @rootsize);
    background-color: #FECA49;

    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    a{
        color: #D78B09;
        .iconfont{
            font-size: (24 / @rootsize);
        }
        p{
            font-size: (11 / @rootsize);
        }
        &.current{
            color: #FFFFFF;
        }
    }
}