移动适配

最新推荐文章于 2024-11-10 22:45:39 发布

Jack丶空

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量132

点赞数 2

分类专栏：前端文章标签：前端笔记

本文链接：https://blog.csdn.net/m0_61772841/article/details/133208330

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

移动适配

由于移动设备的显示尺寸不同，所以我们的网页需要兼容各种尺寸的大小

解决方案：rem：目前多数企业在用的解决方案

vw/vh:未来解决方案

Rem原理

Rem：一个相对尺寸单位，相对于HTML标签的字号计算结果，1rem=1HTML字号大小，能够实现网页的等比缩放

实际大小=盒子宽/高rem * html字号大小

在实际开发中需要首先给html字号设置大小

html字号大小动态的设置：添加媒体查询

媒体查询：能够检测视口宽度，然后编写差异化的CSS样式，当某个条件成立，执行对应的CSS样式（显示器缩放调回100%）

写法：

@media (媒体特性){
    选择器{
        CSS属性；
    }
}
/*当浏览器宽度为320px时，自动设置html字号大小为32px*/
@media (width:320px){
    html{
        font-sieze:32px;
    }
}

设备宽度不同，HTML标签字号设置多少合适?

目前rem布局方案中，将网页等分为10份，HTML标签的字号为窗口宽度的1/10（方便计算）

盒子像素大小（N）转换为rem单位大小：N / HTML（font-size）/10

JS控制页面大小

flexible.js是手淘开发出的一个用来适配移动端的js框架

可以规避屏幕分辨率的缩放

核心原理就是不同的视口宽度给网页中html根节点设置不同的font-size

使用方法：

js引入位置：body 标签结束的前一行进行引入
在项目中引入 flexible.js 文件即可
```
<script src="js/flexible.js"></script>
```

Less

Less是一个css的预处理器，文件后缀为.less；扩充了css语言，使css与原具备一定的逻辑性，计算能力。浏览器不能识别Less代码，网页要引入对应的css文件

使用Less运算学法完成px单位到rem单位的转换

Less语法快速编译生成CSS代码

初体验：在.less文件中写入以下代码（需要在vscode扩展中安装插件：Easy LESS—> 在这里插入图片描述
）

.father{
    color : red ;
    width : (68/37.5rem);
	
    .son{
        background-color : pink;
    }
}

保存（crtl+s）后会对应的生成一个.css文件，里面的width属性会自动计算结果后赋值；层级结构的css也会被翻译成css子代选择器的结构

在这里插入图片描述

Less语法

注释

单行注释：//注释内容

快捷键：crtl+/

块注释：/ * 注释内容 * /

块注释允许换行

注：单行注释只能存在于less中，而块注释可以被转译为css中的注释

.less
//单行注释

/*
块注释
多行注释
*/

.css
/*
块注释
多行注释
*/

运算

Less运算写法完成px单位到rem单位的转换

注意:除法需要用括号包裹；或使用'./'运算除法，该方式会报错，但可以正常生成css，其后的代码无语法提示，且转化会出现问题

//.less文件
.div{
    width:100 + 20px;
    width:100 - 20px;
    width:100 *2 px;
    width:(100 / 2px);
    width:100 ./ 2px;
}

<--.css文件-->
.div{
    width:120px;
    width:80px;
    width:200px;
    width:50px;
    width:50px;
}

嵌套

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

'&'表示不生成后代选择器，表示当前选择器，通常配合伪类或为元素使用(类似于this关键字)

.less文件
.父级选择器 {
    //父级样式
    .子级选择器{
        //子级样式
    }
}

.father{
    color :red;
    .son{
        width : 100px;
        
        &：hover{
            color ： green;
        }
    }   
}

.css文件
.father{
    color :red;
}

.father .son{
	width : 100px;
}

.father .son:hover{
	color ： green;
}

变量

使用Less变量设置属性值

把颜色提前存储到一个容器，设置属性值为这个容器

.less
定义： @变量名：值；
使用：CSS属性：@变量名

@colora:red;

div{
    color : @colora;
}

.css
div{
    color : red;
}

导入

使用Less导入写法引用其他Less文件

一般写在.less文件头部

导入：  
@import "文件路径"；

@import "./index.less"
@import "./index"  //如果是.less文件，后缀可以省略

导出

Less语法导出CSS文件（两种方法）：

配置EasyLess插件：设置–>搜索EasyLess–>在setting.json中编辑–>添加代码`（必须用双引号）
```
{
    "less.compile":{
        "out" : "../css/"
    }
}
```
表示导出到css文件夹
在.less文件的头部加上以下代码：将当前文件导出到上级的css目录，可以指定导出css文件的名字
```
// out: ../css/
// out: ../css/index.css  //指定导出css的文件名
```

禁止导出

Less语法禁止导出CSS文件

在less文件第一行添加：

// out : false

vh/vw（推荐使用）

使用vw/vm设置网页元素的尺寸，是一个相对单位，相对于视口的尺寸计算结果

1vh = 1/100 视口高度

1vw = 1/100 视口宽度

vw单位的尺寸= px单位数值 /（1/100 视口宽度）

可以结合less语法进行计算

在实际开发中建议都使用vw 或者 vh，以免全面屏设备造成盒子的垂直拉伸

/指定导出css的文件名






> 禁止导出

Less语法禁止导出CSS文件

在less文件第一行添加：

```less
// out : false