移动端 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

时间: 2024-12-19 08:10:56

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

线程基类 转载滴,收藏一下

转载请注明出处.http://www.cnblogs.com/zetee/p/3486993.html 多线程这个概念大家都很熟悉,对于winform的开发人员来说.用的还是多的.但估计都是用Timer,或者backgroundWorker. 你是否曾经想过,写一个基类,然后....一用到多线程的时候,就马上能用上呢. 没错,福利来了,这面我为大家写了多线程的一个基类.只有你用到多线程,下面的代码肯定能帮到你很多忙 /// <summary> /// 下载线程对了. /// </summ

eclipse 中修改 M2_REPO的值--转载

从eclipse中增加了maven2的插件之后,maven默认的本地库的路径是${user}/.m2/repository/下,一般windows用户的操作系统都安装在C盘,所以这个目录 下的jar包比较危险.我尝试从myeclipse->preferences->java->build path->classpath variables中查找M2_REPO这个变量,发现其路径指向的是“C:/Documents and Settings/lvxda/.m2/repository/”

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

1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了480320,这样devicePixelRatio=2.现在android比较乱,有1.5的,有2的也有3的. 想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍).

position的四个属性值(转载)

本文转载自http://www.cnblogs.com/chinafine/articles/1765967.html(这里只是为了方便本人  查找 复习 学习 进行转载) position的四个属性值: relative ,absolute ,fixed,static  下面分别讲述这四个属性,以简单代码表示 <div id="parent">     <div id="sub1">sub1</id>     <div i

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

META相关 1. 添加到主屏后的标题(IOS)<meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) <meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-touch-fullscreen&q

c++函数参数类型-引用、指针、值 [转载]

在编写个人函数的时候,你将会受到C++中的一条基本的原则的限制:在默认的情况下,变量只能以值传递的方式传递给函数.这句话的意思是:被传递到函数的只是变量的值,永远不是变量的本身. 例如: [cpp] view plaincopyprint? void changeVar(int myVar,int newValue) { myVar=newValue; } int main(){ int myNum=20; changeVar(myNum,90); std::cout<<myNum<&l

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

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

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

1.阻塞模式与非阻塞模式下recv的返回值各代表什么意思?有没有区别?(就我目前了解阻塞与非阻塞recv返回值没有区分,都是 <0:出错,=0:连接关闭,>0接收到数据大小,特别:返回值 <0时并且(errno == EINTR || errno == EWOULDBLOCK || errno == EAGAIN)的情况下认为连接是正常的,继续接收.只是阻塞模式下recv会阻塞着接收数据,非阻塞模式下如果没有数据会返回,不会阻塞着读,因此需要 循环读取 2.阻塞模式与非阻塞模式下writ

Servlet中获取客服端Ip地址(转载)

在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的. 但是在通过了 Apache,Squid等反向代理软件就不能获取到客户端的真实IP地址了.如果使用了反向代理软件, 用 request.getRemoteAddr()方法获取的IP地址是:127.0.0.1或 192.168.1.110,而并不是客户端的真实IP /** * 获取Ip地址 * @return */ protected String getIpAddr() {