移动端适配高度是固定的，这怎么办

在做移动端项目的时候，遇到了一个适配的问题，给大家讲一下，首先要了解一个知识点，就是安全区域，因为我们的 iphone 手机 他有这种齐刘海，还有这种底部的这个小黑条，那么这些东西如果要做好适配，也就说我们这一块就可操作区域，也就是我们的这个安全区 要给他处理好。那么在这个 ios 十一之后，苹果公司为了适配 iphone x 以后的手机，他对咱们浏览器的 这个 videopoint 里面扩展了一些标签，像这个 videofit， 这一个是 content， 还有 cover， 还有 auto， 这个就是相当于可视窗口完全包含这个玩意的内容啊，这个 cover 就是内容完全覆盖可视窗口，这个 auto 就是和 content 表现是一致的。还这么这这四个属性就是安全区域距离这四个方向的边距，默认这个边距大概是三十四 px， 你只有了解了这个字典才能更好的做适配。 这个是我们做的一个 h 五的一个应用，我这地方选择的我的尺寸是三七五的，再看我们设计给的稿，我们设计其实给的是七五零的，七五零的，那么他给的安全区域是六十八，那正好的话我们是除以二的，除以二六十八，除以二正好是三十四。 我们的项目做完之后，我们在浏览器里这地方可以选择这个 se， 这个我们是七五零的版本，我们这地方选择三七五，三七五，也就是说我们这个地方的高度和宽度都要比他实际的这个交互稿我们都要是除以二的，这么看其实是没有任何问题的。在 抖音上访问你会发现他底部这个安全区域他没有空出来，那么这时候我们应该怎么样优化呢？首先要改两个地方，一个是在这个 mate 标签里面，我原来的这种方式是这么处理的，那么这个地方我要改成这个微信炮的 fit 等于卡，我改成这种模式。 然后还有一个在全局的样式上，我要去判断一下，就是这一块的这个样式安全区域用出来这个属性是 cs 三新增的， 而且还有一点就是这个因为和这个 cost 要同时存在，而且顺序也不能换，这样的话我们改完之后，他下面已经空出来他的安全区域了啊。如果大家遇到了类似的移动端的实拍的问题，可以按照这种方式，有什么问题也可以评论区留言。

想要在 vivo 中完成移动端和 pc 端的最佳适配，上个视频和大家分享了，用 vivo port 缩放来实现。 还有一种就是通过 positispexterm mv fexible 依赖来处理代码，给大家放到评论区了，如果暂时不理解也没关系，这个方案大家可以等下集我将 pc 端适配后再来看，会更容易理解。最后一种就是很粗暴，直接做两套页面，同时兼任 pc 和移动适配， 这样我们可以通过配置两套不同路由来判断是否移动端实现。

一行代码实现移动端式配。

