移动端适配
- 屏幕宽度/高度 js：scree.height/screen.width ; css: @media all and (width/height: 600px){} https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries(概念：media_query 查询,media_type类型, media_feature特性)
- 屏幕高宽比：scree.height/screen.width
- 设备像素比：window.devicePixelRatio，-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio
viewportvisualviewpor，viewportlayoutviewport
- layout viewport：document.documentElement.clientWidth/Height；
- visual viewport：window.innerWidth/Height；
- 屏幕：screen.width and screen.height；
- 一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
- 设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。
- 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向。
- 在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。
- 在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
- 使用环境：
| 环境 |
微信
|
qq空间 |
qq空间
|
微博
|
浏览器
|
| 导航栏 |
无
|
无 | 有 |
有
|
有
|
| 调试工具 |
|
|
|
|
|
- 屏幕模式：横屏/竖屏
在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。
对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：
问题：
1. 对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题？
字体： 中文字体默认，英文使用Helvetica 。即 body{font-family:Helvetica;}
-
系统/字体中文英文数字
ios系统 HelveticaNeueandroid 系统DroidsansfallbackDroid SansDroid Sanswinphone 系统Dengxian(方正等线体)SegoeSegoe
目前Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：
1a = 7.5px1rem = 75px 那么我们这个示例的稿子就分成了10a，也就是整个宽度为10rem，<html>对应的font-size为75px：
如何快速计算
在实际生产当中，如果每一次计算px转换rem，或许会觉得非常麻烦，或许直接影响大家平时的开发效率。为了能让大家更快进行转换，我们团队内的同学各施所长，为px转换rem写了各式各样的小工具。
CSSREM
CSSREM是一个CSS的px值转rem值的Sublime Text3自动完成插件。这个插件是由@正霖编写。先来看看插件的效果：
有关于CSSREM如何安装、配置教程可以点击这里查阅。
CSS处理器
除了使用编辑器的插件之外，还可以使用CSS的处理器来帮助大家处理。比如说Sass、LESS以及PostCSS这样的处理器。我们简单来看两个示例。
Sass
使用Sass的同学，可以使用Sass的函数、混合宏这些功能来实现：
@function px2em($px, $base-font-size:16px) {
@if (unitless($px)) {
@warn"Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return px2em($px + 0px); //That may fail.
} @elseif (unit($px) == em) {
@return$px;
}
@return ($px / $base-font-size) * 1em;
}
除了使用Sass函数外，还可以使用Sass的混合宏：
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
//Conver the baseline into rems
$baseline-rem: $baseline-px / 1rem * 1;
//Print the first line in pixel values@if$support-for-ie {
#{$property}: $px-values;
}
//if there is only one (numeric) value, return the property/value line for it.
@if type-of($px-values) == "number"{
#{$property}: $px-values / $baseline-rem;
}
@else {
//Create an empty list that we can dumpvalues into
$rem-values:();
@each$value in $px-values{
// If the value is zero ornot a number, return it
@if$value == 0or type-of($value) != "number"{
$rem-values: append($rem-values, $value / $baseline-rem);
}
}
// Return the property and its list of converted values
#{$property}: $rem-values;
}
}
有关于更多的介绍，可以点击这里进行了解。
PostCSS(px2rem)
除了Sass这样的CSS处理器这外，我们团队的@颂奇同学还开发了一款npm的工具px2rem。安装好px2rem之后，可以在项目中直接使用。也可以使用PostCSS。使用PostCSS插件postcss-px2rem：
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var px2rem = require('postcss-px2rem');
gulp.task('default', function() {
var processors = [px2rem({remUnit: 75})];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
除了在Gulp中配置外，还可以使用其他的配置方式，详细的介绍可以点击这里进行了解。
配置完成之后，在实际使用时，你只要像下面这样使用：
.selector{
width:150px;height:64px;/*px*/font-size:28px;/*px*/border:1px solid #ddd;/*no*/}px2rem处理之后将会变成：
.selector{
width:2rem;border:1px solid #ddd;}[data-dpr="1"].selector{
height:32px;font-size:14px;}[data-dpr="2"].selector{
height:64px;font-size:28px;}[data-dpr="3"].selector{
height:96px;font-size:42px;}在整个开发中有了这些工具之后，完全不用担心px值转rem值影响开发效率。
字号不使用rem
前面大家都见证了如何使用rem来完成H5适配。那么文本又将如何处理适配。是不是也通过rem来做自动适配。
显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。
如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
为了能更好的利于开发，在实际开发中，我们可以定制一个font-dpr()这样的Sass混合宏：
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;}[data-dpr="3"] & {
font-size: $font-size * 3;}
}
有了这样的混合宏之后，在开发中可以直接这样使用：
@include font-dpr(16px);
当然这只是针对于描述性的文本，比如说段落文本。但有的时候文本的字号也需要分场景的，比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景，完全可以使用rem给slogan做计量单位。
CSS
本来想把这个页面的用到的CSS(或SCSS)贴出来，但考虑篇幅过长，而且这么简单的页面，我想大家也能轻而易举搞定。所以就省略了。权当是给大家留的一个作业吧，感兴趣的可以试试Flexible能否帮你快速完成H5页面终端适配。
