这篇文章是我自己憋了很久之后才开始写的一篇文章，因为这篇文章所罗列的知识点比较单一。但是回头想了一想，其实是我之前对于每篇文章写的东西太复杂了，我想我正在改变我之前的一种做法。我会逐渐写一点自己在开发的时候遇到的困难，以及自己对这些困难一些粗鄙的意见。
一、 事件的起因
在日常开发中你时常会遇到一种尴尬的情况--那就是你在开发前端的时候标记的尺寸只能在你开发的尺寸下面完美的呈现，在其他尺寸、屏幕下面会变得奇形怪状。正如如图所示的效果。
1、 在不同屏幕下面展示的效果一致，这就导致小屏幕的电脑需要借助滑动，并且在很多布局可能会存在显示不全或者换行的现象。 2、如果动态调整组建的宽度可能会导致组件变形或者显示不全。
了解过Android开发的程序员都知道，在Android平台现在适配有很多种方法：dp、linearlayout里面的weight、m(s,h,x,xx)dpi、直接根据屏幕尺寸计算等等。我在准备开发前端的时候还是希望能够达到触类旁通的效果。 接下来就直接向大家展示我的成果吧！ ###二、flex布局(类似linearlayout) 其实谈到这个布局呢？就得说一下，我是从之前开发react-native里面得到的灵感，我在这里说并不是炫耀自己有多好学，只是给大家抛砖引玉罢了，因为您学的每一门语言都是有其存在价值的。语言会过时的，但是思想是不会的。即使是未来的人工智能泛滥 flex是Flexible Box的缩写，翻译过来叫做弹性布局。反正用我拙计的英语看来这个就是一个灵活的盒子。至于更多更详细的介绍呢？请移步Flex 布局语法教程。
<head>
<title>测试apk</title>
<style type="text/css">
.test{
display: flex;
flex-direction: row;
}
.test1 {
width: 300px;
height: 200px;
background: yellow;
float: left;
}
.test2 {
flex: 1;
background: blue;
float: left;
}
.test3 {
width: 300px;
height: 200px;
background: red;
float: left;
}
</style>
</head>
<body>
<div class="test">
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
</div>
</body>
效果图如下：
1、flex-direction是控制主轴的对其方向。可选值：row（横向） | row-reverse（横向倒序） | column（纵向） | column-reverse（纵向倒序） 2、自组建的flex是分割点，可选auto，none。 3、设为Flex布局以后，子元素的float、clear和vertical-align属性将失效（希望给读者看到这点）
但是这个虽然能解决部分适配的问题，但是这只是解决了一小部分的问题，可是还是存在有好多问题这个东西并不能解决。例如我想让不同分辨率的视图显示不一样等等。此时就需要谈到媒体查询了。 ###三、媒体查询介绍 媒体查询的作用：使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。反正话不多说 直接上代码吧。
<head>
<title>测试apk</title>
<style type="text/css">
.test{
display: flex;
flex-direction: row;
}
@media screen and (min-width: 1026px) {
.test1{
width: 300px;
height: 300px;
background: blue;
}
}
@media screen and (max-width: 1024px) {
.test1{
width: 500px;
height: 500px;
background: yellow;
}
}
.test2{
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div class="test">
<div class="test1"></div>
<div class="test2"></div>
</div>
</body>
效果如图所示
<head>
<title>测试apk</title>
<style type="text/css">
body {
font-size: 16px
}
.test2{
width: 10rem;
height: 10rem;
background: red;
font-size:1rem;
}
</style>
</head>
<body>
<div class="test">
<div class="test2">im rookie</div>
</div>
</body>
这里将body中的font-size设置成16px，然后直接将body内的元素test2直接用rem做长度单位，字体也直接用rem。得到的效果图就如下所示：
<head>
<title>测试apk</title>
<style type="text/css">
@media screen and (min-width: 1026px) {
html {
font-size: 30px;
}
}
@media screen and (max-width: 1024px) {
html {
font-size: 10px;
}
}
.test2{
width: 10rem;
height: 10rem;
background: red;
}
</style>
</head>
<body>
<div>
<div class="test2">im rookie</div>
</div>
</body>
达到的效果图如下：
(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
###六、缩放结合媒体查询适配 当然在实际的开发中如果对于像我这样没有经验的小伙儿，要给一个大的项目做适配 无疑是一件很困难的事情。当然对于那种比较复杂的布局 单独的做媒体查询，将会造成很大的工作量。这里其实可以结合媒体查询可以做很到一套很简单的适配。代码如下：
@media screen and (max-width: 1024px) {
.body {
transform scale(0.75)
width 133.5%
height 133.5%
transform-origin 0 0
}
}
效果如下：
