移动端开发⾃适应解决⽅案
原⽂章地址：
移动端⾃适应⽅案有很多种
1.流式布局
也就是固定⾼度，宽度使⽤百分⽐的⽅法，这种⽅法会导致⼀些元素在⼤屏⼿机上拉伸严重的情况，影响视觉效果，只有在很少⼀部分⼿机上能完美的展⽰设计师想要的效果。携程之前⽤的就是流式布局，但之后也改版了。
2.固定宽度做法
⽐如早期的淘宝webpage，页⾯设置成320的宽度，超出部分留⽩，在⼤屏幕⼿机上，就会出现两条⼤百边，分辨率⾼的⼿机，页⾯看起来就会特别⼩，按钮，⽂字也很⼩，之后淘宝改了布局⽅案，也就是接下来要讲的rem布局，
3.响应式做法
⽤⼀些css框架，⽐如bootstrap，或者jqueryUI，使⽤媒体查询，这种⽅式维护成本⾼，很少有⼤型⽹站使⽤这种布局（据说的）
4.设置viewport进⾏缩放
天猫的web app的⾸页就是采⽤这种⽅式去做的，以320宽度为基准，进⾏缩放，最⼤缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个⽅法简单粗暴，⼜⾼效。说实话我觉得他和⽤接下去我们要讲的rem都⾮常⾼效，不过有部分同学使⽤过程中反应缩放会导致有些页⾯元素会糊的情况。
<布局
rem是css3新引⼊的单位，在pc端会有兼容性的问题，对移动端⽐较友好。简⽽⾔之就是通过动态设置html根元素的fontsize，等⽐缩放元素⼤⼩来⾃适应移动设备。
翻了很多资料，po也测试过最好⽤省事的就是rem布局 ，rem布局也有新旧版，这⾥讲最普⽤的阿⾥团队的⾼清⽅案，也是现在淘宝m端使⽤的解决⽅案。
以下是核⼼js代码
! function(e) {
function t(a) {
if (i[a]) return i[a].exports;
var n = i[a] = {
exports: {},
id: a,
loaded: !1
};
return e[a].ports, n, n.exports, t), n.loaded = !0, n.exports
}
var i = {};
return t.m = e, t.c = i, t.p = "", t(0)
}([function(e, t) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var i = window;
t["default"] = i.flex = function(e, t) {
var a = e || 100,
n = t || 1,
r = i.document,
o = navigator.userAgent,
d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
l = o.match(/U3\/((\d+|\.){5,})/i),
c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
s = i.devicePixelRatio || 1;
p || d && d[1] > 534 || c || (s = 1);
var u = 1 / s,
m = r.querySelector('meta[name="viewport"]');
m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable    }, e.exports = t["default"]
}]);
flex(100, 1);
代码原理：
1.根据设备屏幕的DPR（设备像素⽐，⽐如dpr=2时，表⽰1个CSS像素由2X2个物理像素点组成） 动态设置 html 的font-size
2.同时根据设备DPR调整页⾯的缩放值，进⽽达到⾼清效果。
⽅案优势:
1.引⽤简单，布局简便(只要把js代码贴到head标签⾥⾯，就可以使⽤了，设计稿⼀般是640 或者750的，不需要进⾏单位换算，直接⽤设计稿的
尺⼨就可以,⽐如设计稿上有⼀个btn的⾼度为80px，宽度为120px,⾼清⽅案默认1rem=100px，那么 btn的宽度就设置为:)
.btn {
width:0.8rem
height:1.2rem
}
2.根据设备屏幕的DPR,⾃动设置最合适的⾼清缩放。保证了不同设备下视觉体验的⼀致性。
旧⽅案，屏幕越⼤，元素也越⼤，新⽅案，屏幕越⼤，看到的越多
看得越多的理解：
⽐如，⼀篇很长的⽂章在ip4上，⼀屏盛不了那么多内容，⽽在ip6plus上，可以全部看清楚，这是因为，新⽅案会根据dpr来缩放视⼝，⼤
屏⼩屏的⼿机上，显⽰的字体⼤⼩都是⼀致的，当然在⼤屏上看到的东西就多咯～
3.有效解决移动端真实1px问题（这⾥的1px 是设备屏幕上的物理像素）
并不是所有⽤px的地⽅都要⽤rem，rem布局只针对固定宽度。
依需求⽽定，⽐如淘宝页⾯底下的tabar，和头部搜索区域，都是⽤百分⽐来布局的，或者flex和模型，当在ipad上打开的时候就可以看见，头部和tab是撑满全屏的。
中间的主要内容（最外部的容器）要设置⼀个max-width，demo设置的是max-width：10rem，这⾥我
不太明⽩为什么要设置成
10rem，有弄明⽩的⼩伙伴希望能告诉我。谢谢（已解决，和设置最外层宽度为100%是⼀样的道理，10rem 可以适配到所有⼿机设备。1000%可以适配ipad，demo试试就知道了）
（应⽤了此⽅案，不管设计图多宽（当然，⼀般宽度为750，640也可以），最外层的div宽度设为100%就⾏，然后就可以愉快的布局了，不会出现你说的⽩边的情况。）
对于尺⼨⽐较⼤的元素，应该考虑⽤百分⽐。rem做单位的元素在哪种设备下都是固定⼤⼩，这点必须牢记！！
可能遇到的问题
1.问：为啥⼿机⽹页效果图宽度是要640或者750的，我⾮得弄个666的不⾏咩？
答：⽼实说当然可以，不过为了规范，640或者750是相对合适的。拿Iphone 5s 举例，它的css像素宽度是320px，由于它的dpr=2，所以它的物理像素宽度为320 × 2 = 640px，这也就是为什么，你在5s上截了⼀张图，在电脑上打开，它的原始宽度是640px的原因。那 iphone 6 的截图宽度呢？ 375 × 2 = 750那 iphone 6 sp 的截图宽度呢？ 414 × 3 = 1242以此类推，你现在能明⽩效果图为什么⼀般是 640 ，750 甚⾄是 1242 的原因了么？（真没有歧视安卓机的意思。。。）
2.问：宽度⽤rem写的情况下， 在 iphone6 上没问题， 在 iphone5上会有横向滚动条，何解？
答：假设你的效果图宽度是750，在这个效果图上可能有⼀个宽度为7rem（⾼清⽅案默认 1rem = 100px）的元素。我们知道，⾼清⽅案的特点就是⼏乎完美还原效果图，也就是说，你写了⼀个宽度为 7rem 的元素，那么在⽬前主流移动设备上都是7rem。然⽽，iphone 5的宽度为640，也就是6.4rem。于是横向滚动条不可避免的出现了。怎么办呢？ 这是我⽬前推荐的⽐较安全的⽅式：如果元素的宽度超过效果图宽度的⼀半（效果图宽为640或750），果断使⽤百分⽐宽度，或者flex布局。就像把等屏宽的图⽚宽度设为100%⼀样。
3.问：不是 1rem = 100px吗，为什么我的代码写了⼀个宽度为3rem的元素，在电脑端的⾕歌浏览器上宽度只有150px?
答：先说⾼清⽅案代码，再次强调咱们的⾼清⽅案代码是根据设备的dpr动态设置html 的 font-size，如果dpr=1(如电脑端），则html的font-size为50px，此时 1rem = 50px如果dpr=2(如iphone 5 和 6），则html的font-size为100px，此时 1rem = 100px如果
dpr=3(如iphone 6 sp），则html的font-size为150px，此时 1rem = 150px如果dpr为其他值，即便不是整数，如3.4 , 也是⼀样直接将dpr 乘以 50 。
再来说说效果图，⼀般来讲，我们的效果图宽度要么是640，要么是750，⽆论哪⼀个，它们对应设备的dpr=2，此时，1 rem = 50 × 2 = 100px。这也就是为什么⾼清⽅案默认1rem = 100px。⽽将1rem默认100px也是好处多多，可以帮你快速换算单位，⽐如在750宽度下的效果图，某元素宽度为53px，那么css宽度直接设为53/100=0.53rem了。
然⽽极少情况下，有设计师将效果图宽定为1242px，因为他⼿⾥只有⼀个iphone 6 sp (dpr = 3)，设计完效果图刚好可以在他的iphone 6 sp⾥查看调整。⼀切完毕之后，他将这个效果图交给你来切图。由于这个效果图对应设备的dpr=3，也就是1rem = 50 × 3 =
150px。所以如果你量取了⼀个宽度为90px的元素，它的css宽度应该为 90/150=0.6rem。由于咱们的⾼清⽅案默认1rem=100px，为了还原效果图，你需要这样换算。当然，⼀个技巧就是你可以直接修改咱们的⾼清⽅案的默认设置。在代码的最后 你会看到 flex(100, 1) ，将其修改成flex(66.66667, 1)（感谢简友：指出此处错误！ 2017/3/24）就不⽤那么⿇烦的换算了，此时那个90px的直接写成0.9rem就可以了。
4.问：⾼清⽅案在上，有时候字体会不受控制变的很⼤，怎么办？
答：
5.问：我在底部导航⽤的flex感觉更合适⼀些，请问这样⼦混着⽤可以吗？
答：咱们的rem适合写固定尺⼨。其余的根据需要换成flex或者百分⽐。源码⽰例中就有这三种的综合运⽤。
6.问：在⾼清⽅案下，⼀个标准的，较为理想的宽度为640的页⾯效果图应该是怎样的？
7.这个会和bootstrap冲突。
解决办法：
1，将bootstrap 中，凡是⽤到px的单位⼀律换成rem
2，如果你有使⽤webpack，建议使⽤将css转成rem的包（postcss-pxtorem）将⾃动完成第⼀步的操作。
8.@2x和@3x的图⽚还要判断不同的dpr下⽤不同的图⽚。
Normalize.css 是⼀个可以定制的CSS⽂件，它让不同的浏览器在渲染⽹页元素的时候形式更统⼀。
Normalize.css 能⼲什么：
保留有⽤的默认值，不同于许多 CSS 的重置
标准化的样式，适⽤范围⼴的元素。
纠正错误和常见的浏览器的不⼀致性。
⼀些细微的改进，提⾼了易⽤性。
使⽤详细的注释来解释代码。
⽀持的浏览器：
Google Chrome (latest)
为什么使用bootstrap?Mozilla Firefox (latest)
Mozilla Firefox ESR
Opera (latest)
Apple Safari 6+
Internet Explorer 8+
（没错，在此⽅案中，你可以完全按照这张设计稿的尺⼨写布局了。就是这么简单！）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。