适配方案之移动端适配
Posted kunmomo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了适配方案之移动端适配相关的知识，希望对你有一定的参考价值。
老版常规做法
方案一：Meida Queries媒体查询
meida queries 主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：
|
需要添加meta设置
|
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=1.0：表示最小的缩放比例
maximum-scale=1.0：表示最大的缩放比例
user-scalable=no：表示用户是否可以调整缩放比例
这个标签可以保证在移动端设备中，页面的宽度与屏幕宽度相同。
方案二：viewport缩放
以最小的Iphone4/5的宽度（320px）为基准，还原视觉稿。
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 /> |
然后对不同屏幕分辨率的手机进行简单粗暴的等比例缩放设置。 例如：iphone8（375px）initial-scale = 375 / 320 = 1.18
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.18 /> |
initial-scale越来越大，页面内容也就被拉伸也越厉害，导致页面内容会变得模糊，这个方法已经被摒弃了。
高度定死，宽度自适应，元素都采用px做单位。
随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』
方案三：响应式布局
新做法
方案四：rem
换句话说，当我们指定一个元素的font-size为2rem的时候，也就说这个元素的字体大小为根元素<html>字体大小的两倍，如果html的font-size为12px，那么这个2rem的元素font-size就是24px。同理当该元素为3rem时，那么其实际
font-size就是36px。
|
html {font-size: 12px;} h1 { font-size: 2rem; } /* 2 × 12px = 24px */ p { font-size: 1.5rem;} /* 1.5 × 12px = 18px */ div {width: 20rem;} /* 20 * 12px = 240px*/ |
看到这里你应该就会发现，只要我们根据不同屏幕设定好根元素<html>的font-size，其他已经使用了rem单位的元素就会自适应显示相应的尺寸了。
rem计算
我们使用rem单位事先需要做的一件事情就是设置根元素<html>的font-size，通常有两种做法
方法一：JS计算
通过javascript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size。
|
const oHtml = document.getElementsByTagName(‘html‘)[0] const width = oHtml.clientWidth; // 320px的屏幕基准像素为12px oHtml.style.fontSize = 12 * (width / 320) + "px"; |
这样iphone8（375px）下html的font-size 就是14.0625px，iphone8p下font-size就是15.525px。
如果在iphone8（375px）下设置元素font-size为 1.7066rem， 效果跟设置其font-size为 24px 是一样的(24 / 14.0625 = 1.7066)。
使用JS来获取屏幕宽度的好处在于可以100%适配所有的机型宽度，因为其<html>元素的基准尺寸是直接算出来的。既然是JS代码，为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我们放在header
底部去加载，并内联到html文档里面。
方法二：媒体查询
既然只是为了根据屏幕宽度来设置<html>元素的字体大小，那我们完全也可以通过css3媒体查询来完成这部分工作。
|
@media screen and (min-width: 375px){ html { font-size: 14.0625px; } } @media screen and (min-width: 360px){ html { font-size: 13.5px; } } @media screen and (min-width: 320px){ html { font-size: 12px; } } html { font-size: 16px; } |
rem存在的问题
rem作为一种简单粗暴解决不同屏幕下视图的区别的一种方案，它可以解决本文出现的问题以及绝大多数移动端适配屏幕尺寸的问题。但是既然它并不是一个完美的解决方案，那就有其局限性所在。
大屏智能机时代确实几乎完全替代了我十年前纸质化阅读的习惯。从2011年至今，手上的手机屏幕宽度一直在提升，但是使用的看小说软件的显示字号几乎是不变的。使用rem会在一定程度上打破用户的文字内容阅读习惯，特别是在大篇
幅的内容时。
ios与android平台的适配方式背后隐藏的设计哲学是这样的：阅读文字时，可读性较好的文字字号行距等绝对尺寸数值组合与文字所在媒介的绝对尺寸关系不大。（可以这样简单理解：A4大小的报纸和A3大小甚至更大的报纸，舒适的阅
读字号绝对尺寸是一样的，因为他们都需要拿在手里阅读，在手机也是上同理）；在看图片视频时，图片、视频的比例应该是固定的，不应该出现拉伸变形的情况。而rem用在字号时，使字号在不同屏幕上的绝对尺寸不一致，违背了设计
哲学。
参考
以上是关于适配方案之移动端适配的主要内容，如果未能解决你的问题，请参考以下文章