在面对丰富尺寸的移动端时，Iphone、安卓各种屏幕分辨率，智能手机品牌、机型如此众多的今天，各种不规则的分辨率，即使作为专业团队的我们切版网，也很难寻找到所有的真机一一去测试。

无论我怎么去调试，都会有比例上的不一样的问题。这就会导致不能很好的还原设计。

解决办法当然是有的，那就是使用REM！

首先让我们带您一起理解一下rem

rem是CSS3新增的一个相对单位(root em，根em)，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

在iphone6上，我们设置了20px=1rem，但是在iphone4上，同样的1rem，就不应该是20px，而是应该大约17px(为(320/375)*20),这样才可以保证对应的1rem和原来的效果相似，否则，在iphone4就变得很大了。所以，在iphone4上我们要修改html的font-size=17px，可是还有Iphone5，iphone6 plus,还有无数的安卓机型呢？！

下面给大家详细介绍一下这两种方法：

第一种是使用媒体查询控制不同分辨率下的根原素大小。方法如下图，要根据项目的实际类型改变媒体查询的值。

第二种方法就是通过JavaScript动态获取屏幕的宽度，然后给HTML设置font-size的值。下面我给大家讲解一下这段JS代码。我主要以手机端为例。

将这做代码打包到一个defineRemSize.js的文件中，在页面里引用。在用下面这这个方法调用。

做完了这这些，我们有了可以自适应的rem的值，接下来我就说一下在实际使用中的一些心得。

Rem不仅可以用在字体大小单，包括容器宽度的值、高度的值、margin的值、padding的值都可以使用rem做为单位大小。实际上rem更像是聪明的百分比数值。如果页面所有远素的值都使用rem，整个面更像是一张图片。缩小时整体都会缩小，放大里整体都会放大。下面我给大家看一下我使用两种方法做的同一个页面的效果图。

能过对比，会发现，使用rem在不同分辨率的设备上整体比例是不变的。并且没有使用任何媒体查询方法。但是使用px+%这种方法做出来的页面，在不同的页面上的元素的间距会发生改变，图片会随首设备宽度的变化而变化，但是文字大小以及元素的间距并没有发生变化。

由以上可以得出，在使用rem做为页面元素单位时，在适配时会更加简便，并且页面在不同尺寸的终端设备上页面整体比例不会改变。不需要我们再通过Media query 来适配不同的分辨率。并且做出来的页面会更加的接近设计图。

h5、响应式切图，找切版网( www.qieban.cn )，是国内较早专注网页切图服务的团体，由人均3年的前端开发者构成，坚持以高性价比的服务为宗旨，普通页平均80一页，拥有超过200多客户建立至今。超过1500多个项目。长期致力于致力于h5、响应式前端外包服务整体解决方案。

