cct-flexible

cct-flexible 移动端适配解决方案

1. 使用px单位，不用rem单位，不用计算也不用转换
2. 手机设计尺寸在PC及ipad等大屏设备下以手机效果显示（以手机宽度在大屏设备下居中显示，尽可能看全）
3. 该适配方案是通过控制viewport缩放实现的，因此在pc下viewport的缩放是不起作用的，但会以设计尺寸宽度居中显示

安装

使用npm或cnpm安装

    // npm安装
    npm install --save cct-flexible
    // cnpm安装
    cnpm install --save cct-flexible
    // yarn安装
    yarn add cct-flexible

使用

esm模块化引用方式

    import cctFlexible from 'cct-flexible';
    cctFlexible();

cjs模块化引用方式

    const cctFlexible = require('cct-flexible');
    cctFlexible();

如果是script引入的方式cctFlexible就已经是全局函数了不需要额外做什么

配置设计稿尺寸

1. 默认设计稿尺寸是750，这个值是可以配置的
2. 如果您的设计稿尺寸不是750的那么一定要配置自己的设计稿尺寸！！！否则比例就会出问题！！！
3. 假如您的设计稿是640则可以按如下参数进行配置，当然也可以是任意数值
4. 当指定了设计尺寸时会自动根据根据该尺寸计算出视口的缩放系数，最终html视口宽将等于设计稿宽

    cctFlexible({width:640})

大屏下也想显示手机尺寸

1. 有的时候是不是想在PAD或者PC下以手机的宽度展示？
2. 如果分辨率/缩放后的宽度 >2 即表示设备是较宽的屏即大屏，则将显示的比例再进行缩小以达到竖屏手机的显示效果。
3. 在大屏设备下按比例完全充满可能并不太好，比如750设计稿在ipad下显示过大，因此大屏设备下默认以60%的比例显示，通过maxScale可以设置最大缩放值，默认为0.6，仅在大屏设备下有效。
4. 假如您希望大屏下最大显示比例为50%则可以按如下配置

    cctFlexible({maxScale:0.5})

如果你即需要配置设计稿尺寸又需要设置最大显示宽度则可以如下

    cctFlexible({width:640,maxScale:0.5})

ipad下显示效果

maxScale:0.6，即以60%的宽度显示，默认值为0.6
如果想用手机的设计尺寸在ipad等大屏设备有较好的效果还不想多写代码是不可能的！
通过这种方式显示已经是最低的成本！如果在大屏也按比例充满显示那么一屏也显示不了多少内容，太大了！ 所以默认值设置为0.6看起来还好，如果你想显示再大点或再小点可以通过maxScale来调整。 也可以判断设备类型来设置不同的maxScale以在各种设备下有更好的显示效果。 maxScale:1，以100%的宽度显示，即大屏下始终充满显示