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. 从CR线下活动学到的：如何组织一个小的线下活动

    作者:朱克锋 邮箱:zhukefeng@iboxpay.com 转载请注明出处:http://blog.csdn.net/linux_zkf 周末在腾讯组织了GR,活动达到了预期的收获,从这次活动我主 ...

  2. SmartForms 小技巧

    1.添加空行,保证每一页有固定的打印的表格行数 上图,每页最多打印13行,数据只有11行,自动添加两个空行补齐 代码如下“ "定义变量: data: l_blank type i. &quo ...

  3. [置顶] [VS2010]逸雨清风 永久稳定音乐外链生成软件V0.1

    音乐外链说明:现在的很多网站都有用到外链,特别是音乐外链,在博客.空间里设作背景音乐.网上也有很多上传外链的网站,不过都不稳定而且有容量限制,而且似乎所有网站其实都是用的同一个源码组件,都是链接到Ra ...

  4. js 获取浏览器版本号

    1.在web开发中,会常常让你推断当前使用的是那个浏览器及浏览器的那个版本号,依据浏览器版本号来调整CSS的样式, 使在web界面在各个浏览器展现达到最佳的效果,以下是获取当前浏览器的代码: getB ...

  5. Add an IPv6 route through an interface

    Not often needed, sometimes in cases of dedicated point-to-point links. 7.4.1. Using "ip" ...

  6. hdu 2027 统计元音

    统计元音 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  7. SQL Developer 4.1.3

    http://www.oracle.com/technetwork/developer-tools/sql-developer/downloads/index.html SQL DeveloperDo ...

  8. php-fpm 的安装与LNMP测试

    1. 下载并安装PHP 1.1 编译安装 1.1.1 安装前的准备 下载并安装libmcrypt 和 libmcrypt-devel[root@test /opt/soft]# wget ftp:// ...

  9. struts2学生信息管理系统篇章①

    最近在看java1234分享的一个Struts2的学生信息管理系统的知识.因为本身java没什么底子.所以就没有什么好的技术去解决问题.一直在百度,不懂就百度.这样子下来其实也能学到一些东西,过阵子等 ...

  10. web开发学习之旅---html第一天

    一.认识浏览器 浏览器就是接收浏览着的操作,然后帮浏览者去web服务器请求网页内容(html格式返回),然后展现成人眼能够看得懂的可视化页面的软件. IE==浏览器?IE是浏览器的一种,还有Firef ...