一、设计稿设计大小按照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">

手机端开发,基础设置1-body-fontsize的更多相关文章

  1. ThinkPHP3.2判断手机端访问并设置默认访问模块的方法

    ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法 目录结构 公共模块Common,Home模块,Mobile模块 配置Application/Common/Conf/config.p ...

  2. TP3.2.x判断手机端访问并设置默认访问模块的方法 - ThinkPHP框架

    手机端访问时调用Wap手机模块,实现在手机端访问时展示出手机网站,无需跳转域名首先我们在./Application/Common/Conf/ 目录下建立两个公共配置文件:config.php 和con ...

  3. 手机端开发icon的问题

    一般来说,手机端的图片能用字体(字体小的情况下)的话,效果更好,因为不受图片缩放的失真影响. 但是有时,用位图的话,图片材料要高清晰,用jpg的高质量. 另外,有彩图与灰度图的情况下,考虑使用css3 ...

  4. H5手机端开发问题汇总及解决方案

    前言 少侠,请留步,相见必是缘分,赠与你一部<踏坑秘籍> 扎马步 踏坑第一式 ios竖屏拍照上传,图片被旋转问题 解决方案 // 几个步骤 // 1.通过第三方插件exif-js获取到图片 ...

  5. 手机端viewport的设置规范

    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale ...

  6. vue 手机端开发 小商铺 添加购物车 以及结算 功能

    这个功能绕了我一天!!!            对 就是这个功能  一系列相关联的  四处相关联 现在加班 没时间更 过两天在更

  7. H5手机端开发问题及解决方案

    ios竖屏拍照上传,图片被旋转问题 1.通过第三方插件exif-js获取到图片的方向2.new一个FileReader对象,加载读取上传的图片3.在fileReader的onload函数中,得到的图片 ...

  8. 专注手机端前端界面开发的ui组件和js组合

    frozenui一款腾讯开发的简化版Bootstrap,只用于手机端 http://frozenui.github.io/ https://github.com/frozenui/frozenui z ...

  9. 手机端 设置html上font-size的值 使用rem

    在head标签上加入: (function() { var b = navigator.userAgent; ipad = b.match(/(iPad).*OS\s([\d_]+)/) ? true ...

随机推荐

  1. C# ComboBox绑定值问题

    使用这种方式始终绑定值有问题: cbxSchool.DataSource = schoolList; cbxSchool.DisplayMember = "school_name" ...

  2. Neo4j之坑

    10个月前,我开始用neo4j做cmdb. 初体验下去neo4j很美好. 但是一年中发现一些问题, 仅仅是个人的体验.经供参考 查询语言 如果接触过Neo4j,都会为Cypher的简单和易用感觉到惊叹 ...

  3. 下载华为交换机MIB参考文件并使用snmpwalk获取OID信息

    1.下载交换机MIB参考文件访问 https://support.huawei.com/enterprise/zh/index.html,搜索交换机型号 点击案例库,选择MIB参考 下载文件 打开文件 ...

  4. 「汇编」加深理解段地址*10H(*16)必须是16的倍数

    王爽的汇编语言,有这样一道题: 检测点2.2 (2)  有一数据存放在内存20000H单元中,现给定段地址为SA,若想用偏移地址寻到此单元.则SA应满足的条件是:最小为         , 最大为   ...

  5. leetcode题解-122买卖股票的最佳时期

    题目 leetcode题解-122.买卖股票的最佳时机:https://www.yanbinghu.com/2019/03/14/30893.html 题目详情 给定一个数组,它的第 i 个元素是一支 ...

  6. 你所不知道的ASP.NET Core MVC/WebApi基础系列(一)

    前言 最近发表的EF Core貌似有点多,可别误以为我只专攻EF Core哦,私下有时间也是一直在看ASP.NET Core的内容,所以后续会穿插讲EF Core和ASP.NET Core,别认为你会 ...

  7. 微信小程序-表单笔记2

    本地添加4张图片并显示至页面——组件位置.设置样式.列表渲染 Q.button是一张图片,需要实现点击这张图片后选择本地图片后显示至页面,不知道怎么让本地图片将button挤到右边  S.在wxml中 ...

  8. 五、Redis持久化配置

    转载:[https://www.cnblogs.com/xingzc/p/5988080.html] Redis提供的持久化机制(RDB和AOF) Redis提供的持久化机制 Redis是一种面向“k ...

  9. VUE如何实现切换页面时的过渡动画?

    最近再写页面的时候,感觉页面之间的切换有点生硬,所以查了一下文档看见了transition这个组建,很实用,故此在这里跟大家分享一下 --------------------------------- ...

  10. 正则化(Regularization)本质

    参考: http://www.cnblogs.com/maybe2030/p/9231231.html https://blog.csdn.net/wsj998689aa/article/detail ...