移动端布局 rem,和px

1.rem布局,根据屏幕来计算rem,也就是意义上的适应屏幕,但是一些字体大小转换和计算有些复杂。

// rem 布局重定义
(function(){
    $('html').css('font-size', ($(window).width() - 2) / 10);
    var multiple = parseFloat($('html').css('font-size')) / ($(window).width() - 2) * 100;
    if(multiple != 10){
        $('html').css('font-size', ($(window).width() - 2) / multiple);
    }
    document.write('<meta name = "format-detection" content = "telephone=no">');
})();

2.360布局就是说把屏幕按照360的尺寸自动放大缩小,这样用px就可以兼容所有手机了。

(function (window, document, width) {
  var content = "user-scalable=no,width=" + width;
  if( window.PhoneSystem.name == "Android" && window.parseInt(window.PhoneSystem.version[0]) <= 4 && window.parseInt(window.PhoneSystem.version[1]) < 5) {
    content += ",target-densitydpi=device-dpi";
  }
  content += ",initial-scale=" + window.screen.width / width;
  content += ",minimum-scale=" + window.screen.width / width;
  content += ",maximum-scale=" + window.screen.width / width;
  var meta = document.createElement("meta");
  meta.setAttribute("name", "viewport");
  meta.setAttribute("content", content);
  var head = document.getElementsByTagName("head")[0];
  head.insertBefore(meta, document.getElementsByTagName("meta")[0]);
})(window, document, 360);

 

posted @ 2017-11-17 13:28  咚咚酱  阅读(852)  评论(0编辑  收藏  举报