关于自适应网页的实现

## 目录

1. 如何判断网页类型:固定宽高/固定宽自适应高/自适应宽固定高/自适应宽高/响应式宽高

2. 常见自适应方式,单位

3. 具体项目考量/要求

### 网页类型

**自适应设计(Adaptive design)**

是为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页。

**响应式设计(Responsive design)**

是一套界面同时运行到pc端、平板、手机端各个不同的视口。通过检测设备的分辨率,来对页面做出不同的布局和内容。

**其他类型**

固定宽高等其他类型直接px写好就可以

### 常见自适应方式,单位

**单位**

[参考地址](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units)

1. 绝对长度:cm/mm/Q/in/pc/pt/px

2. 相对长度:em/ex/ch/rem/lh/vw/vh/vmin/vmax

**自适应方式**

[Flexible实现手淘H5页面的终端适配](https://github.com/amfe/article/issues/17)

[rem布局原理深度理解](https://www.cnblogs.com/leaf930814/p/9059340.html)

[基于vw等viewport视区单位配合rem响应式排版和布局](https://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/)

+ 常见的实现方案

   1. 以百分比为单位,整个浏览器1/100为基础单位

   2. 以vh/vw为单位,可视区域1/100为基础单位

   3. 以rem为单位,计算html字体方式又有两种:js/css calc,rem是参照页面计算,一般js计算时将页面分为10份

+ 最终实现方案

   1. 以rem为基础单位

   2. 用js计算出每个页面对应的html基数字体大小

   3. css calc 计算body在不同屏幕大小时显示的字体大小

   4. 为什么不直接用calc计算出的字体大小来布局,重要的原因是初始大小的变化需要计算不同rem值,整个屏幕不是分成10份,相对来说麻烦,但是并不影响使用

   5. 不要用vh做任何设定,高度的变化不可控制

+ 一个小插件

   1. px2rem:将px转换成rem的插件,vs code/sublime text

### 基于rem和vw和calc最佳计算代码

“`

    html {

        font-size: 16px;

    }

    @media screen and (min-width: 375px) {

        html {

            /* iPhone6的375px尺寸作为16px基准,414px正好18px大小, 600 20px */

            font-size: calc(100% + 2 * (100vw – 375px) / 39);

            font-size: calc(16px + 2 * (100vw – 375px) / 39);

        }

    }

    @media screen and (min-width: 414px) {

        html {

            /* 414px-1000px每100像素宽字体增加1px(18px-22px) */

            font-size: calc(112.5% + 4 * (100vw – 414px) / 586);

            font-size: calc(18px + 4 * (100vw – 414px) / 586);

        }

    }

    @media screen and (min-width: 600px) {

        html {

            /* 600px-1000px每100像素宽字体增加1px(20px-24px) */

            font-size: calc(125% + 4 * (100vw – 600px) / 400);

            font-size: calc(20px + 4 * (100vw – 600px) / 400);

        }

    }

    @media screen and (min-width: 1000px) {

        html {

            /* 1000px往后是每100像素0.5px增加 */

            font-size: calc(137.5% + 6 * (100vw – 1000px) / 1000);

            font-size: calc(22px + 6 * (100vw – 1000px) / 1000);

        }

    }

“`

### 自动计算html字号为屏幕宽度1/10的js

“`

    function htmlFz(){

        var dpr, rem, f;

        var docEl = document.documentElement;

        var f = document.querySelector(‘html’);

        rem = docEl.clientWidth > 750 ? 75 : (docEl.clientWidth / 10);

        window.onresize = function(){htmlFz();};

        f.style.fontSize = rem + ‘px’;

    }

    htmlFz();

“`