1. html:62.5%//10px
    body:1.4rem;//14px
    ...
  2.  
  3. <!doctype html>
  4. <html>
  5. <head>
  6.     <title>aaa</title>
  7.     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  8.     <meta http-equiv="Pragma" content="no-cache" />
  9.     <meta http-equiv="Expires" content="0" />
  10.     <style type="text/css">
  11.         html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
  12.         body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
  13.         p.bb {
  14.                 font-size: 1.5rem;/*1.5 × 10px = 15px*/
  15.                 line-height:2em;/*基于字体大小的两倍高度 2*15=30px**/
  16.              }
  17.         p.aa { font-size: 15px;/*15px*/}
  18.     </style>
  19. </head>
  20. <body>
  21. 你好啊
  22. <p class="bb">你好啊nnn</p>
  23. <p class="aa">你好啊nnn</p>
  24. </body>
  25. </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. linux学习之八---Linux进程基础知识

    一.linux进程 linux是一个多用户多任务的操作系统. 多用户是指多个用户能够在同一时间使用计算机. 多任务是指linux能够同一时候运行几个任务. 进程简单来说就是执行中的程序,Linux系统 ...

  2. 秋叶PPT-三分钟教程

    http://yuedu.baidu.com/ebook/0596e5f858f5f61fb73666be <说服力-让你的PPT会说话>原创PPT分享 http://www.docin. ...

  3. Windows 自己主动关机命令 shuntdown

    以下介绍一个在Windows XP下实现定时关机的简单方法. 一 .倒计时关机:      指定系统在10分钟后自己主动关闭:点击“開始→执行”,输入命令“Shutdown -s -t 60”(注意: ...

  4. c# 可以有多个Main（）函数

    可以有多个Main()函数,这样写:namespace ConsoleApp1{class Program{static void Main(string[] args){Console.WriteL ...

  5. centos 6.3安装mono和monoDevelop过程

    Mono官方网站:http://www.mono-project.com MonoDevelop官方网站:http://monodevelop.com/ 注:整个安装过程最好在同一个终端下完成! 1. ...

  6. Android 开发第二天

    开发入门HelloWorld 首先打开开发工具 第一步 第二步 效果图 以后可以点击一直下去 第三步骤介绍一下里面项目的作用 SRC是用来保存源代码的东西MainAcrivity.java主视图res ...

  7. the assignment of reading paper

    在 IEEE 上找到Increasing Dependability of Component-based Software Systems by Online Failure Prediction, ...

  8. [翻译]Python with 语句

    With语句是什么? Python's with statement provides a very convenient way of dealing with the situation wher ...

  9. magento性能优化的教程(非常详细)

    Magento是一套专业开源的电子商务系统,Magento设计得非常灵活,具有模块化架构体系和丰富的功能但有朋友会发现此模块用到了会发现非常的缓慢了,那么下面我们来看关于magento性能优化的例子. ...

  10. 20160418javaweb之 Filter过滤器

    Servlet规范中 Servlet Listener Filter 1.开发Filter 想要开发一个过滤器需要如下两个步骤: (1)写一个类实现特定的接口Filter 生命周期:当服务器启动时,w ...