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. 【python自动化第九篇：进程，线程，协程】

    简要: paramiko模块 进程与线程 python GIL全局解释器锁 一.PARAMIKO模块 实现远程ssh执行命令 #!/usr/bin/env python # -*- coding:ut ...

  2. 【python自动化第八篇：网络编程】

    一.拾遗 动态导入模块 目的是为了在导入模块的过程中将模块以字符的格式导入. #!/usr/bin/env python # -*- coding:utf-8 -*- #Author:wanghui ...

  3. [置顶] 项目进阶 之 持续构建环境搭建（二）Nexus私服器

    上一篇博文项目进阶 之 持续构建环境搭建(一)架构中,我们大致讲解了一下本系列所搭建环境的基本框架,这次开始我们进入真正的环境搭建实战.重点不在于搭建的环境是否成功和完善,而是在搭建过程中充分认识到每 ...

  4. oracle 日期字段的处理

    a. oracle plsql 如何查询两个间隔日期之间的数据 1) 方法一:Select * from Tables where time >= to_date('2013-01-02 19: ...

  5. LIVE555研究之三:LIVE555基础

    LIVE555基础 LIVE555是为流媒体提供解决方式的跨平台C++开源项目.从今天起我们将正式開始深入LIVE555代码. 一.各库简要介绍 LIVE555下包括LiveMedia.UsageEn ...

  6. SpringMVC请求分发的简单实现

    简介     以前用了下SpringMVC感觉挺不错了,前段事件也简单了写了一些代码来实现了SpringMVC简单的请求分发功能,实现的主要思想如下: 将处理请求的类在系统启动的时候加载起来,相当于S ...

  7. Redis学习手册(实例代码)

    在之前的博客中已经非常详细的介绍了Redis的各种操作命令.运行机制和服务器初始化参数配置.本篇博客是该系列博客中的最后一篇,在这里将给出基于Redis客户端组件访问并操作Redis服务器的代码示例. ...

  8. careercup-递归和动态规划 9.3

    9.3 在数组A[0...n-1]中,有所谓的魔术索引,满足条件A[i]=i.给定一个有序整数数组,元素值给不相同,编写一个方法,在数组A中找出一个魔术索引,若存在的话. 进阶: 如果数组元素有重复值 ...

  9. gallery左右滑动时图片淡入淡出

    前几天,公司项目有一个功能要做成滑动图片的淡入淡出,要一边滑动一边改变,所以ViewFlipper左右滑动效果就不能了.网上找了很久,也找不到资料,所以自己写了一个,通过滑动改变imageView的透 ...

  10. Atom编辑器入门到精通(一) 安装及使用基础

    为什么选择使用Atom Atom是GitHub推出的一款编辑器,被称为21世纪的黑客编辑器,主要的特点是现代,易用,可定制.我之前用过多款编辑器,现在来总结一下个人对各编辑器的看法: Vim是我用的时 ...