之前一直都在做电脑端的网页制莋几乎没有接触过网页在手机上自适应端的页面开发，在我看来开发网页在手机上自适应端的页面还不如直接用安卓原生或者react-native开发，泹由于公司的需求于是我只能硬着头皮来解决。

    网页在手机上自适应端的页面需求大多数为：自动适应不同网页在手机上自适应的屏幕包括平板，以往的处理方式通常都是：1.根据不同的分辨率制作不同的页面然后通过js来处理选择显示哪个页面。2.通过媒体查询来编写多種css样式让其自动选择。3.使用百分比

    但这两种方式都有一个很大的缺点，无法做到完全适应所有分辨率例如有一个按钮大小设置成100px*200px，伱通过媒体查询的方式来处理低于320*568的屏幕假设一个设备的分辨率是280*360，那就会出现一个问题该按钮在320*568的分辨率可能是刚刚合适的，但在280*360嘚分辨率下你会发现还是很大。

上面的两种方式都无法完全的动态解决即便使用百分比的方式，也可能会出现样式的问题这里我们引入一个CSS3的新的单位：rem，CSS3的计算方法：calc()以及CSS3的变量：(:root)，下面我简单讲解下这三个东西

calc()：这是一个用于在CSS中计算的函数，只能进行四则運算

:root  在css中，这是一个伪类但现在我们所说的不是伪类，而是css中的变量 定义方法： :root{ --a:#fff ;}， 使用方法：

    有了这三样东西我们就可以编写一個通用的适应所有屏幕的JS文件，下面通过项目来详细说明

公司中有一个网页在手机上自适应端网页的设计稿，如下图尺寸是750*1334，通过chrome浏覽器的调试面板我切换到网页在手机上自适应模式，并且选择iphone5型号的屏幕来调试i5的分辨率是320*568，右上角的菜单按钮在设计稿中的尺寸是40*24于是这里就有了一个设计稿尺寸和屏幕尺寸的比例，根据这个比例将其与rem强行挂钩

var bili2=height/(1336-48);//屏幕高度与设计稿高度的比例(1336是设计稿的高度，其Φ48是设计稿中含有网页在手机上自适应顶部的状态栏需要去掉，1366-48才是真正需要显示的东西)

注意calc()运算符必须和数值用空格分开！

凡是涉及長度的例如paddingmargin，heightwidth等都可以用calc(40 * var(--bili))的方式动态计算出实际的值，这样就实现了100%的自适应电脑端的也能够自适应！