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. Linux内存管理 (3)内核内存的布局图

    专题:Linux内存管理专题 关键词:内核内存布局图.lowmem线性映射区.kernel image.ZONE_NORMAL.ZONE_HIGHMEM.swapper_pg_dir.fixmap.v ...

  2. LOJ3053 十二省联考2019 希望 容斥、树形DP、长链剖分

    传送门 官方题解其实讲的挺清楚了,就是锅有点多-- 一些有启发性的部分分 L=N 一个经典(反正我是不会)的容斥:最后的答案=对于每个点能够以它作为集合点的方案数-对于每条边能够以其两个端点作为集合点 ...

  3. 在OSGI容器Equinox中嵌入HttpServer

    原文地址:https://liugang594.iteye.com/blog/1328050 简单介绍一下如何在一个osgi的bundle中内嵌使用http服务 一.基础 首先看看在OSGI中怎么启动 ...

  4. [Alpha阶段]第四次Scrum Meeting

    Scrum Meeting博客目录 [Alpha阶段]第四次Scrum Meeting 基本信息 名称 时间 地点 时长 第四次Scrum Meeting 19/04/08 大运村寝室6楼 50min ...

  5. Java的selenium代码随笔（3）

    /** 以下方法主要用于切换页面*/public void SetPageSwitch(String pageTitle) {Set<String> allWindowsHandles = ...

  6. Vue之状态管理(vuex)与接口调用

    Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...

  7. Gradle打jar包命令

  8. JS生成 UUID的方法

    方法一. function uuid() { var s = []; var hexDigits = "0123456789abcdef"; for (var i = 0; i & ...

  9. springboot- logback 可切换不同环境

    在resources下新建一个logback文件夹和一个logback.xml logback.xml <?xml version="1.0" encoding=" ...

  10. fedora上安装ffmpeg

    环境 fedora26 1. 安装 yasm sudo dnf install yasm yasm-devel -y 2.安装 ffmpeg 官方下载ffmpeg源码  ( http://ffmpeg ...