rem介绍

手机端开发,一般以320px宽为最低标题。市场上的手机,大多数是360px宽。

20px=1rem是最容易换算的,基本上可以口算,除以2并缩小十倍。1px/20=0.05rem。两位小数就可以除尽了。

结合媒体查询就是:

@media only screen and (min-width: 320px){
    html {
        font-size : 20px !important;
    }
}

当然了,你也可以选择js动态计算:

    var width = window.screen.width;
    document.getElementsByTagName("html")[0].style.fontSize = (width*0.0625) + "px";
时间: 2024-10-10 09:29:45

rem介绍的相关文章

移动端页面使用rem来做适配

rem介绍 rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位.假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如 1 html{ 2 font-size: 10px; 3 } 4 width: 2rem; /* 2*10 = 20px;*/ 5 margin: 1rem; 6 } 7 img{ 8 width:.6rem; 9 } rem来做适配 以前我们往往这样做页面:viewport width

px、em、rem区别介绍

px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). EM em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. EM特点 1. e

css3之rem的介绍

em的计算公式:1 ÷ 父元素的font-size × 需要转换的像素值 = em值 rem:是相对长度单位.相对于根元素(即html元素)font-size计算值的倍数 兼容性:IE9.0+:Firefox3.6+;chrome4.0+;safari5.0+;opera15.0+; IOS Safari4.1+;Android Browser2.1+;Android Chrome18.0+ 用法: 例子:html{font-size:12px} p{font-size:2rem} //p的fo

CSS3- px、em、rem区别介绍

PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). EM em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. EM特点 1. em的值并不是固定的: 2.

css总结5:px、em、rem区别介绍

PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. 浏览器无法调整px单位的字体,以em或rem为字体单位可调整字体. EM em是相对长度单位. EM特点 1. em的值并不是固定的: 2. 行高:n倍的 em = n *父级元素的像素px大小(若无则*浏览器的默认字体). REM rem是CSS3新增的一个相对单位(root em,根em),也是相对大小,相对的只是HTML根元素. p {font-size:14px; font-size:.

css中的px、em、rem 详解

概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等.通常1em=16px

我的VSTO之路(四):深入介绍Word开发

原文:我的VSTO之路(四):深入介绍Word开发 在上一篇文章中,我介绍了Word的对象模型和一些基本开发技巧.为了更好的介绍Word插件开发,我为本文制作了一个Word书签的增强版,具体功能是让用户在Word中选择一段文本,为它添加书签并其标志为高亮,同时用户可以为这段书签写注释,以后当用户点击这个书签时,我就会显示注释.以下是我录制的视频介绍: 这个插件将包括以下几个技术点: 添加右键菜单 添加右键菜单.控制右键菜单显示 WindowBeforeRightClick 事件 删除右键菜单 修

(淘宝无限适配)手机端rem布局详解

一.        首先我们先来看看淘宝不同分辨率下的适配页面 可以看出来,淘宝在不同的分辨率下,页面的尺寸和模块间的间距会发生变化,这是因为淘宝采用了rem,这篇文章会简单介绍淘宝的布局思路以及具体做法,不过在此之前我们先了解一些移动端的知识,以为更好的理解淘宝布局的方案,下面我们来看一些移动端的知识 二.了解一些移动端的知识viewport的<meta>标签用法 其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大 移动端开发中,通常我们都会采用<meta nam

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,