如何让页面适配各种机型

发表于 更新于 分类于 本文字数： 1.8k 阅读时长 ≈ 6 分钟

大杀器rem

我们可以知道，页面主体中规中矩，分为两部分：上半部分是介绍页面，下半部分是主体界面，有一个点击按钮来负责全部用户交互，为了适配iphone4到6plus以及众多安卓，我们对整个页面的架构可以有如下几种方案：

高度百分比

高度百分比方案——整个屏幕的主要高度高度都用百分比定位，比如介绍部分占高度的百分之30，点击抢红包部分占剩下的百分之70。

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

flex按列布局

flex布局是一个很不错的方式：对于这个页面，我们可以有如下构想：对于介绍部分，用px或者em定位和布局，而对于剩下的部分则用flex让他填充好下边的空间，再用绝对定位让砍价按钮水平垂直都居中，简直丝滑。

优点——丝滑。
缺点——要硬说有什么缺点的话，那么下端宽度不好控制算一个吧，试想这样构建出来的页面可能会在iphone4中下端一个按钮几乎占满，而在6普拉斯中则会有大量留白。

大杀器rem

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

1
2
3
4
5
6
7
8
9
.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。

啊哈，发现他的优点了嘛，没错，全局等比放大的适应。这就意味着，你在6plus里面能看的页面，在iphone4里面同样能看，而且不会因为屏幕小而发生元素交叠的情况，也不会因为屏幕大而出现留白的情况，是我目前最喜欢的一种表达方式。

优点：做到了完美适配。

缺点：只是等比放大，小屏下字体小，大屏下字体大（不过从经验来讲，字体的大小并不明显，因为屏幕在那呢，看着也舒服）。

缺点反驳：我觉得只有一套设计稿，大小屏幕都兼顾完美是不可能的，因为你不知道什么时候该让一个字占用绝对20像素还是绝对是屏幕宽度的百分之五。如果要做到兼顾，也是可以的：用多套设计稿+css媒体查询为不同宽度的页面写好不同的css样式。

对于多屏页面。

1.

在reset.css页面加入媒体查询来根据不同的宽度定好字体单位。

2.

大杀器rem

使用方法同上，不过上面是根据高度来确定字体单位，这里可以用宽度来确定字体单位。

1
2
3

var html = document.getElementsByTagName("html");
html[0].style.fontSize = document.documentElement.clientWidth/10+"px";

让页面在都完美显示算是我实习期间的研究之一，经过了比较，我还是用大杀器rem觉得比较方便一些，当然还有诸多方法值得尝试，比如rem+flex等等，如果有不当之处，还请各位前辈抨击，批评，丢石头给我，感谢前辈和同行的指点！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

// 部分jQuery函数
$(window).height() 　//浏览器时下窗口可视区域高度 
$(document).height()　　　　//浏览器时下窗口文档的高度 
$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度 
$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度 包括                                   border padding margin 
$(window).width() 　//浏览器时下窗口可视区域宽度 
$(document).width()//浏览器时下窗口文档对于象宽度 
$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度 
$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度 包括    border padding

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方      向滚动的量