rem 前端字体_移动端前端开发不可不知的——rem相关推荐

  1. rem 前端字体_响应式网页设计:rem设置网页字体大小自适应

    首先简单科普一下什么是响应式网页.响应式网页是指会根据输出设备的分辨率不同,而自动调整布局的网页.同时,在输出设备分辨率改变时,也能及时自动调整.说穿了,就是三个字:自适应. 响应式网页不仅仅是响应不 ...

  2. rem 前端字体_前端浏览器字体小于12px的解决办法

    前言 最近做项目时,UI设计的字体10px,看效果图时发现字体仍然蛮大,改变12px时字体还是那么大,改变到14px时,字体变大了,发现规律,才知道原来浏览器为了让用户字体看的清楚,最小设置为12px ...

  3. 个人博客前端模板_腾讯前端开发工程师，教你极速搭建一个个人博客网站

    作者: bookerzhao,腾讯 CSIG web前端开发工程师 Github 为开源项目提供了用于静态页面展示的 Pages 服务,很多开发者都在上面托管了自己的静态网站和博客,不少开源项目的案例 ...

  4. 小程序前端性能测试_如何提高前端应用程序的性能

    小程序前端性能测试 If your website takes longer than 3 seconds to load, you could already be losing nearly ha ...

  5. java前端目录_[Java教程]前端那点事儿——Tocify自动生成文档目录

    [Java教程]前端那点事儿--Tocify自动生成文档目录 0 2016-06-29 22:00:07 今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置:窗口滑动也能自动更新目 ...

  6. python怎么和前端连接_如何将前端HTML/JQuery连接到后端Python

    我有一个用HTML编写的web页面,操作是使用JQuery完成的.下面的html代码没有使用任何JQuery,但是我想我应该提到这一点,因为我可能需要在其中添加一些AJAX.在 这是"前端& ...

  7. 电脑端京东的我的订单html+css页面_什么是前端和后端开发？写给即将迈入前端开发领域的朋友...

    引言 不太清楚前端和后端是什么意思? 您是否想学习更多关于编程技术的知识,但又不确定从哪里开始?一个好的开始是了解前端开发和后端开发之间的区别. 一些专业的技术术语可能会令人困惑. 但请不用担心,我们 ...

  8. jpanel网格布局添加滚动条_啥是前端开发工程师必会的5种网页布局方式？

    作为前端开发工程师,布局方式有多种,针对不同的情况有不一样的处理,但是很多初学的同学都不知道这些情况,那么我们今天就来说说,那些前端开发工程师不可不知的5种布局方式! 一.静态布局(static la ...

  9. Web前端——移动端页面开发

    Web前端笔记 第五部分:移动端页面开发 1. 移动端与PC端页面布局区别 视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大, 宽度可能是980px或者1024px,目的是为了显示 ...

  10. 蓝旭前端开发：GITtomcat+nginx原理移动端web 开发

    蓝旭前端开发:GIT+移动端 web 开发 目录 一.==GIT== 1.1 ==Git与GitHub== 1.2 ==GitHub注册和Git的下载安装== 二.==Git的使用== 2.1 ==本 ...

最新文章

  1. aspose-cells 表合并
  2. java反编译工具_Android APP 取证之逆向工具篇
  3. java web ftp上传_java web FTPClient实现上传文件到指定服务器
  4. 《像计算机科学家一样思考Python》pdf
  5. iso 绝对pe_深度 WinPE 4.2 维护光盘ISO（含U盘PE制作工具） 下载地址
  6. java date 没有毫秒,java – SimpleDateFormat没有正确解析毫秒
  7. FAQ:The field file exceeds its maximum permitted size of 1048576 bytes.
  8. 许晓斌_Maven实战（一）——坐标规划
  9. #梆梆安全杯#个人对APP安全的一些看法
  10. python实现定时任务的8种方式详解
  11. java生成指定范围的随机数（太屌了）
  12. 使用SQL语句向表中插入多行数据
  13. CAS . . . .
  14. 色彩的全方位运用-张聪-专题视频课程
  15. 数据库里面date类型时间有时差，时区问题
  16. 让你一分钟认识电子身份验证系统EID
  17. Google将Linux客户端研发的主力放到中国
  18. 【问题解决】OpenWrt报错nf_conntrack: automatic helper assignment is deprecated and it will be removed soon.
  19. lista=['a','abc','d','abc','fgi','abf']，寻找列表中出现次数最多的第一个 字母，出现了几次
  20. .Net Framework OleDb 数据提供程序要求 Microsoft Data Access Components(MDAC) 2.6 或更高版本。发现当前安装的版本是 2.50.4403.

热门文章

  1. 敲笨钟(古诗词押 ong 韵)
  2. word导航窗显示二级目录
  3. 用大白话谈谈XSS与CSRF
  4. 寒假训练营第一天（学会CB）：D - Unimodal Array
  5. 「案例」让房东在 Airbnb 上展示他们的热情好客
  6. Poi Excel 设置列宽计算公式
  7. 托业阅读时间怎么安排【zhasite】
  8. 平面方程(Plane Equation)求解方法
  9. excel文件被写保护怎么解除_实用解除常用文件word、excel的写保护
  10. 他捧红了王菲、张学友等近百个巨星，却甘心成为最普通的学佛人…