zoukankan      html  css  js  c++  java
  • 移动端 html基值(转载)

    (function () {
              document.addEventListener('DOMContentLoaded', function () {
                  var html = document.documentElement;
                  var windowWidth = html.clientWidth;
                  html.style.fontSize = windowWidth / 6.4 + 'px';
                  // 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
              }, false);
          })();

    这个6.4就是根据设计稿的横向宽度640来确定的,假如你的设计稿是750

    那么 html.style.fontSize = windowWidth / 7.5 + 'px';

    (1)至此,font-size的基础值就确定好了,而且知道该font-size值是手机deviceWidth跟设计稿的比例值的100倍(重要)

    (2)那么页面元素该如何设置宽高、边距

      例如:一个设计稿宽高为140px的图标,左边距为50px,那么它的css应该这样写

    .icon {
        width: 1.4rem; /* 像素换算rem:140px / 100 = 1.4rem */
        height: 1.4rem;
        margin: 0 0 0 .5rem;
    }

    因为html的font-size是放大了100倍,所以计算rem时,要用设计稿的实际像素除以100,140px /100 =1.4rem; 最后实际的像素大小就会由deviceWidth跟设计稿的横向宽的比例自动计算出来。

     源自:http://blog.csdn.net/huang100qi/article/details/49886713

  • 相关阅读:
    使用控件的事件,动态创建控件
    C#委托和事件
    C# 静态类
    C# 饼形图
    (三)backbone
    (二)backbone
    (一)backbone
    (五)CodeMirror
    (二)CSS3应用
    (一)CSS3动画应用
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/6322584.html
Copyright © 2011-2022 走看看