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. BZOJ3709 Bohater 贪心

    传送门 思路很妙-- 有个前提条件:血量无限,这样话肯定先打会回血的怪,再打会掉血的怪 对于会回血的怪,按照受到伤害的顺序从小往大打 对于会掉血的怪似乎并不是很好搞,考虑:将每一时刻的血量函数画出来, ...

  2. .Net Core应用框架Util介绍（三）

    上篇介绍了Util的开发环境,并让你把Demo运行起来.本文将介绍该Demo的前端Angular运行机制以及目录结构. 目录结构 在VS上打开Util Demo,会看见如下的目录结构. 现代前端通常采 ...

  3. 《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  4. NTT板子

    不说别的. 这份NTT跑得比FFT快,不知道为什么. 以下代码针对\(10^5\)的数据范围. #include<cstdio> #include<vector> #inclu ...

  5. Android技术框架——Dagger2

    Dagger2 是一个Android依赖注入框架.没错依赖注入,学习过spring的同学看到这词,应该是挺熟悉的.当然既然是Android的课题,我们就来聊聊Dagger2 ,android开发当前非 ...

  6. Tensorflow--矩阵切片与连接

    博客转载自:https://blog.csdn.net/davincil/article/details/77893185 函数原型:slice(input_, begin, size, name=N ...

  7. P2822 组合数问题 HMR大佬讲解

    今天HMR大佬给我们讲解了这一道难题. 基本思路是: 可以将问题转化为:求出杨辉三角,用二维数组f[i][j]来表示在杨辉三角中以第i行第j列的点为右下角,第0行第0列处的点为左上角的矩阵中所有元素是 ...

  8. 【nowcoder-2017校招真题】保留最大的数

    牛客在线编程-保留最大的数 题目描述 给定一个十进制的正整数number,选择从里面去掉一部分数字,希望保留下来的数字组成的正整数最大. 输入描述: 输入为两行内容,第一行是正整数number,1 ≤ ...

  9. 51nod 1318 最大公约数与最小公倍数方程组（2-SAT）

    题意 给你 \(n\) 个元素,\(m\) 个方程. 每个方程形如 \[ \begin{align} \gcd(x_i, y_i)=c_i\\ \mathrm{lcm}(x_i,y_i) = d_i ...

  10. scrapy之使用LinkExtractor提取链接

    一.概述: 在页面含有少量链接时,使用selector来提取信息就可以,但如果链接特别多时,就需要用LinkExtractor来提取. 二.LinkExtractor构造器的各个参数: 1.allow ...