小伙伴们大家好，欢迎来到朝夕教育。好，我是 demi， 呃，今天跟大家分享的内容是 c s 三响应式布局 啊，响应式布局呢，它是可以为哎不同终端的用户呢，提供更加舒适的界面和更好的啊一种用户体验啊。而且随着目前呢像大屏幕移动设备的普及，好，所以呢，我们今天来跟大家分享一下 cs 三响应式布局啊， 在这个我们敲代码之前啊，哎，首先啊，还先需要了解哎几个概念，比如说，哎，什么是这个响应式布局呢？好，我们先来啊，弄清楚啊，弄明白这个什么是响应式的布局，所谓响应式的页面呢， 他就是指一套页面，哎能够适配多种终端，那可以让网站呀同时适配不同分辨率的屏幕，让我们客户能有更好的体验啊。设计呢，他会根据屏幕的尺寸缩小或者是扩展，让用户啊以最方便的方式从任何设备来访问啊信息。 顾名思义呢，就是说我们响应式的这个设计呢，它是响应浏览器大小的变化，并啊调整了布局元素来适应呢可用的屏幕空间。 比如说我们的哎一套页面，那你可以我们在手机上面，哎，就是小屏幕上面浏览的时候，哎，他是一种这个样式，好，那在平板或说这个大桌面显示器上面，哎浏览的时候呢，他是不同的一种样式啊， 所以说这种就是一种叫做响应式的一种布局。那么呃他的这个响应式的布局呢，我们来看一下常用的实现方案啊。第一个就是 flex 布局， flex 布局呢，它能解决啊绝大多数情况下响应式布局的问题啊，比如说像这个全屏布局啊，两列分布啊，分分布的这种布局啊，还有就是内容居中哎之类的一些场景。 嗯，那为什么我们会用到这个 flex 布局呢？ flex 我们知道是弹性盒子嘛，对吧？弹性啊，好。呃，像我们 以前的这种布局呢，有像百分比布局啊，哎，还有这个啊，浮动啊，那浮动呢，他是有副作用的啊，如果说我们的这个子元素设置了浮动， 它会引起复元素的塌陷，如果也就是说你的子哎有这个设置了这个浮动，但是你的这个复呢？哎，因为没有设置高度，所以说会引起这个复元素的塌陷， 那么就不能实现像自适应的一些布局。那么我们啊，这个整个布局啊，那前之前的一些元素如果说浮动了，那后面的元素呢，他可能就会错位，所以说我们的这个页面如果说是越来越复杂呢，是不利于管理的。 好。这第一个啊，布局方案好是 flex 布局，当然我们待会实现的这个呃布局呢啊，也会以这个 flex 的方式呢来进行布局。好。第二个呢，就是媒体查询啊，媒体查询呢，就是使用这个 media， 它是可以针对不同媒体类型的来定义不同的样式，那媒点呢，可以针对不同的屏幕尺寸呢，设置不同的，哎样式。来，我们一起看一下，像这个呃设备有一个划分啊， 后面呢，这个是呃尺寸的一个区间区间。像我们的小屏幕呢，哎，比如说手机啊，他的这个呃尺寸呢，就是小于七六八 px 好。然后像这个小屏设备，哎，比如说平板，哎，他的这个区间呢是七六八到九九二，还有这个中等屏幕呢，哎，比如说我们的桌面显示器就是九九二到哎，幺二零零一千二， 哎，之间。好，还有就是这个宽屏设备，就是咱们的大桌面显示器呢，它是大于等于一千二。好，所以说 说这个没点呢，可以针对不同的屏幕尺寸呢来设置不同的样式。比如说我们在那个大桌面显示器，哎，上面的时候，哎，是这样的一种布局样式，那么在我们的这个小屏手机上面的时候，那你肯定 就不能这个你的尺寸肯定都要发生一些变化了，比如说啊，我们的在这个大屏上面，好，这是我们的这个大屏幕上面，对吧？是这样的，好，我们的这个字体呢，有可能，哎， h 一是这样的，但是我们的手机屏很小啊， 那你还能这样的吗？那我们的这个整个的布局是不是要调整一下？好，那有有可能，以前你这个地方放了，哎四个图片，哎，是这样的，但我们手机上面你这样横着放四个，有可能，哎，他这个显示不下，太拥挤了，那我们在我们的这个手机屏上有可能这个 地方呢，哎，只显示两个，好，这是这个啊，媒体查询啊，当啊，我们看一下。第三个就是当你重置浏览器大小的过程中呢，那么页面他也会根据浏览器的宽度和高度来重新渲染页面。 好，目前呢针对很多像苹果手机啊，安卓呀，还有平板啊等等设备，我们都可以用到这个媒体查询。 好，这第二个，呃，接下来呢，还有就是，哎，我们见到的比较多的这两个单位啊，一个是 r e m， 还有一个是 e m， 这两个呢都是一个相对单位，那么他们有什么区别吗？嗯， 好，我们先来看一下这个 r e m 吧， r e m 呢，它是根据咱们的根结点，所谓根结点呢就是 h t m l 啊， 好，他是根据他的这个字体大小呢来进行计算，默认的字体大小呢是十六 px。 好，来，我们可以看一下这个 r r e m 单位呢，都是这个相对于根源数，也就相对我们的 h t m l 的，呃，放的杠 size 这个属性呢来决定大小的。 好，如果说在我们的根源数啊，下面设置了一个 find 刚 size 呢啊，就相当于提供了一个基准， 那么当我们的页面的啊，这个 size 发生变化的时候啊，只需要更改放不刚 size 的一个值，那么呢，以 r e m 为固定单位的元素，它的大小也会呢发生响应式的变化， 比如说我们的这个跟节点，哎， h t m l 你设置的是十六 p x 啊，好，如果我们的这个页面，哎，我们的这个字体大小发生变化，我把它变为 十四，哎，你只需要更改咱们的这个 htm 哎，里面的这个放到塞子里面的这个子就可以了，那么其他的呢，他会响应式的来发生一个变化， 呃，那这个 r e m 我们这个值应该怎么来设置呢？好，如果说它的默认值是十六，那我们如果说这里地方，哎，你是等于啊二 r e m， 那么这个二 r e m 怎么换算呢？相当于是多多大呀？就是三十二啊，这个 p x 的一个大小，哎，就是十六乘以二嘛， 好，这个换算也非常的简单啊。好，这是 r e m， 那么 e m 它是根据自身字体大小来计算啊，一定要记得啊，它是相对于咱们的这个复元数的。好， 就是这两个啊，相对单位啊，我们先暂时的了解一下，后面呢具体的啊，我们都会应用得到。好，第四个呢啊，这个呢是也是一个单位啊，他是四口单位啊， vw 和 vh 这两个单位呢，他是根据浏览器窗口大小呢来进行适配 啊，据，他们两个是市口单位啊，什么是市口呢？市口呢，就是我们哎所看到的整个浏览器的一个大小，也就总市口的宽度是一百 v 啊，宽度啊，是 vw， 那高度呢？就是一百 v h， 哎，相对于这个市口的一个高度，就是我们整个可以看到这个浏览器的一个大小。好，那一 w 相当于是市口宽度的哎，百分之一，那如果说是一百呢，就是我们整个浏览器的一个宽度或者是 一个高度了。好，这是我们哎实常用的一些啊，实现的一个方案啊。好，接下来呢，我们一起来看一下我们需要实现的是一个什么样的效果呢？ 嗯，好，这个好，这个效果呢，我们一起来看一看。 好，也就是说我们现在需要实现的一个效果呢，它是这样子的，它是分为了，哎，左右，它是一个左右的一个布局啊。 好，左右两边左右结构，左边呢是一个固定的宽度，那右边呢内容啊，还是可以根据用户的使用来啊，自动缩放。哎，我们先看一下他的一个效果，那也就说当我们的这个屏幕的分辨率，哎，比如说啊，当他大于一千二 的时候呢，那我们可以看到，你看这现在他是有一二三四，是不显示了，四个。好，当我们的这个屏幕，哎，你看我缩小的时候看到了吗？你看他是不是有变化呀？ 我们刚才看到的，哎，显示了有四个，结果，现在呢？你看屏幕，当我们的分辨率，比如说，哎，小于九百九十二的时候呢，哎，可以看到，你看他只显示了，哎，两个。好，继续啊，再改变这个啊，他的一个大小， 当他的大小继续发生改变的时候，哎，我们可以看到，你看他左侧的这个 左侧的导航栏是不是隐藏起来了呀？哎，不见了，好，继续啊，继续看他的一个变化，当他继续缩小的时候，也就是当，哎，我们这个屏幕分辨率小于七百六十八的时候呢，他的展示效果可以看到 这里的图片，他是不是一行只显示了一个啊？并且呢这个左侧的菜单确实隐藏了。左侧菜单隐藏，其实大家有没有发现还有一个地方不同啊？ 你看我们刚才可以看到，你看左侧的菜单隐藏了啊，来看一下，我们的这个头部是不是也发生了一些变化呢？仔细看， 看到了吗？你的左侧菜单隐藏了，但是我们头部是不是又有一个菜单出来了？哎，好，继续啊，看到这个头部菜单，也就我们这个屏幕分辨率再小，再次小于七六八的时候，哎，可以看到 他的这个头部的这个菜单又发生了一个变化，哎，有一个首页，然后呢还有出现了一个像这样的一个按钮， 哎，是不是看的很清晰？好，也就是说我们，哎整个呢，嗯，他是有一个变化的啊，还是是不同意页面在不同屏幕尺寸下呢？他会有不同的一个，哎，布局啊， 好，所以说这个响应式啊，它是需要有一个负极呢来作为啊，布局容器，然后来配合子元素来实现啊变化的一个效果。 那么在不同的屏幕下面呢，我们通过刚才介绍到的媒体查询来改变整个布局容器的大小， 然后呢，哎，我们在改变里面子元素的一些排列的方式啊，哎，他的一些大小啊，从而来实现在不同的屏幕下面呢，我们看到不同的页面布局，还有他的一个样式的变化。 好，整个页面结构，哎，我们清晰了之后呢，下节课开始跟大家一起啊来完成，哎，咱们这个页面， ok， 那本节的内容呢跟大家先分享到这。

