zoukankan      html  css  js  c++  java
  • 手机端开发,基础设置1-body-fontsize

    一、设计稿设计大小按照750设计。

    二、单位使用rem,相对于body  fontsize 相对大小计算。

    三、假设750下,body fontsize 为100,为了方便计算。

    四、通过设置当前设备的 fontsize值,赋予 rem,变值属性。

    rem.js:

    (function () {
       function changeRootFont() {
        var designWidth = 750, rem2px = 100;
        document.documentElement.style.fontsize =
        ((window.innerWidth / designWidth) * rem2px) + 'px';
        //iphone6: (375 / 750) * 100 + 'px';
       }
       changeRootFont();
       window.addEventListener('resize', changeRootFont,false);
    })();

    代码效果:

    假设现在的设备是iphone6,物理像素是750,逻辑像素为375(css像素)。

    那么iphone6的宽度为375px,(window.innerWidth / designWidth) * rem2px,使得body fontsize为50px。

    设计稿的100px,css书写为1rem,在iphone6上呈现的大小为 1*50=50px。进而实现浏览器端的自动缩放。

    逻辑像素:

    早期屏幕分辨率比较小逻辑像素等于物理像素,屏幕技术逐渐提升导致在相同物理宽度下1个像素点变的更小,导致12px视图效果太小。

    苹果公司首先在safri中增加了meta  viewport 标签,逐渐andriod厂商也增加了此参数。从而有了像素逻辑。

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  • 相关阅读:
    spring-boot 速成(6) 整合disconf
    spring-boot 速成(5) profile区分环境
    dubbox REST服务使用fastjson替换jackson
    resteasy经验谈
    spring-boot 速成(4) 自定义配置
    spring-boot 速成(3) actuator
    idea 高级调试技巧
    spring-boot 速成(2) devtools之热部署及LiveReload
    bash编程之xargs实用技巧
    spring-boot 速成(1) helloworld
  • 原文地址:https://www.cnblogs.com/lstrive/p/10044951.html
Copyright © 2011-2022 走看看