html:62.5%//10px
body:1.4rem;//14px
...

<!doctype html>

<html>

<head>

    <title>aaa</title>

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

    <meta http-equiv="Pragma" content="no-cache" />

    <meta http-equiv="Expires" content="0" />

    <style type="text/css">

        html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

        body {font-size: 1.4rem;/*1.4 × 10px = 14px */}

        p.bb {

                font-size: 1.5rem;/*1.5 × 10px = 15px*/

                line-height:2em;/*基于字体大小的两倍高度 2*15=30px**/

             }

        p.aa { font-size: 15px;/*15px*/}

    </style>

</head>

<body>

你好啊

<p class="bb">你好啊nnn</p>

<p class="aa">你好啊nnn</p>

</body>

</html>

font-size rem 相比10px

line-height:2em 相比当前元素字体高度2倍

响应式页面字体用什么单位：rem的更多相关文章

  1. python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  2. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  3. 20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用 ...

  4. html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计

    序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度 ...

  5. css考核点整理（十一）-响应式开发经验，响应式页面的三种核心技术是什么

    响应式开发经验,响应式页面的三种核心技术是什么

  6. css考核点整理（十）-响应式开发经验，响应式页面的三种核心技术是什么

    响应式开发经验,响应式页面的三种核心技术是什么

  7. Response.Write()方法响应导致页面字体变大的解决办法

    关于ASP.NET中用Response.Write()方法响应导致页面字体变大的解决办法     最近研究了ASP.NET,发现一个问题,比方说在页面里面有个Button,要点击以后要打开新窗口,而且 ...

  8. 响应式页面-@media介绍

    01 响应式页面-@media介绍,   我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话 ...

  9. HTML5入门教程：响应式页面布局

    摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...

随机推荐

  1. dubbo使用方法

    dubbo使用方法. Dubbo采用全Spring配置方式,透明化接入应用,对应用没有任何API侵入,只需用Spring加载Dubbo的配置即可,Dubbo基于Spring的Schema扩展进行加载. ...

  2. [欧拉] poj 2230 Watchcow

    主题链接: http://poj.org/problem? id=2230 Watchcow Time Limit: 3000MS   Memory Limit: 65536K Total Submi ...

  3. select组件2

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. 移动平台作业——天气预报——天气数据的获得——为应用申请百度ak码

    需求: 可切换城市 可实时更新(按钮或手势或下拉刷新) 可现实未来三日的天气 不限制横屏或者竖屏,不限制布局样式,但要求得到的数据均需显示(北京.天气数据.天气图标) 提示: 获得实时天气数据(任选一 ...

  5. Java项目依赖的配置过程

    我们经常需要把大项目分解成多个小项目,然后使用依赖方式,将其他必须的依赖项目引用到项目中.最常用的方式是希望被依赖的项目能够自动被打包成jar文件,自动部署到依赖的项目中.同时被依赖项目修改后,能够同 ...

  6. GridView中使用如下button OnClientClick代码会出现解析错误

    在GridView中使用如下代码会出现解析错误: <asp:LinkButton ID="DeleteButton" runat="server" Cau ...

  7. 鼠标移动到表格的TD上的时候显示成一个手型的样子怎么做?

    在除了IE6的情况下,可以通过CSS的:hover伪类来实现: 假如你想设定的固定区域为: <div id="test"></div>,那么只需要在CSS样 ...

  8. StringBuffer跟StringBuilder以及HashMap跟HashTable

    StringBuffer是线程安全的 HashTable是线程安全的,但HashMao单线程程序中的性能比HashTable要高,对了HashTable用(add),HashMap用的(put)

  9. Android网络对讲机的实现

    上个星期公司给出了一个项目需求,做一个基于socket通讯协议的网络对讲机.于是在项目开始前计划了一下基本的实现流程. 1.从手机麦中采集音频数据:2.将PCM音频数据编码压缩:3.将压缩好的音频通过 ...

  10. MathType需要安装一个较新版本的MT Extra(True type)字体[转]

    MathType 6.0中MT Extra(TrueType)字体问题在打开MathType6.0时,有时会提示MathType需要安装一个较新版本的MT Extra(TrueType)字体,这是因为 ...