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. 引用传递this关键字

    this关键字主要有三个应用: (1)this调用本类中的属性,也就是类中的成员变量: (2)this调用本类中的其他方法: (3)this调用本类中的其他构造方法,调用时要放在构造方法的首行.  

  2. STM32407+LAN8720A+LWIP 实现TCP Client

    硬件 一.配置CubeMax工程 二.配置系统时钟 因为LAN8720使用的是外部25MHz的晶振,所以不需要单片机输出时钟 三.配置ETH和LWIP参数 四.更改代码 LAN8720A在初始化的时候 ...

  3. .NET Core 实现 Redis 批量查询指定格式的Key

    一. 问题场景 Redis 作为当前最流行的内存型 NoSQL 数据库,被许多公司所使用,作为分布式缓存.我们在实际使用中一般都会为 key 带上指定的前缀或者其他定义的格式.当由于我们程序出现bug ...

  4. Epemme

    Goss wa lap tirre kamme da, Waess u'malarre zuzze nasa. Mat abbe price junirre nay, Ywe zay prolodde ...

  5. Kubernetes — 重新认识Docker容器

    这一次,我要用+Docker+部署一个用+Python+编写的+Web+应用.这个应用的代码部分(app.py)非常简单: from flask import Flask import socket ...

  6. Linux下部署开源版“禅道”项目管理系统

    1.开源版安装包下载 [root@iZbp ~]# wget http://dl.cnezsoft.com/zentao/9.0.1/ZenTaoPMS.9.0.1.zbox_64.tar.gz 2. ...

  7. 第三章· Redis消息队列

    一.生产消费模型 二.Redis发布消息的两种模式

  8. Linux取代ifconfig指令的ip指令

  9. Day 4 测试（QwQ 表示没考好 未完待续。。。 可能要过一段时间才会更

    #include<iostream> #include<algorithm> #include<cstdio> #include<cstring> #i ...

  10. Django url （路由）

    1.路由的基本使用 #url 是个函数,有四个参数,第一个参数要传正则表达式,第二个参数传函数内存地址,第三个传默认参数,第四个传路由别名 ​ url(r'^yaopipqideneirong/art ...