移动端页面适配解决方案

1、流体布局

所谓的流体布局，就是用百分比来定义宽度，最外层容器的宽度设置为100%，就能够适配不一样的屏幕，子元素按照比例来设置百分比，子元素总体的百分比之和就是100%，可是若是有子元素设置了边框，或者padding，那么总体的宽度就会大于100%，这时，咱们能够将盒子的尺寸计算方式设置为从边框计算，经过设置：box-sizing:border-box，此时，盒子设置的宽度就是盒子的实际宽度，就没有这个问题了。

宽度解决了，高度如何设置呢？通常的元素，高度能够固定不变，因此在屏幕变化时，咱们能够看到元素的宽度变了，高度不变，可是对于图片，若是高度不一样，图片就会被拉扁，此时咱们能够将图片的宽度设为100%；它的宽度就由它的父级的宽度决定，图片的高度不设置，图片就会按照宽度变化等比例放大或缩小，这是图片的特性，这样就能够作到图片的适配了。

示例以下：

  * {
       box-sizing: border-box;
    }

  .wrap {
       overflow: hidden;
    }

  .banner {
       overflow: hidden;
    }

  .banner img {
       width: 100%;
    }

  .l_con {
       width:33.333333%;
       height:50px;
       float: left;
    }
  .c_con {
       width:33.333333%;
       height:50px;
       float: left;
    }
   .r_con {
       width:33.333333%;
       height:50px;
       float: left;
    }

2、响应式布局

响应式布局，就是使用媒体查询的方式，针对不一样的屏幕，对应不一样的样式，可是移动端的屏幕不少种，若是要对应这么多套不一样的样式，这样作也不现实，因此针对移动端，能够划分出三个屏幕宽度范围，在范围以内的，就使用同一套样式，这样定义三套样式就能够了，宽度的区间能够参照苹果手机的分辨率：374px如下为第一个区间，375px到413px为第二个区间，414px以上为第三个区间，按照这个三个区间定义三套样式，在苹果手机上能够作到很好的适配，但对于一些其余分辨率的手机，可能会有一些不太适配的细节，可是这三套，应该基本上是适用了。

示例以下：

/* 最小尺寸样式 */
        ... ... 
        
/* 大于等于 375px 尺寸样式 */
   @media screen and (min-width: 375px){
         ... ...
   }
        
/*大于等于 414px 尺寸样式*/
  @media screen and (min-width: 414px){
        ... ...
  }

3、弹性盒子布局模型

弹性盒子布局模型是一个新增的CSS 布局模块，它带有流体布局和响应式布局的一些特性，并且它用少许的属性能够实现了多个元素的对齐方式，分布以及顺序等问题，用它能快捷高效的实现适配多终端的布局，这种模块简称为 flexbox，flexbox布局模块的前后有三个版本，前两个版本的一些属性在最新的浏览器上已经得不到支持了，第三个版本在最新的浏览器上已获得普遍的支持。

Flexbox布局模块是CSS3新增的一些属性，这些属性分为容器属性和条目属性，容器和条目是这种模块里面的概念，指的其实就是父元素和子元素。父元素经过设置display:flex来声明flexbox模块、经过flex-flow来设置子元素排列方式、经过justify-content来设置元素的分布方式等等。而子元素经过flex属性来设置伸长或缩小比例、经过order来设置它在容器中的顺序等等。

示例以下：

.menu {
   max-width: 800px;
   height: 40px;
   margin: 0 auto;
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.menu li {
   flex: 1;
}

4、基于rem的布局

rem是CSS3新增的一个单位，相对于em单位，rem的单位设置更加简单，它是相对于根元素的的字体大小，其余的元素若是用rem来设置单位，它们对应的基准就是同样的，这样，在移动端适配中，除了html元素，其余元素的宽、高、行高、背景定位等等都用rem来设置，咱们设定一个宽度做为基准，好比320px，而后按照这个基准，按比例来调节不一样屏幕上对应的html元素的字体大小，就能够同步改变其余全部元素的用rem设置的尺寸的大小，这样就能够作到真正的按比例适配，不像流体布局，只能改变宽度，这种方式直接，高效，目前普遍应用在移动端布局中。

动态改变html标签文字大小的JavaScript以下：

(function () {
   let calc = function () {
       let docElement = document.documentElement;
       let clientWidthValue = docElement.clientWidth > 640 ? 640 : docElement.clientWidth;
       docElement.style.fontSize = 20 * (clientWidthValue / 320) + 'px';
   }
   calc();
   window.addEventListener('resize', calc);
})()

css 代码设置以下：

.search{
   position: absolute;
   right:0.725rem;
   top:0.625rem;
   width:1.35rem;
   height:1.35rem;
   backgrond:url(../images/icons.png) left -31.97rem;
   -webkit-background-size: 2.9rem 33.5rem;
   background-size: 2.9rem 33.5rem;
}

在实际开发中，咱们能够根据实际须要，选择适合的适配方式。

本文原出处：http://pcedu.pconline.com.cn/1024/10241144.html