实现移动端适配
移动端项目介绍
原生app的开发: IOS Android(Java) RN(React Native) Uniapp Flutter等 --- 移动端开发工程师/ IOS/Android
小程序开发: 原生小程序开发, Uniapp Taro --- wxml / wxss / js
Web页面开发: 移动端的Web页面开发, 可以使用浏览器或者webView浏览
首先我们实现的时候，需要实现一些对移动端设备的适配性问题的解决
自适应： 就是自动根据我们的屏幕大小来实现基本的一些自动调整大小和尺寸
响应式： 就是实现的基本的那个根据屏幕的变动来实现的基本的一些响应式布局，准确来说就是我们的自适应
移动端适配
从实质上的来说，我们的最后的实现的效果就是实现的基本的那个知识储备的话，就是使用的我们的html + CSS + JS
认识视口viewport
在我们的浏览器中，我们可以实现看到的部分就是我们的视口(viewport)
在我们的pc端的话，我们就不用对视口做一个区分
我们的定位流中的fixed就是相对于我们的视口来实现进行定位的
在pc端页面，我们是不用对视口做一个那个强制性的区分的，因为我们的布局视口和视觉视口是同一个
但是相对于我们的移动端的话，我们的这两个视口不是值得同一个
在我们的移动端的开发，我们的布局视口往往是比我们的视觉视口要大的
在我们的移动端的开发中，我们是可以实现基本的一些将我们的视口细分为三种的:
布局视口: layout viewport
视觉视口: visual layport
理想视口: ideal layout
布局视口(layout viewport)
在我们的移动端的开发中，我们的布局视口的话，一般就是默认放在宽度为:980px的视口容器中的
但是我们的的视觉视口的话，就是我们的的可见视口，就是我们的眼睛看到的那一部分
然后移动端的实现就是实现一些将我们的980px的布局视口来实现基本的一些等比例的缩小来实现的基本的在移动端设备的显示
就是实现的所有的东西就是在默认的980px的盒子里面实现的基本的那个等比例的缩放，里面的所有的东西都这样来实现的等比例缩放
`
pc端的页面如何实现转化为我们的移动端实现展示的:
1.pc端的页面是默认按照一定的980px的盒子实现的基本的展示的盒子和内容的大小的
2.为了实现基本的完整的将我们的页面展示给移动端，我们是可以通过等比例缩放来实现的将整个页面实现缩放
我们的布局视口的话，实质上就是我们的那个默认宽度是980px
`
我们的相对于980px的这个视口就是我们的实际的布局视口
layout viewport
![image-20240803233439380]()
视觉视口(visual viewport)
我们的的视觉视口默认的情况下是按照我们的宽度为: 980px的时候来实现展示的
那么如果默认按照这个来实现布局的话，我们的有些网页的一些基本的内容就无法实现展示
所以说这个时候，我们就要实现将我们的pc端的视觉来实现等比例的缩放的
默认情况下显示的部分就是我们的视觉视口
可能上面的话有点绕：
就是我们的在实现布局的时候，在pc端的布局，实现的是将我们的视口默认在980px的情况下实现的布局
默认情况下在移动端我么可以实现看到的部分就是我们的视觉视口
但是为了我们的pc端的所有内容都可以实现展示，这个时候
我们就要实现等比例的将我们的布局视口实现等比例的缩放
才可以实现pc端的内容正常全部显示
<mate name="viewport" content="width=device-width">
理想视口(ideal viewport)
理想视口就是当我们的布局视口等于我们的视觉视口的时候，那么就是理想视口
但是是不利于开发的
<mate name="viewport" content="width=device-width;initial-scale=1.0">
<mate name="viewport" content="width=device-width;initial-scale=1.0;user-scalable=no;maximum-scale=1.0;
minimum-scale=1.0">
![image-20240803235934515]()
移动端的适配方案
移动端的适配问题的话，就是通过的我们的一些基本的适配方案来实现的:
首先我们的px是一个绝对的单位，所以说在解决适配性问题的时候，就需要使用我们布局的时候的相对单位
1.使用我们的百分比来实现解决适配性的问题，
由于我们的百分比的参照物的不同，所以说，解决适配性的问题就会有问题
2.rem单位的适配 + 动态的html的font-size来实现解决我们的是适配性问题: rem的值 * font-size的值 = 呈现的px的值
div{
font-size:1px;
width:10rem
}
那么我们的的最后的实现的效果就是： 10 * 1 = 10px
3.vw单位来实现适配性的问题 : 这个的话，就是实现的是，将我们的盒子的大小绝对单位的大小缩放100为最终的进制单位
假如我们的盒子总的大小是为: 375px ， 那么这个时候，我们的实现效果就是： 1vw = 375/100 = 3.75px
那么这个时候，我们的那个100px宽度的盒子的宽度就是: (100/3.75)vw
4.flex弹性盒的布局来解决适配性问题
移动端适配 rem方案
1.媒体查询
首先的话，我们的rem单位的话，是和我们的font-size一同来设置的，那么如果我们需要在不同的屏幕上拥有不同的尺寸，可以动态的修改
font-size的尺寸
这样的话，我们就可以使用基本的
针对不同的屏幕设置不同的font-size的值
将原来的尺寸设置为rem单位即可
媒体查询的弊端：
就是我们会针对不同的屏幕写大量的媒体查询
如果动态的改变尺寸那个会导致不会实现实时更新
![image-20240804011104197]()
![image-20240804012105013]()
响应式布局媒体查询基础知识
基本的格式要求:
@media media-type and (media-feature: value) {
}
media-type：定义媒体类型，如 screen（用于电脑屏幕、手机屏幕等）、print（用于打印）、speech（用于屏幕阅读器）。默认值为 all，意味着规则适用于所有类型的媒体。
media-feature：媒体特性，用来检查设备的特定条件，比如视口宽度(width)、高度(height)、设备像素比(device-pixel-ratio)、颜色(color)等，这些特性允许你根据不同的设备条件和环境来定制样式。
value：媒体特性所对应的值或范围。
and, not, only：逻辑操作符，用于结合多个媒体类型或特性，实现更复杂的查询条件。
媒体查询基础知识了解
2.通过js来实现基本动态的适配
<!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>
html{
font-size:20px
}
.box{
width: 10rem;
height: 10rem;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const htmlEl = document.documentElement
window.addEventListener("resize", function (){
const htmlWidth = htmlEl.clientWidth
const htmlFontSize = htmlWidth/10
htmlEl.style.fontSize = htmlFontSize + "px"
})
function setUnitRem(HE){
const htmlWidth = htmlEl.clientWidth
const htmlFontSize = htmlWidth/10
htmlEl.style.fontSize = htmlFontSize + "px"
}
window.addEventListener("resize", setUnitRem)
</script>
</body>
</html>
最后的话我们是可以实现直接使用别人的方案:
lib-flexible
