(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

移动端 html基值(转载)的更多相关文章

  1. 移动端网页宽度值(未加meta viewport标签)

    移动端网页宽度值(未加meta viewport标签): iphone:980px Galaxy(盖乐世):980px Nexus:980px blackberry(黑莓):980px LG:980p ...

  2. 移动端Web页面问题(转载)

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

  3. eclipse 中修改 M2_REPO的值--转载

    从eclipse中增加了maven2的插件之后,maven默认的本地库的路径是${user}/.m2/repository/下,一般windows用户的操作系统都安装在C盘,所以这个目录 下的jar包 ...

  4. 利用蒙特卡洛(Monte Carlo)方法计算π值[ 转载]

    部分转载自:https://blog.csdn.net/daniel960601/article/details/79121055 圆周率π是一个无理数,没有任何一个精确公式能够计算π值,π的计算只能 ...

  5. 移动端web开发技巧 -- 转载

    META相关 1. 添加到主屏后的标题(IOS)<meta name="apple-mobile-web-app-title" content="标题"& ...

  6. 关于服务端控件textbox的disabled属性设置为disabled后在服务端无法取值的问题

    在asp.net 1.x版本中,当textbox控件的disabled属性设置为disabled的时候看,在服务端还是可以通过控件id.text获取到textbox的值的,只是不能输入值而已.但是在以 ...

  7. C# Stream篇(—) -- Stream基类-----转载

    C# Stream篇(—) -- Stream基类 写在前头: Stream系列文章共收录7篇,本着备忘和归纳的目的本着备忘和归纳的目的,全部收录于本分类中. 下面是有原文连接,望各位看官还是到原作者 ...

  8. 解决:jquery ajax非首次请求Server端获取cookie值中文乱码问题

    HttpCookie cookie = new HttpCookie("RealName", HttpUtility.UrlEncode("你想要设置的值")) ...

  9. 关于socket阻塞与非阻塞情况下的recv、send、read、write返回值(转载)

    1.阻塞模式与非阻塞模式下recv的返回值各代表什么意思?有没有区别?(就我目前了解阻塞与非阻塞recv返回值没有区分,都是 <0:出错,=0:连接关闭,>0接收到数据大小,特别:返回值  ...

随机推荐

  1. Ubuntu 下常用的命令 简略记录

    # 动态显示 NVIDIA watch -n 1 nvidia-smi #查看某一目录下文件的总数(不包含子目录) ls -l | wc -l #挂载硬盘或者U盘 mount /dev/sdb1 /m ...

  2. spring自定义标签之 自我实现

     引言: 最近心情比较难以平静,周末的两天就跑出去散心了,西湖边上走走,看日落,还是不错的.回来博客上发现,在自定义标签上,最后一步实现忘记加上了.其实,人生的路程中,我们总是实现着自我的价值,让自己 ...

  3. PostgreSQL PARTITION 分区表

    PostgreSQL 分区表,操作性相当便捷. 但只能在创建时决定是否为分区表,并决定分区条件字段,普通表创建后,不能在修改为分区表. Note:通过其他方法也可转化为分区表. 和其他数据库一样,分区 ...

  4. 原创:微信小程序java实现AES解密并获取unionId

    来自:微信小程序联盟 如果大家使用小程序的同时还在使用公众号的话,可能会用到unionId这种功能,由于公司业务需要,我们需要使用unionId,具体使用方法,请参考微信开放平台的说明,但是在微信小程 ...

  5. Expression Blend实例中文教程(6) - 项目控件和用户交互控件快速入门

    前文我们曾经描述过,微软把Silverlight控件大致分为三类: 第一类: Layout Controls(布局控件) 第二类: Item Controls (项目控件) 第三类: User Int ...

  6. 简单的CRUD(一)

    一.JDBC的概述--(来源于百度) JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问, ...

  7. java导入excle表格,并且对表格进行相应的修改,并对表格数据进行整理,最后导出本地表格等一系列操作

    1.首先创建一个java项目 完成效果如下图所示 2.导入以下jar包 3.代码如下 其中行和列的操作是根据需求自动划分的 public class auto_date { private stati ...

  8. Redis实现主从复制(Master&Slave)

    由于前段时间公司项目比较赶,一直抽不出时间写博客,今天偷空写一篇吧.前面给大家讲解了单机版redis的基本操作,现在继续给大家讲解一下Redis的进阶部分,主从复制和读写分离. 一.Master&am ...

  9. springboot项目作为war包运行

    一.首先是pom文件中设置打成war包 < packaging>war< /packaging> 二.然后是修改依赖: <dependency> <group ...

  10. javaweb带属性的自定义标签

    带属性的自定义标签: 1.先在标签处理器中定义setter方法,建议把所有的属性类型都设置为String类型. package com.javaweb.tag; import java.io.IOEx ...