rem的用法

rem 是css3中的属性,ie8下不兼容。
rem是相对于根元素<html>  这就意味着我们只需要在 根目录加入以下css代码。 默认单位为16px,我们需要在用rem的时候除以16  就是rem的值。  比如字体是20px,

20÷16 = 1.25rem即可。

@media only screen and (max-width: 320px) {
    html {
        font-size: 16px;
    }
}

@media only screen and (min-width: 321px) and (max-width: 360px) {
    html {
        font-size: 18px;
    }
}

@media only screen and (min-width: 361px) and (max-width: 375px) {
    html {
        font-size: 18.75px;
    }
}
@media only screen and (min-width: 376px) and (max-width: 384px) {
    html {
        font-size: 19px;
    }
}

@media only screen and (min-width: 385px) and (max-width: 413px) {
    html {
        font-size: 19px;
    }
}

@media only screen and (min-width: 414px) and (max-width: 480px) {
    html {
        font-size: 20.7px;
    }
}

@media only screen and (min-width: 481px) and (max-width: 540px) {
    html {
        font-size: 27px;
    }
}

推荐前端交流群: 群号:339840649; 群名称:html5/css3/js/jq/nodejs/div 欢迎加入~
点击加入:

扫码加入:

时间: 2024-11-08 19:13:22

rem的用法的相关文章

响应式布局-Rem的用法

响应式布局-Rem的用法 前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷. 同样的,响应式的设计应该秉承「内容优先,移动优先」的设计原则,那么我们知道网页中的内容主要是由文字图片等元素组成的,那么文字该如何响应式呢? 当我们每天面对缤纷的互联网世界的时候,文字不仅

页面适配之pt、px、em、rem的用法

我们在开发页面时,会遇到pt.px.em.rem这四种单位.下面介绍一下这四个单位. 1.pt,英文为points,绝对长度单位,意为磅.设计软件zeplin所用的单位就是pt.现在很少使用这个单位了. 2.px,英文为pixel,相对长度单位,意为像素.是相对于屏幕分辨率的单位,国内主流单位. 3.em,相对长度单位,相对于当前对象内文本的字体尺寸,即em的计算是基于父级元素font-size的.比如: <body style="font-size:14px"> <

移动端rem单位用法[转]

标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算.二者都是相对单位 2.我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法, 例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法, 例如流式布局

转载:rem的用法

本文属于转载,为尊重原作者的劳动成果,在此标注原文地址,点击此处浏览. 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算.二者都是相对单位 2.我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通

移动端rem单位用法

1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算.二者都是相对单位 2.我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法, 例如流式布局的解决方案

移动端rem的用法

标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算.二者都是相对单位 2.我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法, 例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法, 例如流式布局

浅谈移动端rem的用法

一 什么是rem? “font size of the root element 这是w3c的定义 也就是说是相对于根节点(html节点)的字体大小的单位. 目前主流的浏览器基本都支持rem这个单位,大部份的默认字体单位是16px. 图片摘自 http://caniuse.mojijs.com/Home/Html/item/key/rem/index.html  二 简单应用. 既然确定在各个主流浏览器都能食用的话,我们就放心大胆在移动端进行开发了. 举个例子说明 html{ font-size

css3 rem的用法

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一

css中字体单位px,pt,em ,rem,百分比之间的区别和用法

css中字体单位px,pt,em ,rem,百分比之间的区别和用法 px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了 转换公式: pt=px乘以3/4 倍数em=倍数x16px 注意:1em=16px.那么12px=0.75em,10px=0.625em.   1.em的用法 在代码重写的过程中