移动适配的使用和说明》

zimingyo

已于 2022-04-22 22:51:20 修改

阅读量167

点赞数

分类专栏：移动web 文章标签： css html5

于 2022-04-13 17:00:01 首次发布

本文链接：https://blog.csdn.net/zimingyo/article/details/124151210

版权

移动web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

解决方案

rem：目前多数企业在用的解决方案
vw/vh：未来的解决方案

rem

网页效果
屏幕宽度不同，网页元素尺寸不同（等比缩放）
px单位或百分比布局可以实现吗？
px单位是绝对单位
百分比布局特点宽度自适应，高度固定
适配方案
rem
vm/vh
rem单位
相对单位
rem单位是相对于HTML标签的字号计算结果
1rem=1HTML字号大小

问：

手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
答： 媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的CSS样式
当某个条件成立，执行对应的CSS样式

写法：
@media（媒体特性）{
选择器{
CSS属性
}
}
设备宽度不同，HTML标签字号设置多少合适
目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

rem适配原理
rem单位尺寸

确定设计稿对应的设备的HTML标签字号
查看设计稿宽度–>确定参考设备宽度（视口宽度）–>确定基准根字号（1/10视口宽度）
rem单位的尺寸
rem单位的尺寸=px单位/基准根字号

flexible
使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

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

在这里插入图片描述

.box {
    /* 68 * 29 */
    /* width: 68px; */
    /* 设计稿375, HTML 37.5   68/37.5 */
    width: 1.813rem;
    height: 0.773rem;
    background-color: pink;
}

<!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, initial-scale=1.0">
    <title>rem开发流程</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="box"></div>

    <script src="../js/flexible.js"></script>
</body>
</html>

less
项目结构
在这里插入图片描述

.father {
    color: red;

    width: (68 / 37.5rem);

    .son {
        background-color: pink;
    }
}

.father {
  color: red;
  width: 1.81333333rem;
}
.father .son {
  background-color: pink;
}

Less是一个CSS预处理器，Less文件后缀是.less（最后生成CSS文件）
扩充了CSS语言，使CSS具备一定的逻辑性，计算能力。
注意:浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件

与Less配套的编译插件
Easy Less:
在这里插入图片描述

作用：less文件保存自动生成css文件

Less语法

注释
单行注释：
语法：//注释内容
快捷键：ctrl+/

块注释：
语法：/注释内容/
快捷键：shift+alt+A
运算
加，减，乘直接书写计算表达式
除法需要添加小括号或 .
注意：

这是Less文件

.box {
    width: 100 + 10px;
    width: 100 - 20px;
    width: 100 * 2px;

    // 除法
    // 68  > rem
    width: (68 / 37.5rem);
    // height: 29 ./ 37.5rem;

   // height: 29 / 37.5rem;

}

嵌套
作用：快速生成后代选择器
语法：

.father {
  width: 100px;
}
.father .son {
  color: pink;
}
.father .son:hover {
  color: green;
}
.father:hover {
  color: orange;
}

less代码部分

.father {
    width: 100px;
    .son {
        color: pink;
        // & 表示当前选择器
        &:hover {
            color: green;
        }
    }

    &:hover {
        color: orange;
    }
}

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

less变量设置属性值
方法一：逐一修改属性值；
方法二：把颜色提前存储到一个容器，设置属性值为这个容器名

变量
方法二：把颜色提前存储到一个容器，设置属性值为这个容器名
变量：存储数据，方便使用和修改
语法：
定义变量：@变量名：值；
使用变量：CSS属性：@变量名

less文件的导入
网页引入公共样式的方法：
css：书写link标签
Less:导入
导入:@import “文件路径”；（若文件是less,写文件路径时，可以省略后缀）
Less文件的导出
方法一：
配置EasyLess插件，实现所有Less有相同的导出路径
配置插件：设置–>搜索Easy(EasyLess)–>在setting.json中编辑–>(注意，必须是双引号)

将所有的文件导入指定文件夹
在这里插入图片描述

效果图：

个体导入到指定文件夹下：

// out: ./abc/

// 个体导入到指定文件夹下
.father {
    width: 100px;
    .son {
        color: pink;
        // & 表示当前选择器
        &:hover {
            color: green;
        }
    }

    &:hover {
        color: orange;
    }
}

效果图：
在这里插入图片描述

Less文件禁止导出
在less文件第一行添加： //out: false

vw/vh

相对单位
相对视口的尺寸计算结果
vw:viewport width
1vw=1/100视口宽度
vh:viewport height
1vh=1/100视口高度

vw单位尺寸

确定设计稿对应的vw尺寸（1/100视口宽度）
查看设计稿宽度–>确定参考设备宽度（视口宽度）–>确定vw尺寸（1/100视口宽度）
vw单位的尺寸=px单位数值/（1/100视口宽度）

vh单位尺寸

确定设计稿对应的vh尺寸（1/100视口高度）
查看设计稿高度–>确定参考设备高度（视口高度）–>确定vh尺寸（1/100视口高度）
vh单位的尺寸=px单位数值/（1/100视口高度）

注意：使用vw,vh时，要么都设vw,要么都设vh;~~不要既有vw,也有vh~~

// out: ./
* {
    margin: 0;
    padding: 0;
}

// 68 * 29  -- vw
.box {
    width: (68 / 3.75vw);
    height: (29 / 3.75vw);
    background-color: pink;
}

.box2 {
    // vh
    width: (68 / 6.67vh);
    height: (29 / 6.67vh);
    background-color: green;
}

zimingyo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动适配的使用和说明》

解决方案rem：目前多数企业在用的解决方案vw/vh：未来的解决方案rem网页效果屏幕宽度不同，网页元素尺寸不同（等比缩放）px单位或百分比布局可以实现吗？px单位是绝对单位百分比布局特点宽度自适应，高度固定适配方案remvm/vhrem单位相对单位rem单位是相对于HTML标签的字号计算结果1rem=1HTML字号大小问：手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？答：媒体查询媒体查询能够检测视口的宽度，然后编写差异化的
复制链接

扫一扫

专栏目录