最近，由于老板交待下去要准备开发一些移动端页面出来，作为一个工作以来都是以开发后台管理系统为主的web前端开发人员，我对移动端开发的了解并不多，对于移动端响应式布局，听过的一些技巧：使用rem代替px、设置viewport和使用flex布局等等，虽然一直有这些概念但毕竟没有真正动手开发过，所以，就从网上搜索一些博客用以加深了解。在阅读过几篇文章后，发觉这些文章的描述是缺乏了背景的上下文，读时候会遇到一些困惑，我就站在我的角度去复述一下对移动端开发的几点要点吧。
1、关于meta标签
在移动端开发中，会涉及到meta标签，这是HTML5里的元信息标签，会告诉浏览器一些有用的信息让浏览器作出不同于默认的渲染效果，在移动端开发中需要加入一个必备的元信息：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
这个标签是让HMTL文档的宽度等于设备的宽度，缩放比例是1，而且不允许用户自行缩放。
另外的需要加的meta标签是让页面在IOS系统中的手机浏览器中全屏显示，加入：
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
防止页面中的数字和邮箱变成链接情况，需要加入：
<meta name="format-detection" content="telephone=no, email=no">
2、devicePixelRatio的理解
devicePixelRatio是设备像素比的意思，指的是设备上物理像素和设备独立像素的比例。手机的宽高物理像素就是手机参数里的分辨率的数值，比如：IphoneX像素是2436x1125像素，那么设备的横向有1125个物理像素，设备的纵向有2436个物理像素。在浏览器中，通过window.devicePixelRatio获取设备像素比的值，IphoneX的devicePixelRatio值为3，那么设备的独立像素是812x375像素，这个像素是css3中的“px”值，例如，要想设置IphoneX中某个元素的宽与文档宽一样width设为375px。
3、rem的使用
rem可以用来设置元素的各种尺寸的值，它是以html元素的字体尺寸为准，例如html的字体设为12px，那么1rem=12px。移动设备多种多样，一般设计稿就只有一套，这一套设备稿是针对某一个部设备的，网上用来举例最多的是iphone6。例如：要设置一个元素宽度与设备宽度一致（为了说明，有意不使用百分比），那么，iphone6的设置是 width: 375px。但是在iphone 6 plus打开就会发现元素的宽度并不等于设备的宽度。要解决这个问题，在这里有一种解决思路：用JS动态改变html的字体尺寸，尺寸样式用单位"rem"代替"px"，当html字体的尺寸改变了，那么元素的宽度就改变了。
顺着上面的思路，假设设计稿是以Iphone6的尺寸设计出来的。我要设置元素的宽度用rem作单元，但是值为多少合适一点呢？网上说到的“网易方案”，用100px为参考，这样方便看着设计稿不用作为太复杂的计算就可以得出对应的值。Iphone6在设计稿上的宽度应该是750px，那么我就设置元素的width设为7.5em。要是换到Iphone6 plus设备上，html的font-size就要改变了，公式应该是 window.screen.availWidth / 375 * 100 / 2(注：window.screen.availWidth是设备的独立像素，2是Iphone6的设备像素比，这里用到375和2皆因假设设计稿是Iphone6)，所以在文档加载之后，加入以下的代码：
document.documentElement.style.fontSize = window.screen.availWidth / 375 * 100 / 2 + 'px';
这样修改了html字体的尺寸，而不需要修改css的代码，也不需要用媒体查询。
网上也提及到一种修改 initial-scale的方式，具体思路也是通过rem实现，只不过不是改变html的字体尺寸，而是改变缩放的比例，同样是以Iphone6的设计稿为例，样式一开始就要加入：
html{font-size: calc(100px / 2) ;}然后用JS改写meta里的属性：
let scale = window.screen.availWidth / 375document.querySelector('[name="viewport"]').setAttribute('content', `width=device-width, initial-scale=${scale}, user-scalable=no`)用这种方式实现，会发现最后元素的尺寸数值固定为Iphone6设备中的像素值，只是做了元素的显示缩放。
4、媒体查询
媒体查询可以根据不同的设备加载使用不同的css样式渲染页面，这种方式应该结合flex布局，使用百分比作单位，或者结合其它UI框架例如:bootstrap，antd，elementUI等等，这些框架提供了一些内置的类名方便控制不同设备大小的样式。
返回列表