你不知道的css各类布局（五）之em布局、rem布局
em布局/rem布局
em和rem的区别
在了解弹性布局前我们需要先知道em和rem
rem：font size of the root element，rem是相对于根元素<html>来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。
em：以使用em为单位的元素本身的font-size大小为参考点，标准不统一，容易造成混乱
em/rem与px的换算
浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器
默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。
那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？
因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5%
得到我们需要的10px。
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
|
实际项目设置成 font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。
针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。
概念
弹性布局是指通过调整其内元素的宽高（弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出），从而在任何显示设备上实现对可用显示空间最佳填充的能力
布局特点
这类布局的特点是，包裹文字的各元素的尺寸采用em/rem做单位，使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广，
使用rem单位的弹性布局在移动端也很受欢迎
其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，可以实现完美的流式
布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。
优点
如果执行正确，这种布局方式可以非常方便。我们的目标是根据用户的偏好，让一切都能按比例放大和缩小。
对于既爱固定布局又爱流体布局的设计师，弹性布局是完美的，因为它们各自的优点都可以在弹性布局中找到=
- 理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应
缺点
- 这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。
综合结论
1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
参考
你不知道的css各类布局（五）之em布局、rem布局的更多相关文章
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- 你不知道的css各类布局（二）之流体布局、液体布局、栅格布局
流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元 ...
- 你不知道的css各类布局（一）之固定布局、静态布局
前言 当为大量用户设计网站时,设计人员必须考虑到访问者的差异: 屏幕分辨率, 浏览器的选择, 是否在浏览器最大化状态, 浏览器的额外工具栏的开启(历史记录,书签等), 操作系统和硬件. 我们知道css ...
- 你不知道的css各类布局（四）之响应式布局
响应式布局 概念 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 布局特点 响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC.手机.手表.冰箱的Web浏览器等等)都能显示出令人满意的效 ...
- 你不知道的css各类布局（三）之自适应布局
自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...
- 比较css中单位px，em和rem的区别
国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原 ...
- css中的px、em、rem 详解
概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...
- 彻底弄懂css中单位px和em，rem的区别
PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...
- css中单位px和em，rem的区别
PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...
随机推荐
- Ceph 存储集群搭建
前言 Ceph 分布式存储系统,在企业中应用面较广 初步了解并学会使用很有必要 一.简介 Ceph 是一个开源的分布式存储系统,包括对象存储.块设备.文件系统.它具有高可靠性.安装方便.管理简便.能够 ...
- springboot-mvc:入参日期类型转换String->Date
4种方式: 1.通过在application.ym中配置 spring.mvc.data-format: yyyy-MM-dd HH:mm:ss ,使用的是ParserConverter 优点:简单的 ...
- vscode 记住git用户密码
一.选中文件-->首选项-->设置,搜索git,在setting.json中添加 "git.path":"/bin/git.exe" 二.git b ...
- 短信的内容提供者Uri和短信表结构
* sms表 * address :手机号码 * date :收发短信的时间 * read :短信的阅读状态 1,已读 0,未读 * type :收发短信的类型 1,收到短信 2,发出短信 * bod ...
- 机器学习之Xgboost算法
知识点 """ xgboost:是一种提升算法,串行的决策树 过程: 第一棵树:目标值:1000 ,预测值:950 第二颗树:目标值:1000-950=50(残差作为输入 ...
- 进程对列，生产者和消费者，JoinableQueue
1.进程对列 让进程之间共享资源 先进先出 (1)基本语法 from multiprocessing import Process,Queue q = Queue() # 1.用put方法往队列中存值 ...
- Delphi ActionList详解
一个友好的用户界面,必须具有下拉菜单,弹出菜单,工具条和快捷键.同样一个功能,程序员可能要提供几种操作方式,如文本拷贝,菜单命令&Copy,快捷键Ctrl+C,工具条上的拷贝按钮,都是程序员提 ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- 论UT阶段重要性
测试与开发这对立的命运啊 如果是对测试从业者心存鄙视的朋友啊,请关掉此页,带着偏见不好看的~ 人生就像一个旅途,每个人看到风景不一样,世界观.人生观.价值观也就不同.不要试着去改变别人,因为你的观点在 ...
- 如何查看linux系统安装时间
第一种方法: 先查看系统盘挂到哪个分区上,然后用 dumpe2fs 查看这个磁盘分区 创建的时间,即可查出此 服务器 系统安装的时间.() # dumpe2fs /dev/sda3|grep -i ...