响应式布局rem的使用

在如今移动端,响应式布局的时代,用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

转载于:https://www.cnblogs.com/ifworld/p/7763315.html

响应式布局rem的使用相关推荐

PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
响应式布局的常用解决方案对比(媒体查询.百分比.rem和vw/vh) px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应 px和视口在静态网页中,我们经常用像素( ...
CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
HTML响应式布局的实现以及其它布局介绍
概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案? Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计 ...
html pc vw过大,细说em/rem/vh/vw与响应式布局
细说em/rem/vh/vw与响应式布局一.em,rem的原理与应用场景 CSS单位中的长度单位分为:相对长度.绝对长度,如下表: 引用MDN上的两句话: em:在 font-size 中使用是相对 ...
vw 前端_一行css代码轻松实现前端响应式布局（vw+rem）
大家知道rem可以用来做响应式布局,只是html元素上的font-size样式需要根据屏幕宽度来指定. 之前有用@media媒体查询,根据各种屏幕宽度写html的样式,也用过类似lib-flexibl ...
html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！
一.前言根据前面写的你不知道的css单位,进行了一种响应式布局的思考. 视口布局的优点:宽度和高度全部自动适应!再加上rem布局的字体适应,可以完美解决各种屏幕适配问题! 单位可参考 : 你不知道 ...
响应式布局的常用解决方案(媒体查询、百分比、rem和vw/vh）
在前端开发过程中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询.百分比.rem.和vw /vh,本文主要分析px在移动端布局中的不足,以及几种不同的自适应解决方案一 ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...

响应式布局rem的使用

响应式布局rem的使用相关推荐

最新文章

热门文章