在如今移动端,响应式布局的时代,用rem作为单位已经是非常普及的一门小技巧了..
rem的单位根据html的font-size来进行换算!

1.rem的兼容性:

如下图所示IE9以上就支持了rem这个属性,你说IE6 7 8怎么办,怎么办?让IE去死呗,都H5了还兼容个蛋蛋.手机端就更不用说IE了

2.rem的介绍:

首先在不做任何设置的情况下1rem=16px;因为浏览器默认html的font-size为16px;那么如果用16px去进行换算,我们在书写css时候将会变得异常吃力...所以我们需要做的就是找一个换算相对简单的值.

3.rem的换算:

目前来看,很多前端大手子都喜欢上手就给html的font-size:62.5%或者是625%,什么意思?
font-size:62.5%就是16px(默认值)的百分之62.5
62.5%*16px的也就是10px...那么如此一来1rem就为10px,如果是625%,则1rem就为100px.
比如说现在设html的font-size为625%,我们需要在正常1200px以上的显示器中显示
容器一:宽度为325px,那么我们给这个容器的css为width:3.25rem;
容器二:宽度为130px,那么我们给这个容器的css为width:1.3rem;
那这样有什么好处..当然有好处,比如现在我们改变了设备大小
@media screen and (max-width:1200px){
code.....
}
如果说我们单位给的是px...我们需要给这2个容器分别重设px.但实际情况一个页面内至少有100个甚至1000个节点....那么我们现在有了rem这个属性,
我们只需要给html重新设置font-size那么一切全部解决..剩下的只需要一些微调!
比如现在显示器1200px时现在我们想让原来所有的容器宽度只有原来80%;我们只需要让html的font-size为625%*80%也就是500%..依次类推,这样即使是在小屏幕的手机端,我们大可以直接去改变font-size达到响应式的效果.

在老牛的博客中,正常情况我给的三大板块(热推,文章,更新)分别为2.2rem,7.8rem,1.94rem,也就是220px,780px以及194px如图;

之后再1220px时候我重新定义了一次font-size

此时3模块的宽度分别为190px,673px,167px~~

在ipad(1024px下)我设置font-size为464%,如图

在iphone6下我把左右2边直接去掉,中间模块为100%显示,如图


4.注意事项:
如果是制作pc与mb的响应式 换算请以625%来计算也就是1rem=100px,因为62.5%的换算会有误差,而且误差还不小!光做手机端的话问题不大!

原文链接:http://www.web-jackiee.com/a/xiangguanwebwenzhang/2016/0830/156.html

响应式布局rem的使用的更多相关文章

  1. 响应式布局rem、rem方法封装、移动端响应式布局

    相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...

  2. 响应式布局-Rem的用法

    前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动.   先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...

  3. 移动端响应式布局+rem+calc()

    1.媒体查询:@media only screen and (max-width: ) {},在最初做pc端时,使用各种媒体查询,因为pc的屏幕分辨率总共就几种,不嫌麻烦的重复使用类名.有很大的缺陷就 ...

  4. 移动端“响应式布局”’--rem

    使用目的:为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,我们使用rem的像素单位. 方法一: 1.在页面引入js,获取屏幕大小,更新rem基准. (function () { var c ...

  5. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  6. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  7. 自适应布局,响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  8. rem字体响应式布局

    引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...

  9. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

随机推荐

  1. 吴裕雄--天生自然ORACLE数据库学习笔记:优化SQL语句

    create or replace procedure trun_table(table_deleted in varchar2) as --创建一个存储过程,传入一个表示表名称的参数,实现清空指定的 ...

  2. Python流程控制-3 循环控制

    循环控制,就是让程序循环运行某一段代码直到满足退出的条件,才退出循环. Python用关键字for和while来进行循环控制,但是没有其它语言的do...while语句(在Java和PHP中都有do ...

  3. spring boot ApplicationRunner使用

    spring boot ApplicationRunner使用 它的使用比较简单,实现ApplicationRunner的run方法 package com.hikvision.pbg.jc.conf ...

  4. ES6 && ECMAScript2015 新特性

      ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES201 ...

  5. 「SDOI2009」HH的项链

    「SDOI2009」HH的项链 传送门 数据加强了,莫队跑不过了. 考虑用树状数组. 先把询问按右端点递增排序. 然后对于每一种贝壳,我们都用它最右一次出现的位置计算答案. 具体细节看代码吧. 参考代 ...

  6. Python 基础之返回值与函数使用与局部变量和全局变量locals() 和 globals()

    一.函数的返回值 return return: 自定义返回值,返回到哪里? 返回到函数的[调用处]1.return 后面可以跟上六个标准数据类型,除此之外,可以跟上 类对象,函数,如果不写return ...

  7. SpringMVC架构&组件&执行流程

    SpringMVC架构: 组件: DIspatcherServlet:前端控制器.相当于mvc模式的c,是整个流程控制的中心,负责调用其他组件处理用户的请求,降低了组件之间的耦合性. HandlerM ...

  8. HTML相关知识点(2)

     CSS: 字体: 网页默认字体16px; 网站通用字体大小14px 最小是12px,最大无限大 单位换算:1em=16px 选择器:标签选择器:选择页面中所有指定标签,权重为1 通配符选择器:选择所 ...

  9. kd-tree理论以及在PCL 中的代码的实现(转载)

    该文转自:https://www.cnblogs.com/li-yao7758258/p/6437440.html kd-tree理论以及在PCL 中的代码的实现   (小技巧记录:博客园编辑的网页界 ...

  10. 二、多线程基础-乐观锁_悲观锁_重入锁_读写锁_CAS无锁机制_自旋锁

    1.10乐观锁_悲观锁_重入锁_读写锁_CAS无锁机制_自旋锁1)乐观锁:就像它的名字一样,对于并发间操作产生的线程安全问题持乐观状态,乐观锁认为竞争不总是会发生,因此它不需要持有锁,将 比较-设置 ...