这个视频呢，我们来讨论一下有关于网站布局的一些策略。那首先呢，我们在网站布局这呢基本上要解决适配的问题， 比如说 pc 端，我们用的更多的就是响应式的一种策略，那么 pc 端做响应式，然后它可以适配到某些移动设备的尺寸上。 那如果说移动端做适配呢，之前我们讲过了，那结合这个二 m 去动态的修改，这个根源是防晒子，就是淘宝无线适配吗？这样话呢，做到移动端的适配。好，下面呢，我们就集合以上的这两种来看一下淘宝网的策略。 首先呢，淘宝网它的一个 pc 端是做了部分的响应式的啊，就比如说我先把网页缩小，大家来看它的分类是不是随着我的窗口变小，分类可能就消失， 质量哎，就隐藏掉了，那这是他 pc 端做了某些的响应式，然后呢，我们要一定要注意他 pc 端的网址是淘宝点 com， 那如果现在就淘宝点 com， 我切换到了这个移动端好，然后现在呢，我再刷新一下页面， 那么此时此刻你会发现它已经跳转到了魅点 m 点淘宝点 c o m 了，那我就把它简称为 m 点淘宝点 c o m 吧，它会跳转到了另外一个域名上， 当然这里边内容肯定也发生了一个很大变化，那这样呢，他是做的淘宝无线视频方案啊，看就看出来了，因为这样他会动他的改变更元素的防晒子。那么经过以上的一些内容，我们得出以下的结论，首先我在淘宝点 som 去访问 它的时候，那么它会进入到啊这个淘宝店 c o m， 也就说它是在另外一个服务器上， 那如果说我访问这 m 点淘宝点 c o m 呢？他又是另外一个服务器，那这俩呢？不是同一个服务器，也就说他并没有拿淘宝点 c o m 这个服务器代码直接响应是到这个移动端，他们是两个这样的不同的服务啊，两个不同的服务。 好，那么证明这个事情呢，最简单一种方式就是我拿移动端设备去打，比如说淘宝点 c o m， 我回车 大家会发现我明明打的是淘宝点 c m， 他会直接跳转到 m 点淘宝点 c m， 那为什么呢？因为他这个淘宝点 c m 是一个服务器，它里面这个代码呢？判断了是不是移动设备。如果说我们是通过移动 用设备访问的淘宝点 c o m， 那么它里边有个代码会呃做一个判断，跳转到 m 点淘宝点 c o m， 好，这是它里边呢所做的这个内容好，那么这个内容怎么去做呢？也比较简单 好，比如说我这呢有一个网页好，我们现在呢直接用 pc 端打开好，然后这呢我输入一个一二三吧，证明他是没有问题的。好，有个一二三，然后呢现在呢，我把它 到移动的访问啊，比如说我访问的设备可能是三七五，然后我现在再刷新一下页面，你发现他会直接跳转到另外一个网址 啊，其实呢，它就用到了我们 g s 原声中的 bom 就可以做到了。那这儿呢，是检测我们的设备，比如说安卓还是 iphone 等等一系列啊，然后呢这儿做了一系列判断，也就说如果说你是安卓的设 设备，或者说 iphone 的设备，或者说 ipad 等等，这种设备啊，非 pc 端就是移动的设备，那我们会做一些判断，让他直接的通过 window 点 location 和服跳转到我们的移动端网址。啊，这就是他所做的这样的一个策略，那他为什么不直接 做响应式呢？哎，淘宝点搜 m， 对吧？然后我切换到这个移动端，他还是这个域名，但是呢，呃，他内容发生了变化，他为什么不这么做？原因是这样的， 可能我只说可能就是本身的。淘宝的 pc 端呀，它的内容就够多了，够庞大了啊，它数据量是特别大的，我们知道移动端访问的话呢，呃，可能加载速度会比较慢，那这样情况下呢，那我们的移动设备让它加载快一点，是吧？所以说呢，我们就 别在同样代码中给他兼容不同的这种设备了，那干脆我就 p 端一套，移动端一套，那么你 p c 直接兼到移动端，那你的内容肯定是特别庞大的，你还要做很多很多代码上的处理啊，比如想应试图片都需要去做。 但是呢，我要在移动端，哎，我移动端我直接加载一个比如三七五的这么一个图，或者是四幺四一个图就可以了，不需要像 pc 端加载一个八百图一千多的图啊，那这样的话呢，把他们 pc 和移动端分离出去去，然后做一个判断，这样的话呢，他的加载速度或者他的性能会更好一点 啊，这就是 pc 端和移动端的一些布局上的策略。

