页面适配的一点方法

港控/mmm° 2022-09-30 15:58 149阅读 0赞

**高度百分比**

高度百分比方案——整个屏幕的主要高度都用百分比定位，比如介绍部分占高度的百分之30，点击抢红包部分占剩下的百分之70。  
　　优点——易于理解好上手  
　　缺点——由于行内样式，行间样式和它们的父子元素具有复杂的宽高关系，因此内部，比如介绍部分的内部的诸多元素想必还要用到px，em等定位方式，因此不那么和谐和有保障，容易小屏溢出或者大屏留白。在这个页面表现为倒计时文字部分和帮谁谁谁砍价的部分难以控制。

**flex按列布局**  
　　flex布局是一个很不错的方式：对于这个页面，我们可以有如下构想：对于介绍部分，用px或者em定位和布局，而对于剩下的部分则用flex让他填充好下边的空间，再用绝对定位让按钮水平垂直都居中，简直丝滑。  
　　优点——丝滑。  
　　缺点——要硬说有什么缺点的话，那么下端宽度不好控制算一个吧，试想这样构建出来的页面可能会在iphone4中下端一个按钮几乎占满，而在6普拉斯中则会有大量留白。

**大杀器rem**  
　　我们知道在rem出来之前，em有着定位根为父元素的天然缺陷，比如在这样的页面中。  
　　html>body>div.parent>div.son  
　　有这样的css:

.html{
    　　font-size:10px;
    　　.parent{
        　　font-size:2em;
        　　.son{
        　　font-size:1em;
        　　}
    　　}
    　}

注意以上css写法用了sass。html也简写了。  
　　然后你猜son的字体是多少px？是20，没错。因为他的参照元素是.parent元素，而不是根，这样的话嵌套多了谁敢用em。  
　　幸好rem的横空出现解决了这种问题：rem的参照物就是根元素的font-size，这让我们对于不同的页面有了设置全局标准的可能，大屏幕，我可以设置大的字体单位，小屏幕设置小的。一举解决了百分比定位和flex布局的遗留问题。  
　　  
　　怎样确定字体单位呢？有两种方法，第一种比较优雅：媒体查询，我们可以用媒体查询看看浏览设备的宽高，然后设置一个合适的字体单位，另一种方法比较精确，那就是用js去算。

body宽度document.body.clientWidth
        body高度document.body.clientHeight
        document.documentElement.clientWidth /*可见区域宽度*/
        document.documentElement.clientHeight /*可见区域高度*/

假设：设计稿高度1500px，设计稿中介绍部分高度300px，倒计时字体大小40px，屏幕高度1000px。  
第一步：计算单位：html的font-size = 屏幕高度 / 100 –>10px;  
第二步：介绍部分设置成高度30rem。  
第三步：字体大小设置成4rem。