移动Web学习03

kuiini

已于 2024-03-07 00:15:42 修改

阅读量973

点赞数 21

分类专栏： CSS 文章标签：前端学习 less

于 2024-03-07 00:13:15 首次发布

本文链接：https://blog.csdn.net/kuiini/article/details/136521289

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

三、移动适配 - rem

rem
vw

1、谷歌模拟器

2、屏幕分辨率

屏幕分辨率：纵横向上的像素点数，单位是px
PC 分辨率
1920 * 1080
1366 * 768
……

缩放 150%
1920 / 150%
1080 / 150%

总结
硬件分辨率 → 物理分辨率（出厂设置）
缩放调节的分辨率 → 逻辑分辨率（软件/驱动设置）

3、视口

手机屏幕尺寸不同，网页宽度均为100%
网页的宽度和逻辑分辨率尺寸相同

视口：显示HTML网页的区域，用来约束HTML尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
		<!-- 视口标签：规定HTML尺寸，让HTML的宽度 = 逻辑分辨率的宽度/设备的宽度 -->   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

4、二倍图

概念：设计稿里面每个元素的尺寸的倍数

作用：防止图片在高分辨率频幕下模糊失真

现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
二倍图设计稿尺寸：750px。

5、适配方案

宽度适配：宽度自适应
百分比布局
Flex 布局

等比适配：等高等比缩放
rem
vw

6、rem 适配方案

rem

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 1.给HTML标签加字号 */
        html {
            font-size: 30px;
        }
        /* 使用rem单位书写尺寸 */
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

思考

手机屏幕大小不同，分辨率不同，用媒体查询设置不同的HTML标签字号。
设备宽度不同，HTML标签字号：
设备宽度大，元素尺寸大
设备宽度小，元素尺寸小

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立，执行对印的CSS样式
@media (媒体特性) {
    选择器 {
        CSS属性;
    }
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       /* 视口宽度是375，网页背景色是绿色 */
       @media (width:375px) {
           body {
               background-color: green;
           }
       }
   </style>
</head>
<body>

</body>
</html>

rem 适配

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的 1/10

/* 视口宽度320px，根字号为32px */
@media (width: 320px) {
   html {
       font-size: 32px;
   }
}
/* 视口宽度375px，根字号为37.5px */
@media (width: 375px) {
   html {
       font-size: 37.5px;
   }
}
/* 视口宽度414px，根字号为41.4px */
@media (width: 414px) {
   html {
       font-size: 41.4px;
   }
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 1.使用媒体查询，给不同视口的屏幕设置不同的HTML字号 */
        @media (width: 320px) {
            html {
                font-size: 32px;
            }
        }
        @media (width: 375px) {
            html {
                font-size: 37.5px;
            }
        }
        @media (width: 414px) {
            html {
                font-size: 41.4px;
            }
        }
        /* 2.使用rem单位书写尺寸 */
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

rem - flexible.js

flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
核心原理是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
<body>
    ......
    <script src="./js/flexible.js"></script>
</body>

rem - 移动适配

rem单位尺寸
确定基准根字号
查看设计稿宽度 → 确定参考设备宽度（视口宽度）→ 确定基准根字号（1/10视口宽度）

rem单位的尺寸
rem单位的尺寸 = px单位数值 / 基准根字号

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       /* 68 * 29 */
       div {
           width: 1.813rem;
           height: 0.773rem;
           background-color: pink;
       }
   </style>
</head>
<body>
   <div></div>

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

7、Less

Less是一个CSS预处理器，Less文件后缀是==.less==。扩充了 CSS 语言，使 CSS 具备一定的逻辑性、计算能力
注意：浏览器不识别 Less 代码，网页要引入对应的 CSS 文件
VS Code 插件：Easy LESS，保存 less 文件后==自动生成对应的 CSS 文件

示例：

.father {
   color: red;
   width: (68 / 37.5rem);
   .son {
       height: (29 / 37.5rem);
   }
}

生成 CSS 样式：

.father {
   color: red;
   width: 1.81333333rem;
}
.father .son {
 	height: 0.77333333rem;
}

注释

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

块注释
语法：/* 注释内容 */
快捷键：Shift + Alt + A

运算

加、减、乘直接书写计算表达式
除法需要添加小括号或 .
.box {
	width: 100 + 50px;
    height: 5 * 32px;
    width: (100 / 4px);
    height: 100 ./ 4px;
}

示例：

.box {
   width: 100 + 20px;
   width: 100 - 80px;
   width: 100 * 2px;
   // 除法 / → (计算表达式) 或 ./ → 推荐 ()
   width: (68 / 37.5rem);
   width: 29 ./ 37.5rem;
   // 如果表达式有多个单位，最终css里面以第一个单位为准
   height: (29px / 37.5rem);
}

生成的 CSS 样式：

.box {
 width: 120px;
 width: 20px;
 width: 200px;
 width: 1.81333333rem;
 width: 0.77333333rem;
 height: 0.77333333px;
}

嵌套

作用：快速生成后代选择器

.父级选择器 {
   // 父级样式
   .子级选择器 {
       // 子级样式
   }
}
.father {
   color: red;
   .son {
       width: 100px;
   }
}

示例：

.father {
   color: red;
   .son {
       width: 200px;
       a {
           color: green;
           // & 表示的是当前选择器，代码写在谁的大括号里就表示谁 → 不会生成后代选择器
           // 应用：配合hover伪装或nth-child结构类使用
           &:hover {
               color: blue;
           }
       }
       // a:hover {
       //     color: orange;
       // }
   }
}

生成的 CSS 样式：

.father {
 color: red;
}
.father .son {
 width: 200px;
}
.father .son a {
 color: green;
}
.father .son a:hover {
 color: blue;
}

变量

概念：容器，存错数据

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

语法：
定义变量：@变量名: 数据;
使用变量：CSS属性: @变量名;
// 定义变量
@myColor: pink;
// 使用变量
.box {
    color: @myColor;
}
a {
    color: @myColor;
}

示例：

// 1. 定义变量
@myColor: green;
// 2.使用变量
div {
   color: @myColor;
}
p {
   background-color: @myColor;
}
a {
   color: @myColor;
}

生成的 CSS 样式：

div {
 color: green;
}
p {
 background-color: green;
}
a {
 color: green;
}

导入

作用：导入 less 公共样式文件

语法：导入：@import “文件路径”;

提示：如果是 less 文件可以省略后缀
@import './base,less';
@import './commom';

示例：

@import "./39-less-体验.less";
@import "./40-less-注释";

生成的 CSS 样式：

.father {
 color: red;
 width: 1.81333333rem;
}
.father .son {
 height: 0.77333333rem;
}
/* 
   这是块注释
   允许换行
*/

导出

写法：在 less 文件的第一行添加 // out: 存储URL

提示：文件夹名称后面添加 /
// out: ./index.css
// out: ./css/

禁止导出

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

kuiini

关注

21
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
移动Web学习03

* 1.使用媒体查询，给不同视口的屏幕设置不同的HTML字号 */initial-scale=1.0：缩放1倍（不缩放）/* 视口宽度是375，网页背景色是绿色 */作用：防止图片在高分辨率频幕下模糊失真。/* 2.使用rem单位书写尺寸 *//* 1.给HTML标签加字号 *//* 使用rem单位书写尺寸 */作用：导入 less 公共样式文件。概念：设计稿里面每个元素的尺寸的。写法：在 less 文件的。提示：文件夹名称后面添加。份，HTML标签的字号为。写法：在 less 文件。
复制链接

扫一扫