响应式布局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
响应式布局rem的使用的更多相关文章
- 响应式布局rem、rem方法封装、移动端响应式布局
相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...
- 响应式布局-Rem的用法
前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...
- 移动端响应式布局+rem+calc()
1.媒体查询:@media only screen and (max-width: ) {},在最初做pc端时,使用各种媒体查询,因为pc的屏幕分辨率总共就几种,不嫌麻烦的重复使用类名.有很大的缺陷就 ...
- 移动端“响应式布局”’--rem
使用目的:为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,我们使用rem的像素单位. 方法一: 1.在页面引入js,获取屏幕大小,更新rem基准. (function () { var c ...
- 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 自适应布局,响应式布局以及rem,em区别
一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...
- rem字体响应式布局
引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...
- 理解rem实现响应式布局原理及js动态计算rem
前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...
随机推荐
- OA:办公自动化———笔记一
oa:办公自动化 1.对公司结构的管理 基础数据管理 部门进行管理 角色进行管理 权限进行管理 员工进行管理 2.流程管理 利用工作流技术对比较 ...
- 吴裕雄--天生自然PYTHON爬虫:使用Scrapy抓取股票行情
Scrapy框架它能够帮助提升爬虫的效率,从而更好地实现爬虫.Scrapy是一个为了抓取网页数据.提取结构性数据而编写的应用框架,该框架是封装的,包含request异步调度和处理.下载器(多线程的Do ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:为所有表格的单元格添加边框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 第1节 Scala基础语法:9、10、数组
1. 定义数组时,没有new和有new是有区别的: scala> val arr3 = Array[Int](2) 此时,arr3中仅包含1个元素2arr3: Array[Int] = A ...
- 【PAT甲级】1021 Deepest Root (25 分)(暴力,DFS)
题意: 输入一个正整数N(N<=10000),然后输入N-1条边,求使得这棵树深度最大的根节点,递增序输出.如果不是一棵树,输出这张图有几个部分. trick: 时间比较充裕数据可能也不是很极限 ...
- maven缺失ojdbc6解决方案 :Missing artifact com.oracle:ojdbc6:jar:11.2.0.1.0问题解决 ojdbc包pom.xml出错
问题已解决,感谢博主,给您磕头了. | | 解决方法就是把缺少的 jar 手动添加到本地仓库中,再重新引入依赖即可.详情请参考以下链接. | | 转发自: https://blog.csdn.net/ ...
- Day11 - L - 邂逅明下 HDU - 2897
当日遇到月,于是有了明.当我遇到了你,便成了侣.那天,日月相会,我见到了你.而且,大地失去了光辉,你我是否成侣?这注定是个凄美的故事.(以上是废话)小t和所有世俗的人们一样,期待那百年难遇的日食.驻足 ...
- mybatis注解中写SQL语句
参考: https://blog.csdn.net/gebitan505/article/details/54929287/https://blog.csdn.net/KingBoyWorld/art ...
- java基础面试题(转)
这里收集了一些java 面试题的链接: http://blog.csdn.net/jackfrued/article/details/44921941 原文来自:http://www.cnblogs. ...
- sql语句中,传入的参数带单引号的问题
今天在大批量操作数据时,遇到此问题,解决如下: if(cateName.indexOf("'")!=-1){ oql = " select * where name = ...