前言
如今屏幕分辨率的范围已经从320px（iPhone）涵盖到2560px（大显示器）或者更高了。用户不单单在桌面电脑上浏览网站，用户如今使用移动电话，小的笔记本，平板设备（比如iPad）来访问互联网。所以传统的固定宽度设计不那么理想了。web设计需要有自适应能力。 页面布局要可以自动的去适应所有的分辨率和设备。现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候，那你应该看看这篇文章了
1. 移动设备尺寸及分辨率
下面我们来看看移动设备的分辨率
iPhone 界面尺寸：
| iPhone | iPhone6 Plus | iPhone6 | iPhone5s |
|:-|:-|:-|:-|
| 尺寸 | 5.5英寸 | 4.7英寸 | 4英寸 |
| 像素分辨率 | 1242*2208 px | 750*1334 px | 640*1136 px |
在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机尺寸来设计，比较方便预览效果，通常设计图是 7501334*
iPad 界面尺寸：
| iPad | iPad 3-4-5-6-Air-Air2-mini2| iPad 1-2 | iPad Mini |
|:-|:-|:-|:-|
| 像素分辨率 | 2048×1536 px | 1024×768 px | 1024×768 px |
2. 目前移动端做适配几种常用方法：
2.1、CSS3媒体查询
采用CSS3媒体查询可以为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，
@media 媒体类型 and (视口特性阀值){ /* 媒体类型可以 all screen print 等*/
// 满足条件的css样式代码
}
比如我们要为宽度大于375px的页面中的class="content"的元素设置样式，可以这样写，
@media screen and (min-width=375px) {
.content { styles }
};
我们在使用Media的时候需要先设置Meta标签下面这段代码，来兼容移动设备的展示效果：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
标签中的几个参数解释：
- width = device-width：宽度等于当前设备的宽度
- initial-scale：初始的缩放比例（默认设置为1.0）
- minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
- maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
- user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
下面我们就来看看css3 Media具体的写法：
下面这段css，估计很多人在响应式的网站经常看到类似下面这段：
@media screen and (max-width: 960px){
body{
background: #000;
}
}
这个应该算是一个media的一个标准写法，上面这段CSS代码意思是：当页面小于960px的时候执行它下面的CSS，这个应该没有太大疑问。
下面就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法：
/*页面小于960px的时候*/
@media screen and (max-device-width:960px){
html{
font-size: 80px;
}
}
/*当尺寸大于960px时候 */
@media screen and (min-width:960px){
html{
font-size: 90px;
}
}
/* 当页面宽度大于960px小于1200px的时候执行下面的CSS */
@media screen and (min-width:960px) and (max-width:1200px){
html{
font-size: 100px;
}
}
在移动端适配上通常使用的就是上面的方法，在文章后面会介绍国内大厂的具体使用方法，认真往下看
@media媒体查询器的功能不止这三个功能，下面是media的一些参数用法解释：
h
- width: 定义输出设备中的页面可见区域宽度。
- height: 定义输出设备中的页面可见区域高度。
- device-width: 定义输出设备的屏幕可见宽度。
- device-height: 定义输出设备的屏幕可见高度。
- orientation: 检测设备目前处于横向还是纵向状态。
- aspect-ratio: 检测浏览器可视宽度和高度的比例。(例如：aspect-ratio: 16/9)
- device-aspect-ratio: 检测设备的宽度和高度的比例。
- color: 检测颜色的位数。（例如：min-color: 32就会检测设备是否拥有32位颜色）
- color-index: 检查设备颜色索引表中的颜色，他的值不能是负数。
- monochrome: 检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
- resolution: 检测屏幕或打印机的分辨率。(例如：min-resolution: 300dpi或min-resolution: 118dpcm)。 grid：检测输出的设备是网格的还是位图设备。
详细功能介绍可以点击查看
2.2、百分比适配
用百分比做适配的方法是子元素相对于父元素的百分之多少，比如父元素的宽度为100px;设置子元素的宽度可为60%;这时子元素的宽为60px;如父元素的宽度改为200px时，这时子元素的宽就是120px; 所以可将body默认宽度设置为屏幕宽度（PC中指的是浏览器宽度），子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。
2.3、使用rem来做适配
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。// 是截止目前用的最多也是最流行的
在说rem之前，我们来说说关于手机视口的概念，通常在前端开发领域，像素有两层含义：设备像素和css像素。
- 设备像素： 设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。
- css像素：这是一个抽象的像素概念，它是为web开发者创造的。
一个CSS像素的大小是可变的，比如用后缩放页面的时候，实际上就是在缩小或放大CSS像素，而设备像素无论大小还是数量都是不变的。
而在移动端中有三个视口，哪三个呢？
- 布局视口：移动端css布局的依据视口，即css布局会根据布局视口来计算。
可以通过以下JavaScript代码获取布局视口的宽度和高度：
document.documentElement.clientWidth
document.documentElement.clientHeight
- 视觉视口：用户看到的区域
- 理想视口：理想的布局视口
什么是rem ?
rem是相对尺寸单位，rem是将根节点html的font-size的值作为整个页面的基准尺寸，计算如下：
元素的rem尺寸 = 元素的psd稿测量的像素尺寸 / 动态设置的html标签的font-size值
比如默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时，1rem=20px，那么32px=1.6rem了。基于此，我们用rem来实现不同尺寸屏幕的自适应的方法就是：在页面载入开始时首先判断window的宽度Width（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width）），若假定屏幕宽度为750的，而不同宽度的屏幕处理的处理方法，为了能保证换算容易，需先为html设置一个合适的font-size，计算：100 / 750 = fontSize / Width, fontSize = Width / 750 * 100 = W / 7.5；
假设我们以iPhone6设计图尺寸为标准，在设计图的尺寸下设置一个font-size值为100px。
也就是说：750px宽的页面，我们设置100px的font-size值，那么页面的宽度换算为rem就等于 750 / 100 = 7.5rem。
3. 大厂的做法
下面我们来看看，大厂是怎么做的呢？
- 京东 的web移动端(设计图是750*1334)
/* 京东 m.jd.com */
@media only screen and (min-width: 320PX) and (max-width:360PX) {
html {
font-size:13.65px
}
}
@media only screen and (min-width: 360PX) and (max-width:375PX) {
html {
font-size:15.36px
}
}
@media only screen and (min-width: 375PX) and (max-width:390PX) {
html {
font-size:16px
}
}
@media only screen and (min-width: 390PX) and (max-width:414PX) {
html {
font-size:16.64px
}
}
@media only screen and (min-width: 414PX) and (max-width:640PX) {
html {
font-size:17.664px
}
}
@media screen and (min-width: 640PX) {
html {
font-size:27.31px
}
}
/*
我们来看看怎么计算的
设计图中 尺寸40px盒子，我们可以看到在媒体查询中，iPhone6 的布局视口是375，即html的font-size为16px，
则计算为rem： 40/16 = 2.5 rem
*/
如下图： 京东m端在iPhone下的状态
iPhone6
在图中可以看到 img设置的样式 width: 2.5rem; height: 2.5rem; 实际渲染出来的大小是 40*40
因为我们可以在css媒体查询中看到在iPhone6下的设置html的font-size为16px； 计算就是： 40/16 = 2.5.
京东iPhone6
iPhone5
我们将其切换到iPhone5看看效果，如下图：
同样是刚才的图标在5下面大小是多少呢~ ，在5下font-size的值为13.65px, 来算算结果就是 2.5*13.65 = 34.125
京东iPhone5
- 网易新闻 web移动端 (设计图大小目前版本本人看不出来，我记得16年是750*1334)
注： vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
/* 网易新闻 3g.163.com */
@media screen and (max-width: 320px) {
html {
font-size:42.667px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 321px) and (max-width:360px) {
html {
font-size:48px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 361px) and (max-width:375px) {
html {
font-size:50px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 376px) and (max-width:393px) {
html {
font-size:52.4px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 394px) and (max-width:412px) {
html {
font-size:54.93px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 413px) and (max-width:414px) {
html {
font-size:55.2px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 415px) and (max-width:480px) {
html {
font-size:64px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 481px) and (max-width:540px) {
html {
font-size:72px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 541px) and (max-width:640px) {
html {
font-size:85.33px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 641px) and (max-width:720px) {
html {
font-size:96px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 721px) and (max-width:768px) {
html {
font-size:102.4px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 769px) {
html {
font-size:102.4px;
font-size: 13.33333vw
}
}
body {
font-family: PingFangSC-Regular,Microsoft YaHei,Helvetica;
background: #f5f7f9
}
body,html a {
color: #333
}
.hidden,.none {
display: none!important
}
@media screen and (min-width: 769px) {
html {
font-size:102.4px
}
html .wap-wrap {
width: 768px;
margin: 0 auto
}
}
/*
我们来看看怎么计算的
比如设计图中 尺寸117px盒子，我们可以看到在媒体查询中，iPhone6 html的font-size为50px，
则计算为rem： 117/50 = 2.34rem
*/
如下图： 网易新闻在iPhone下的状态
iPhone6
在图中可以看到 img设置的样式 width: 2.34rem; 实际渲染出来宽的大小是 116.98
因为我们可以在css媒体查询中看到在iPhone6下的设置html的font-size为50px； 计算就是： 116.98/50 = 2.3396.
废话： 我记得16年看网易并不是使用媒体查询的
网易iPhone6
- 阿里的 手机淘宝 触屏版 (设计图是750*1334)
/* 阿里手机淘宝 h5.m.taobao.com */
!function(e, t) {
var n = t.documentElement,
d = e.devicePixelRatio || 1; // 设备DPR
function i() {
var e = n.clientWidth / 3.75; // iPhone 6 布局视口375
n.style.fontSize = e + "px"
}
if (function e() { t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)}(),
i(),
e.addEventListener("resize", i),
e.addEventListener("pageshow", function(e) { e.persisted && i() }), d >= 2) {
var o = t.createElement("body"), a = t.createElement("div");
a.style.border = ".5px solid transparent", o.appendChild(a), n.appendChild(o), 1 === a.offsetHeight && n.classList.add("hairlines"), n.removeChild(o)
}
}(window, document)
如下图是阿里手淘在iPhone6下的情况，在图中我们可以看到html的font-size为font-size: 100px;; 然后呢他们的样式都是在行内的，而且window resize的时候内容区域是不会变化的，需要重新渲染；
淘宝iPhone6
- 小米(设计图是720*1280)
//小米 m.com
!function(e){
var t = e.document,
n = t.documentElement,
i = e.devicePixelRatio || 1,
a = "orientationchange" in e ? "orientationchange" : "resize",
d = function(){
var e = n.getBoundingClientRect().width || 360; // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
(1 == i || e > 720) && (e = 720), n.style.fontSize = e/7.2 + "px" // 小米就是6啊 设计图都是安卓 720*1280界面
};
n.setAttribute("data-dpr", i),
t.addEventListener && (e.addEventListener(a, d, !1), "complete" === t.readyState ||
t.addEventListener("DOMContentLoaded",
function() {
setTimeout(d)
}, !1)
)
} (window)
下图是雷布斯的小米，小米设计图是根据5寸（安卓 7201280）设计的，在720手机中如图中icon的大小为 7276， html中font-size: 50px;，计算为72/50 = 1.44 rem
小米安卓
网友评论