移动web开发之rem的使用

为什么要使用rem

  移动端设备尺寸五花八门,单纯使用px这个单位无法轻易适配,rem就可以为我们解决这个问题!

如何使用rem

  1rem默认等于16px,这是因为页面的默认字体大小就是16px。r 代表rootelement,因此只要修改html的font-size大小,就可以更改1rem的大小!

叮嘱UI设计师

  移动端的设计稿尺寸要做成640*750的!移动端的设计稿尺寸要做成640*750的!移动端的设计稿尺寸要做成640*750的!重要的事情说三遍!(640固定,高度可变)

当拿到图后

  一般人会人为将设计图按宽度方向分为若干份(不固定,好算即可),例如640宽的设计稿,分为20份,640/20 = 32,则32就作为设计稿中rem的单位,1rem就等于32px ,则在设计稿中量到一个宽度为100px的元素,实际项目就是 100/32 rem(就是将设计图中测量出来的尺寸转化为rem的值)

  因此,在不同的设备中我们只需要去动态设置html的font-size = 设备宽度 / 20 (20是刚刚你分的份数)

  以下代码直接在页面中写,而且要写在页面顶部,js要在页面打开时立刻执行!

  <script type="text/javascript">      // 根据屏幕的宽度 来设置 html的 font-size      // 计算 font-size      var fontSize = window.screen.availWidth / 20;      document.querySelector(‘html‘).style.fontSize = fontSize + ‘px‘;     //浏览器窗口被调整时执行      window.onresize = function () {          // 计算 font-size          var fontSize = window.screen.availWidth / 20;          document.querySelector(‘html‘).style.fontSize = fontSize + ‘px‘;      }  </script>

原文地址:https://www.cnblogs.com/didou/p/8657761.html

时间: 2024-10-12 18:24:51

移动web开发之rem的使用的相关文章

Web开发之RSET API

REST介绍 如果要说什么是REST的话,那最好先从Web(万维网)说起. 什么是Web呢?读者可以查看维基百科的词条(http://zh.wikipedia.org/zh-cn/Web),具体的我就不多说了.总之,Web是我们在互联网上最常用的服务,甚至在某些人的心中,互联网就是Web.当然,Web只是互联网的一部分而已,只是大家用的最多而已,我们访问的所有网站都是基于Web. 那么,Web和REST之间究竟有什么关系呢?我们接下来将聊聊组成Web的几大基础技术,URI(统一资源标识符,用来标

[Java Web] 3\WEB开发之HTML基础程序试手

1.初试: 1 <html> 2 <body> 3 <h1>My First Heading</h1> 4 <p>My first paragraph.</p> 5 </body> 6 </html> 2.标题: HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.显然由大标题变为小标题.... 1 <html> 2 <body> 3

【Go web开发之revel+mgo】第11章 部署到heroku上

演示地址  http://gblog-revel.herokuapp.com/ 1.申请mongohq 关于如何在注册heroku和mongohq帐号,我在之前的blog里面有说明,http://blog.csdn.net/joveth/article/details/19999535 这里简单的说一下,还记得我们的models/dao.go文件里的NewDao方法中被注释的那一行吗? session, err := mgo.Dial("mongodb://omind:[email protec

HTML5+JS手机web开发之jQuery Mobile初涉

一.起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好.因为,Android系统一套东西,iPhone又是新的一套,折腾死人呐. 于是总监发狠,让我把手上的活都交出去,专心折腾web版的,看看最后效果如何. 加上我觊觎手机上的开发学习很久了,于是,一拍即合,搞起了手机开发方面的学习. 分享是很好的提高自身学习的方法.因为分享过程中梳理了所学,往往会有些意想不到的心得与收获.如此利人利已的

web app开发之rem

CSS3新增了一个相对单位rem,官方的解释为“font size of the root element”,相对于根元素(html)的font size. rem,em,px单位的区别: rem单位和em单位都是相对大小,px是绝对大小.其区别在 1.em基于当前元素的(如果没设置就是继承其父元素的)font-size,这样会出现一些组合问题: 2.rem则是只相对于根元素的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可 默认没有对根元

web开发之Servlet 三

昨天我们学习了Servlet的运行过程和生命周期,那么今天我们学习下Servlet中非常重要的两个类:ServletConfig  ServletContext 我们可以看到,与顶层Servlet主动关联的是ServletConfig  ServletRequest ServletResponse ,它们通过容器传递给Servlet;其中Servlet初始化时候使用ServletConfig,另外两个是请求时调用传给Servlet. 一.ServletConfig 讲解 ServletConfi

web开发之Servlet 一

因为最近在研究公司一套新的框架,发现这套框架的底层是对Struts2,Spring 封装后的WEB应用框架,而我发现如果仅仅是利用这个框架开发,确实很容易快速上手,做业务来说是没有问题的,但我觉得如果只对上层如何去用熟悉是不行,必须要学习其底层是如何玩的,而任何一套WEB应用框架的开发,肯定都是基于Servlet 对象中各个方法的生命周期来进行的,因此对Servlet的研究是有必要,虽然以前学过,但是很多原理都遗忘了,为此决定重新学习一下. 本人的开发工具和环境是:Myeclipse + Tom

Web开发之MVC框架

什么是MVC框架? 在这里我简要的说明一下,想要详细的了解MVC的小伙伴们可以上百度百科,或者找来相应的书籍,仔细研究和理解一下,但是要说明的的一点是,完全理解MVC并不是一件容易的事. MVC的全称为Model View Controller,是模型-视图-控制器的缩写,一种软件框架模式,通俗点讲,就是将应用程序的输入.处理和输出进行解耦,使M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式. 简单来说一下MVC框架的三个核心部件的内容,即Model.View和Controller.

Java Web开发之Servlet、JSP基础

有好多年不搞Java Web开发了,这几天正好国庆放假,放松之余也有兴趣回头看看Java Web开发技术的基础. 我们都知道,Servlet是Java Web开发的重要基础,但是由于Servlet开发相对繁琐,代码量庞大而且不易维护,美工无法参与界面设计开发等不足,于是就诞生了jsp.jsp是对servlet开发模型的重要升级.有了jsp,Java Web开发技术才真正被广泛使用. 一.Servlet 在Java Web开发当中,新建一个类继承(派生)自HttpServlet类即可创建一个Ser