移动端 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
移动端 html基值(转载)的更多相关文章
- 移动端网页宽度值(未加meta viewport标签)
移动端网页宽度值(未加meta viewport标签): iphone:980px Galaxy(盖乐世):980px Nexus:980px blackberry(黑莓):980px LG:980p ...
- 移动端Web页面问题(转载)
1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...
- eclipse 中修改 M2_REPO的值--转载
从eclipse中增加了maven2的插件之后,maven默认的本地库的路径是${user}/.m2/repository/下,一般windows用户的操作系统都安装在C盘,所以这个目录 下的jar包 ...
- 利用蒙特卡洛(Monte Carlo)方法计算π值[ 转载]
部分转载自:https://blog.csdn.net/daniel960601/article/details/79121055 圆周率π是一个无理数,没有任何一个精确公式能够计算π值,π的计算只能 ...
- 移动端web开发技巧 -- 转载
META相关 1. 添加到主屏后的标题(IOS)<meta name="apple-mobile-web-app-title" content="标题"& ...
- 关于服务端控件textbox的disabled属性设置为disabled后在服务端无法取值的问题
在asp.net 1.x版本中,当textbox控件的disabled属性设置为disabled的时候看,在服务端还是可以通过控件id.text获取到textbox的值的,只是不能输入值而已.但是在以 ...
- C# Stream篇(—) -- Stream基类-----转载
C# Stream篇(—) -- Stream基类 写在前头: Stream系列文章共收录7篇,本着备忘和归纳的目的本着备忘和归纳的目的,全部收录于本分类中. 下面是有原文连接,望各位看官还是到原作者 ...
- 解决:jquery ajax非首次请求Server端获取cookie值中文乱码问题
HttpCookie cookie = new HttpCookie("RealName", HttpUtility.UrlEncode("你想要设置的值")) ...
- 关于socket阻塞与非阻塞情况下的recv、send、read、write返回值(转载)
1.阻塞模式与非阻塞模式下recv的返回值各代表什么意思?有没有区别?(就我目前了解阻塞与非阻塞recv返回值没有区分,都是 <0:出错,=0:连接关闭,>0接收到数据大小,特别:返回值 ...
随机推荐
- poj 3750 小孩报数问题
小孩报数问题 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11527 Accepted: 5293 Descripti ...
- java.lang.NumberFormatException: For input string: "1" at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65) at java.lang.Integer.parseInt(Integer.java:580) at java.lang
java.lang.NumberFormatException: For input string: "1" at java.lang.NumberFormatException ...
- 记一次走心One 2 One沟通
聊的比较零零碎碎,内容比较散,有些solution不错,记一些要点吧(1)要学会汇报,就是坐你身边的人,也未必知道你在干啥 三个人都在砌墙.当人们分别问他们在做什么,他们的答案却不一样:第一个人头也没 ...
- 项目开发-->基础功能汇总
祭奠曾经逝去的青春…… 1.基础功能汇总-->身份认证及用户登录模块 2.基础功能汇总-->一键登录功能汇总 3.堆和栈 4.变量
- .NET MVC Scripts.Render 上下文不存在问题解决方法
要想使用 @Scripts.Render(),就要用到 BundleConfig.cs 这个类,在App_Start目录下新建一下这个类, 类的内容如下: 使用这个类需要引入 using System ...
- servlet开发(二)之servlet的线程安全问题
之所以考虑线程安全问题,是因为引入了多线程.多线程指的是这个程序(一个进程)运行时产生了不止一个线程.如果不考虑多线程的话,程序执行只有一条路径,就像人在敲代码的时候只能敲代码,不能戴上耳机听歌.引入 ...
- Java温故而知新(2)多线程详解
多线程指的是在单个程序中可以同时运行多个同的线程执行不同的任务.线程是程序内的顺序控制流,只能使用分配给序的资源和环境. 一.线程与进程的区别 多个进程的内部数据和状态都是完全独立的,而多线程 ...
- 四 Scatter/Gather
scatter/gather用于描述从Channel中读取或者写入到Channel的操作. 分散(scatter):从Channel中读取在读操作中将读取的数据写入多个Buffer中.因此,Chann ...
- hdu1385 最短路字典序
http://blog.csdn.net/ice_crazy/article/details/7785111 http://blog.csdn.net/shuangde800/article/deta ...
- docker容器启动时执行脚本 run /bin/bash执行多条指令
搜了很多资料发现并未解决,以下方法失败!求大神评论给出完美方案 1.首先需要编写需要启动的脚本,并将脚本放在 /etc/init.d/目录下 如:cs.sh 2.修改权限 3.chkconfig -- ...