CSS3的REM设置字体大小

时间 2019-12-01

标签 css3 css rem 设置字体大小栏目 CSS 繁體版

原文原文链接

1.使用rem来设置Web页面的字体大小；css

2.rem是相对于根元素<html>；html

3.rem能等比例适配全部屏幕css3

4.在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，若是没有
设置，将是以“16px”为基准）；浏览器

咱们来看一个简单的代码实例：工具

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

上面的表格蓝色一列是Demo3中页面的尺寸，页面是以640的宽度去切的，怎么计算不一样宽度下font-site的值，你们看表格上面的数值变化应该能明白。字体

举个例子：384/640 = 0.6，384是640的0.6倍，因此384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不一样设备的宽度计算方式以此类推。ui

浏览器的兼容性:spa

rem是CSS3新引进来的一个度量单位;scala

支持的浏览器仍是蛮多的，好比：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和
Opera11+。3d

只是可怜的IE6-8没法兼容。

移动端字体单位font-size选择px仍是rem

对于只须要适配少部分手机设备，且分辨率对页面影响不大的，使用px便可

对于须要适配各类移动设备，使用rem，例如只须要适配iPhone和iPad等分辨率差异比较挺大的设备

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

rem的介绍很不足，补充以下：
一、IE9/IE10在用于伪元素时或者使用字体简写声明时不支持rem；
二、IOS Safari5.0-5.1虽然支持rem，可是在使用媒体查询时不支持rem。

一个例子：

p {font-size:14px; font-size:.875rem;}

注意：

选择使用什么字体单位主要由你的项目来决定，若是你的用户群都使用最新版的浏览器，那推荐使用rem，若是要考虑兼容性，那就使用px,或者二者同时使用。

在这里为你们提供一个px,em,rem单位转换工具

地址：http://pxtoem.com/

原连接：https://www.w3cplus.com/css3/define-font-size-with-css3-rem

http://www.tuicool.com/articles/IzuEzuq

http://www.qdfuns.com/notes/19478/6ccc9300876e9347dcbd8ae40e64a939.html