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. Supervisor的安装与使用入门

    Supervisor是一个进程管理工具,官方的说法 自己开发的应用往往也希望做到随系统自动启动, 而且启动之后最好还能方便的控制其停止/重启. 传统的做法是在 /etc/init.d/ 下建立启动脚本 ...

  2. 20169210《Linux内核原理与分析》第十一周作业

    第17章 设备与模块 关于设备驱动和设备管理,讨论四种内核成分. 设备类型:在所有的linux系统中为了统一普遍设备的操作所分的类. 模块:Linux内核中用于按需加载和卸载目标码的机制. 内核对象: ...

  3. Lua 第一个应用程序 Hello World

    lua 开发环境的搭建 现已windows系统为例,演示一下lua环境的搭建. Lua_v5.1.4 下载地址 http://code.google.com/p/luaforwindows/ 点击&q ...

  4. IOS 'NSInternalInconsistencyException', reason: 'Invalid parameter not satisfying: URLString'

    转载自:http://i.cnblogs.com/EditPosts.aspx?postid=4012011 今天想写一个请求的天气,好的,废话不多说,先贴代码: 使用AFNetWorking 发送g ...

  5. [Javascript] Gradient Fills on the HTML5 Canvas

    window.onload = function() { var canvas = document.getElementById("canvas"), context = can ...

  6. Redis学习手册(开篇)

    一.简介: 在过去的几年中,NoSQL数据库一度成为高并发.海量数据存储解决方案的代名词,与之相应的产品也呈现出雨后春笋般的生机.然而在众多产品中能够脱颖而出的却屈指可数,如Redis.MongoDB ...

  7. Ubuntu jdk报Picked up JAVA_TOOL_OPTIONS信息解决

    下面是摘自http://www.cnblogs.com/coderbean/p/4522182.html 以下是我在网上找了好久找到的: Ubuntu jdk报Picked up JAVA_TOOL_ ...

  8. careercup-排序和查找 11.6

    11.6 给定M*N矩阵,每一行.每一列都按升序排序,请编写代码找出某元素. 类似leetcode:Search a 2D Matrix 但是与leetcode中这题不同的是下一行的第一个元素不一定大 ...

  9. “:Choose a destination with a supported architecture in order to run on this device.”

    我在编译从GitHub上clone下来的<TweeJump>时,出现如下错误:":Choose a destination with a supported architectu ...

  10. 网格GridLayout建立

    import java.awt.*;public class GridFlowout extends Frame { public GridFlowout (String str){ {setTitl ...