针对移动端和 pc 端适配，我建议将两者进行拆分，并进行工程化配置，以避免整体框架调整后在某些页面上出现轻微不协调。首先我们来看移动端适配，我整理了三套解决方案。第一套方案就是 view pro 所放 pc 端适配，移动端可以通过 h t m l 标签重 mease name 等于 view pro 调整适口比例 进行页面缩放。主要的原理就是根据设备屏幕的 dpr 来动态设置 html 的 fount size。 不过我发现使用过程中反应缩放会导致有些页面元素会糊的情况，大家可以根据设备 dpr 调整页面的缩放值，进而达到高清效果， 保证了不同设备下视觉体验的一致性。之前页面模糊的原因就是屏幕越大，元素也越大，所以模糊。而现在的新方案呈现的是屏幕越大看到的越多。比如说一篇很长的文章在 f 四上一平成不了那么多内容， 而在 f 六 plus 上可以全部看清楚，这是因为新方案会根据 dpi 来缩放适口，大屏小屏的手机上显示的字体大小都是一致的，当然在大屏上看到的东西就多，这个方法可以有效解决移动端真实 epic 问题。

这是 ui 给的一个设计稿，咱们可以很准确的知道它的宽度和高度，它的宽高都是以 ps 为单位的，那么如果要做一个移动端的应用，那么咱们总不能在代码里写 ps 吧，对吧？咱们无法做到移动端的适配，咱们今天就给大家聊一聊最佳的移动端的适配方案。 会用到这个插件，这个插件也就是说他会把咱们的 cs 转成为 wvs， 具体的怎么用呢？咱们可以在配置文件里面配一下， 这地方是要转换了一个单位 ps， 对吧？这个是设计稿的，是个宽度，设计稿的话一般优要不就给三七五的，要不就给七五零的，如果是七五零的，那么这里面就改成七五零，这个是小数点要保留的小数点的位数。 cs 属性，所有的属性都要转换啊，这个是转换后的单位，后面的是可以设置不进行转换的条件，可以查询的也不进行转换，那么具体咱们看 怎么样实现的。比如说我现在是在这定了一个简单的文本，然后我把这个他的字体设置成二十 ps， 那么这正常，这个是我的开发代码，假如说我在这地方 ui 给的稿，他就是 字体大小就是二十 ps， 那么我在代码里我就直接写二十 ps， 我开启了这个插件之后，他会自动的帮我转换，可以看一下整个的一个效果， 这个是我的这个文本的吧，我在那个代码里就这一块设的是二十 ps， 那么他自动给我转成为 w 了，而且保留小数点五位数，可以看一下我打完包之后的效果。 打磨之后他会生成一个第三的目录， as 都在这个里面，对吧？那么我可以搜一下，看这个法拉萨的他都给我转成为 w， 是不是非常的方便？这个地方有一点需要注意的是，如果我不想对某些样式进行转换的时候，我可以在这加一些过滤条件，对吧？还有一个比如说我可能会引一些第三 主题库，第三方主题库他本身做了一个人的实配，所以说我可以忽略掉某个文件夹下的文件，这是大家需要注意的。没有什么好的方案可以评论区留言讨论。