1、在说到百分比是前，先简单了解下基本的单位

英寸（inch） ：in 1 in=2.54cm
厘米（centimeter）：cm
毫米（millimeter）：mm
磅（point）：pt 1pt=1/72 in
皮卡（pica）:pc 1pc==12 pt
像素（pixel unit）：px 1px=0.75 pt
相对长度单位(相对于当前对象内文本的字体尺寸)：em 1em=16px
CSS3新增的一个相对单位root em: rem 1rem=16px

注意：如果是定位的元素，则是相对最近的定位父级元素

应用场景

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

实例

h1 {font-size:.5em;} /* 40px/16=2.5em */

h2 {font-size:.875em;} /* 30px/16=1.875em */

p {font-size:.875em;} /* 14px/16=0.875em */

如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

解决方法

使用百分比和EM组合

在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：

实例

body {font-size:%;}

h1 {font-size:.5em;}

h2 {font-size:.875em;}

p {font-size:.875em;}

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

方法二

浏览器默认字体16px，我们可以设置，body的字体大小为10px，然后1em就是10px，有利于换算

body{ font-size：62.5%；} //换算一下10px*100%/16px=62.5%===》》相当于10px,1em=10px

h1 {font-size:4em} //40px

h6 {font-size:.2em} //12px

css布局中的百分比布局的更多相关文章

  1. IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世

    https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...

  2. Android 布局开发之百分比布局、弹性布局

    1.百分比布局 很简单,超级简单.引用之后就可以使用了. compile 'com.android.support:percent:23+' git地址: https://github.com/Jul ...

  3. css定位中的百分比

    ----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比 首先从css的设计意图说起,在浏览器默 ...

  4. Android百分比布局支持库（android-percent-support）

    Android中提供了五种布局,其中用的最多的就是:LinearLayout, RelativeLayout 和 FrameLayout这三种布局,在对某一界面进行布局时最先想到也是通过这三种来布局的 ...

  5. Android百分比布局方案

    百分比布局让其中的控件在指定高度,宽度,margin时使用屏幕宽高的百分比,不使用dp,px.这样一套布局可以适应多个屏幕,方便适配.如: app:layout_heightPercent=" ...

  6. 在SOUI中使用线性布局

    SOUI 2.5.1.1开始支持线性布局(LinearLayout). 要在SOUI布局中使用线性布局, 需要在布局容器窗口里指定布局类型为vbox | hbox, (vbox为垂直线性布局, hbo ...

  7. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  8. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  9. 响应式布局中的CSS相对量

    一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...

随机推荐

  1. [看图说话]在VMware Workstation 9中安装Mac OS X 10.8 Mountain Lion

    本文环境: CPU:Intel Core i7 920: OS:Windows 7: 内存:8G: 玩Hackintosh各有各的理由,不管什么理由,利用虚拟机安装Mac OS X都是一个可行的办法. ...

  2. go笔记-熔断器

    参考: https://studygolang.com/articles/13254 区别:(限速器 VS 熔断器) 限速器(limiter)可以限制接口自身被调的频率 熔断器可监控所调用的服务的失败 ...

  3. gulp 自动ftp至服务器时，处理开发 测试服务器地址问题

    var gulp=require('gulp'), babel = require('gulp-babel'), gulpSequence = require('gulp-sequence'), ht ...

  4. 微软是如何重写C#编译器并使它开源的

    译者:王亮作者:Mads Torgersen (C# Language PM at Microsoft)原文:http://t.cn/EPOG96O 译者的一些话: 看了大家的评论,有园友说我翻译的不 ...

  5. Gerrit 添加用户

    使用ssh添加用户 ssh name@localhost -p 29418 gerrit create-account username --email username@email --full-n ...

  6. Java的selenium代码随笔（2）

    import java.awt.AWTException;import java.awt.Robot;import java.awt.Toolkit;import java.awt.datatrans ...

  7. jexus部署webapi或mvc报错处理

    1路径错误:因为Windows和Linux的路径问题大小写问题. 解决: 修改jexus下的jws把export MONO_IOMAP=all注释去掉放出来. 2, 解决: 卸载

  8. BZOJ4643 卡常大水题 【Tarjan】

    题目分析: 给所有边按A排序,依次加入再按B递增排序,势能分析可以发现是O(n^4)的 代码: #include<bits/stdc++.h> using namespace std; ; ...

  9. mybatis返回结果封装为map的探索

    需求 根据课程id 列表,查询每个课程id的总数,放到一个map里 最简单的就是循环遍历,每一个都查询一次网上说mybatis可以返回Map 和 List<Map>两种类型 尝试 直接返回 ...

  10. Django Cookie,Session

    Cookie Cookie的由来 HTTP协议是无状态的,每次请求都是独立的,对服务器来说,每次的请求都是全新的,上一次的访问是数 据是无法保留到下一次的 某些场景需要状态数据或者中间数据等相关对下一 ...