在最近的开发和之前的的使用中,我们一般面对需要适应多端的项目或者需要移动端多设备的适应,都可能会引入rem,em这样的单位。

如果你要着手一个以上类似的项目,我们也同样建议使用rem或者干脆引入框架,等到你分析框架时,

你会发现,有些成熟的框架也是借助rem来解决不同的屏幕大小带来的适应问题。

接下来我们就简单的阐述一下我最近在项目中如何使用rem:

首先我们要明确,为什么要使用rem,那我们要先从rem开始介绍。

什么是 rem?

我们从css中可以得到对它最精简的介绍翻译:

rem是相对长度单位。相对于根元素(即html元素) font-size 计算值的倍数

从上面的通用介绍里我们已经知道了rem到底是什么东西了,然后我们应该如何借助它的力量呢?

既然他可以跟随根元素相对变化,那也就是说如果我们能够让根元素的font-size动态变化,

就能够实现,使用一套大小,实现多端多设备的单位长度的适应问题。

那这个rem的使用会转化为一个如何让根元素的font-size动态变化问题。拿我最近在用的一套比例来说明。

/*dpi*/
/* for 1080+ px width screen */
/* for 1080 px width screen */
/* for 800 px width screen */
/* for 800 px width screen */
@media only screen and (min-width: 751px) { html, body { font-size: 31.25px; } }
/* for 800 px width screen */
@media only screen and (max-width: 750px) { html, body { font-size: 31.25px; } }
/* for 720 px width screen */
@media only screen and (max-width: 720px) { html, body { font-size: 30px; } }
/* for 640 px width screen */
@media only screen and (max-width: 640px) { html, body { font-size: 27px; } }
/* for 540 px width screen */
@media only screen and (max-width: 540px) { html, body { font-size: 22.5px; } }
/* for 480 px width screen */
@media only screen and (max-width: 480px) { html, body { font-size: 20px; } }
/* for 450 px width screen */
@media only screen and (max-width: 450px) { html, body { font-size: 18.9px; } }
/* for 414 px width screen */
@media only screen and (max-width: 414px) { html, body { font-size: 17.25px; } }
/* for 375 px width screen */
@media only screen and (max-width: 375px) { html, body { font-size: 15.625px; } }
/* for 320 px width screen */
@media only screen and (max-width: 320px) { html, body { font-size: 13.5px; } }

以上就是一个较为全面的fontSize的动态变化案例了,其中800px以上屏幕可再细致划分,只要你懂这套媒体查询代码的原理即可。

如果说看到这里,你对媒体查询有些困惑,那我猜你一定连Bootstrap都没有用过,或者你只知道如何用,却从来没有分析过她的原理。

我们可以利用接下来的几分钟简单的介绍下媒体查询。

接下来我来引用一段菜鸟教程里的解释:

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

其实看到这里对于这个概念还是不明确,并且媒体查询中包含很多关键字,那我们常用的有 and not only

only关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式

and关键字用于合并多个媒体属性或合并媒体属性与媒体类型

not关键字应用于整个媒体查询,在媒体查询为假时返回真

举个简单的例子:

/*媒体查询支持最大宽度为320px应用以下CSS html body 的fontsize设置为13.5px*/
@media only screen and (max-width: 320px) { html, body { font-size: 13.5px; } }

其中max 或者 min 代表了最小 或者 最大的概念

利用几个关键字我们可以轻松的自定义出来我们所需要的媒体查询条件

以上就是今天的rem实现适应多端的方法之一

ps:其实现在讲这个的非常多,我就是来大姨妈太痛苦了,实在是想不到该干啥,

就随便写点分分心,我要疼死了,现在好多了,emmmm下次见,还有下次的话

资料查询:

http://www.runoob.com/cssref/css3-pr-mediaquery.html

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

WEB前端中rem单位的应用(一)的更多相关文章

  1. web前端中实现多标签页切换的效果

    在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...

  2. web前端中navigator

    <script> if(navigator.cookieEnabled){ document.write("浏览器已启用cookie,请妥善保存个人信息"); }els ...

  3. 关于web前端中遇到的html,css小知识点

    容器溢出: 语法:overflow: visible | hidden | scroll | auto | inherit; visible:默认值,溢出内容不会被裁剪,正常显示 hidden: 溢出 ...

  4. web前端中的一些注释表达法

    1.HTML注释 <!--注释的内容--> 注释的地方(根据个人习惯可能有所不同): 结束标签的后面,这一切都是为了程序在嵌套的时候更加方便.明了,如: <div class=&qu ...

  5. Web前端的学习介绍(截止今天还有Bootstrap没有学,要腾点时间解决掉)

    Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...

  6. 独家分享——大牛教你如何学习Web前端开发

    2014-12-18 14:35:42     引语 自从2008年接触网站开发以来到现在已经有六个年头了,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上 ...

  7. web前端的学习误区

    web前端的学习误区  网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...

  8. (纯干货)最新WEB前端学习路线汇总初学者必看

    Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...

  9. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

随机推荐

  1. docker 报错:x509: certificate has expired or is not yet valid

    环境:centos 7 程序:docker 下载镜像报错: # docker pull centos Pulling repository centos FATA[0004] Get https:// ...

  2. 【国家集训队2010】小Z的袜子[莫队算法]

    [莫队算法][国家集训队2010]小Z的袜子 Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程, ...

  3. 华为云照片的爬虫程序更新(python3.6)

    一.背景: 每年终都有一个习惯,就是整理资料进行归档,结果发现手机照片全备份在华为云里,在官网上找了一圈,没找到官方的pc工具用来同步照片. 于是找出上次写的程序,看看能不能爬到数据,然而……果然不好 ...

  4. SpringMvc文件资源防止被外链链接

    /** * 文件下载防止文件被别的网站引用 * 直接访问会访问不了 * @Description: * @param type * 文件后缀名 * @param fileName * 文件名 * @p ...

  5. MySQL的常见存储引擎介绍与参数设置调优

    MySQL常用存储引擎之MyISAM 特性: 1.并发性与锁级别 2.表损坏修复 check table tablename repair table tablename 3.MyISAM表支持的索引 ...

  6. GCD实现倒计时

    之前面试中,好多面试官,问使用GCD如何实现倒计时,我当时也没写过,所以一时不知道怎么说,所以结束之后,我实现一下GCD的倒计时. - (void)startTime:(UIButton *)send ...

  7. Angular @HostBinding()和@HostListener()用法

    @HostBinding()和@HostListener()在自定义指令时非常有用.@HostBinding()可以为指令的宿主元素添加类.样式.属性等,而@HostListener()可以监听宿主元 ...

  8. nyoj886 取石子(八) 威佐夫博弈

    好累,坐了一天火车, 终于到学校了. 思路:仔细观察威佐夫博弈,发现P态的所有数字都是不重复的,例如(0,0).(1,2).(3,5).(4,7).(6, 10).(8,13).(9,15).(11, ...

  9. python高阶函数式编程

    from functools import reduce def str2int(s): def fn(x, y): return x * 10 + y def char2num(s): return ...

  10. php5.3命名空间内使用 php内置类的时候

    在命名空间内使用内置类库的时候,需要使用 \ 比如 $zip =new \ZipArchive;