CSS移动端适配

一，屏幕分辨率

屏幕分辨率：纵横向上的像素点数，单位是px

PC分辨率：

1920 * 1080
1366 * 768

缩放150%：

1920/150%
1080/150%

总结：

硬件分辨率：物理分辨率（出厂设置的）
缩放调节的分辨率：逻辑分辨率（软件/驱动设置的）
写网页参考的是逻辑分辨率

二，视口

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

使用视口标签是为了让移动端网页宽度和设备的逻辑分辨率宽度保持一致。

<!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"/>
        
    </head>
</html>

width=device-width：视空宽度=设备宽度
initial-scale=1.0：缩放1倍(不缩放)

三，二倍图

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

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

四，适配方案介绍

宽度适配：宽度自适应（适用于PC）
- 百分比布局
- Flex布局
等比适配：宽高等比缩放（适用于移动端）
- rem
- vw

五，rem适配方案

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

案例

<!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"/>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
        	/* 1.给html标签加字号*/
            html{
                font-size: 30px;
            }
            /*2. 使用rem单位书写尺寸*/
            .box{
                width: 5rem;
                height: 3rem;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            
        </div>
        
    </body>
</html>

此代码还不能实现移动端适配，因为我们的html字体尺寸大小是固定的，需要配合媒体查询实现

5.1 媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的CSS样式，当某个条件成立时，执行对应的CSS样式。

@media(媒体特性){
    css选择器 {
        css属性
    }
}
/*举例：视口宽度是375，网页背景色是绿色*/
@media(width:375px){
    body{
        background-color: green;
    }
}

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

5.2 rem配合flexible.js

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

引入flexible.js

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

5.3 设计稿的px转为rem

5.4 less

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

5.4.1 注释

注释：

单行注释
- 语法：//注释内容
块注释：
- 语法：/*注释内容*/

5.4.2 运算

运算：

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

.body{
    width: 100+50px;
    height: 5*32px;
    
    width: (100/4px);
    height: 100 ./ 4px;
    //如果是100px ./ 4rem那么单位是px，多个单位先出现的为主
}

5.4.3 Less嵌套

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

5.4.4 变量

概念：容器，存储数据

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

语法：

定义变量：@变量名:数据;
使用变量：CSS属性:@变量名;

举例：

//定义变量
@myColor:pink;
//使用变量
.box{
    color: @myColor;
}
a{
    color: @myColor;
}

5.4.5 导入

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

语法：@import "文件路径"

注：如果是less文件，可以不写后缀

@import './base.less'

5.4.6 导出

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

注意：文件夹名称后面添加/

//out: ./index.css
//out: ./css/

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

//out:false

六，vw适配方案

相对单位
相对视口的尺寸计算结果
vw：viewport width
- 1vw=1/100视口宽度
vh：viewport height
- 1vh=1/100视口高度
vw和vh是相对于视口宽度高度进行适配的，可以直接实现移动端效果。

vw单位转换：

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

vh单位问题：

在开发中，vh和vw不能混用，因为vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能导致盒子变形。

posted @ 2024-08-23 09:32 wdadwa 阅读(106) 评论(0) 收藏举报

刷新页面返回顶部

wdadwa