移动端 870*1280 设计规范和 rem.js

科普H5尺寸适配

H5的页面与一般移动端的尺寸稍有不同，由于主要是在微信里进行传播推广，所以在设计的时候，H5设计区域是必须去掉顶部通栏与导航栏的高度（如下图）

image

H5 设计稿尺寸说明

根据我们多年制作h5的经验，结合市场全面屏的显示尺寸，在经过上百个H5案例的测试研究后，蓝橙总结出一个能通用适配的尺寸，可以适配各个尺寸的机型的，且能保证页面信息展示的完整性，因此设计师在设计H5界面时，请仔细阅读并理解此篇文章内容，并严格遵循该尺寸规范，进而可避免因尺寸问题而导致改稿，或因尺寸问题而影响用户体验。以下内容如有不理解处，请及时与我方沟通。

H5 竖屏一屏尺寸为870(px) * 1280(px)；主要内容控制在644(px)1280(px)内;分辨率72像素；

这里解释一下两个尺寸的含义：

外框870*1280px，仅用于填充不同手机屏幕边缘区域，确保不会露白

内框644*1770px，这个区域里的内容可以确保在所有手机屏幕上完整显示。

（如下图）

image

PS:

1.建议顶部主要内容不能高出安全距离40(px)，一是考虑到页面美观度，二是测试版本顶部会有微信系统的测试版提示遮罩条

2.底部主要内容不能低于安全距离70(px) ，比如按钮低于70px，iPx用户点击时，会误触发到home键，影响体验

2.如果是设计滑动长图（高度不止一屏），则页面高度适具体内容而定；

3.制作设计稿时，设计师不需要把设计稿上的所有尺寸进行2倍处理，前端是直接采用的设计图尺寸。

image

设计源文件的温馨提示：

1.源文件请发送PSD格式分层文件或AI格式文件；

2.源文件里请不要使用链接图层，容易导致图片缺失；

3.如需添加动画效果的图层，请不要使用27种混合模式（正片叠加、颜色加深、滤色……），不然保存出的PNG图会是黑色，动画师要奔溃的；

4.设计源文件保存时，请删除掉不要的图层和空图层；不然前端小哥哥容易蒙圈哟~

5.源文件大小不超过200M，前端小哥哥的电脑可能是大头电脑。

这个尺寸真的可以吗？

我们来看看用我们这个尺寸做出来的设计稿与实际显示效果

设计师做出来的图是酱紫的

image

最终手机看到得效果是酱紫的

image

您有发现什么吗？

设计稿在全面屏手机上左右显示区域宽度会少于常规屏手机。这就是为什么我们要把宽度控制在644px内了。因此，这个8701280尺寸完全没有问题呢，但是重点是，要把主要内容控制在6441170，才能保证不管全面屏还是常规屏手机，都能完整的显示完主要内容。

总结，以现有市场上流行的移动智能手机，单页翻转（非延伸向下的长页面）竖屏设计稿尺寸为870*1280，主要内容控制在宽644内，就能适应各个型号的手机啦！

image

rem.js
用法：
1、背景区域宽写870rem，高写1280rem；背景图大小cover即可。
2、内容区宽直接写644rem，其余的量出来多少就写多少。

!function (window) {
    var docWidth = 870; //设计图宽度
    var doc = window.document,
      docEl = doc.documentElement;
      var recalc = function() {
        var psW = 870, psH = 1280;
        var bw = docEl.getBoundingClientRect().width, bh = docEl.getBoundingClientRect().height;
        var scale = bh / psH;
        var w = psW * scale;
        document.documentElement.style.fontSize = (w * 100 / psW) + 'px'; 
      };
    docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);
    if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
      doc.documentElement.classList.add('ios');
      if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
        doc.documentElement.classList.add('hairline');
    }
    if (!doc.addEventListener) return;
    if(window.landScapeOn){
        if('orientationchange' in window){
          window.onorientationchange  = function(){
            recalc();
            window.landScape&&window.landScape();
          }
        }
    }
    doc.addEventListener('DOMContentLoaded', function(){
      recalc();
    }, false);
    window.onresize=function(){
      recalc();
    }
    window.onchange=function(){
      recalc();
    }
  }(window);

最后编辑于：2020.09.11 14:28:31

移动端 870*1280 设计规范 和 rem.js

移动端 870*1280 设计规范和 rem.js