chrome访问js文件 HTML中移动端有哪些布局方案(2)

三、天猫设计方案

采用scale = 1.0写死viewport

不采用rem，body的font-size=14px写死

px + flexbox布局

四、遇到的问题

1. 高清屏下（ dpr>1 ）1px线模糊问题

大多数情况下，设计师产出各种尺寸的稿子，都是先画出大尺寸（一般2x）的稿子，再去缩小尺寸，最后导出。 这样会带来问题：如果设计师在2倍稿子里画了一条1px的线（例如border：1px），这时候假如我们要在scale=1.0里呈现的话，就会变成0.5px，而很大一部分手机是无法画出0.5px的。

理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。在普通屏幕下是没有问题的，但是在retina屏幕（dpr=2）下就会出现位图像素点不够，从而导致图片模糊的情况。

2. 高清屏下（ dpr>1 ）高清图片模糊问题

对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。chrome访问js文件所以，对于图片高清问题，比较好的方案就是采用两倍图片。如：200×300(css pixel)img标签，就需要提供400×600的图片。

对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。所以，对于图片高清问题，比较好的方案就是采用两倍图片。如：200×300(css pixel)img标签，就需要提供400×600的图片。chrome访问js文件

五、终极解决方案-->淘宝设计方案

通过js处理获取手机dpr参数，然后动态生成viewpoint

获取手机物理像素宽度，分成10份，每一份的宽度即是rem的尺寸。

根据设计稿的尺寸（px）分三种情况进行处理，采用px + rem布局

相关的脚本如下：

$(document).ready(function(){
    var dpr, rem, scale;
    var docEl = document.documentElement;
    var fontEl = document.createElement(style);
    var metaEl = document.querySelector(meta[name="viewport"]);
    var view1 = document.querySelector(#view-1);
    if(window.screen.width < 540){
        dpr = window.devicePixelRatio || 1;
        scale = 1 / dpr;
        rem = docEl.clientWidth * dpr / 10;
    }else{
        dpr = 1;
        scale =1;
        rem = 54;
    }//貌似最新的淘宝网站又去掉了，只是限制了主体内容的宽度
    // 设置viewport，进行缩放，达到高清效果
    metaEl.setAttribute(content, width= + dpr * docEl.clientWidth + ,initial-scale= + scale + ,maximum-scale= + scale + , minimum-scale= + scale + ,user-scalable=no);
    // 设置整体p的宽高
    view1.setAttribute(style, width:+ docEl.clientWidth+px; height:+ docEl.clientHeight+px);
    // 设置data-dpr属性，留作的css hack之用
    docEl.setAttribute(data-dpr, dpr);
    // 动态写入样式
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = html{font-size: + rem + px!important;};
    $(body).attr(style, font-size: + dpr * 12 +px);
    // 给js调用的，某一dpr下rem和px之间的转换函数
    window.rem2px = function(v) {
        v = parseFloat(v);
        return v * rem;
    };
    window.px2rem = function(v) {
        v = parseFloat(v);
        return v / rem;
    };
    window.dpr = dpr;
    window.rem = rem;})

六、设计方案总结

从以上的分析我们不难看出：

网易彩票的方案上手快，开发效率高，兼容性好，但是不够灵活和精细；

天猫的设计思路比较简单，flexbox非常灵活，但是flexbox的兼容性方面需要好好处理，不够精细；

淘宝的方案几乎解决了移动端遇到的所有问题，堪称完美的解决方案，但是开发效率低、成本比较高。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

HTML中的滚动条有哪些使用技巧

html两秒跳转至其他页面

怎样使用trigger方式实现不用点击file类型的input弹出文件选择对话框

a标签中怎样设置隐藏其他属性只显示图片

以上就是HTML中移动端有哪些布局方案的详细内容，更多请关注php中文网其它相关文章！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-88997-2.html