• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 相比px而言,在响应式web设计中,em有何优势?

相比px而言,在响应式web设计中,em有何优势?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html,px,em,16等相关知识,匿名希望在学习及工作中可以帮助到您
我把html中所有长宽全部改用百分比,为了更好的适配不同尺寸的显示设备,而字体这块一直没有很好的解决办法,1em=16px,em的值并不是根据显示器宽度设置的百分比,那为什么还要将px改为em?我该怎么让我的字体大小也能有效的配合整体的百分比宽度?

回复内容:

px 是相对于屏幕分辨率而言的,一个小格子就代表一个 px 在不同分辨率的屏幕上,高分屏的 px 字体看起来会比低分屏的“小”,但事实上它们是一样大小的。
em 是根据元素字体大小定义的(如果本元素没有定义字体大小那么就以父元素字体大小为准,以此类推),字体大小是多少 px,该元素的 1em 就等于多少 px,所以 em 的优势就是可以根据屏幕分辨率的变化等比例地缩放字体。但是用 em 很不方便的地方就是随时都要考虑元素的字体大小,为了弥补这个缺点便出现了 rem。
rem 跟 em 不同的地方在于 rem 是根据根元素(html)的字体大小来确定的,像一般默认的 html 的字体大小是 16px
font-size: 16px; } em不是等于16px.

1em是等于父对象的字体大小.

要靠@media来控制不同分辨率下默认字体大小, 然后靠em控制该分辨率下的字体大小. 意义在于,你使用高分屏的时候,12px正好的字,在他上面就小了很多,你要修改px就要每个都改。
em只要在body上写2em,里面就自然2倍了。
倍儿爽。 并不是1em=16px
em是一个相对单位,他的大小是相对于父级设定的字体大小的。
比如

同理,如果把1em改成0.5em,那么就是6px; 1.相对于父级字体,方便比例选取
2.方便自适应于各种屏幕(移动开发时依靠字体默认大小来确定显示的大小)

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2017-08-06使用HTML5里的classList操作CSS类
  • 2018-12-03怎样让vue更改计算属性但是不更改select的选中值
  • 2018-12-03H5页面音视频自动播放
  • 2018-12-03移动端WEB开发中click,touch,tap事件使用详解
  • 2017-08-06Html5实现如何在两个div元素之间拖放图像
  • 2018-12-03HTML5 canvas基本绘图之绘制阴影效果
  • 2017-08-06HTML5对手机页面长按会粘贴复制禁用的解决方法
  • 2018-12-03HTML5标准学习-文档结构详解
  • 2017-08-06HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
  • 2017-08-02HTML5的本地存储

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5的性能不输原生app 可以用拼积木的方式做HTML5产品
    • HTML5实践- 使用css3丰富图片样式的示例代码
    • HTML5如何解决margin-top的塌陷问题(附代码)
    • H5和CSS3组合使用的实例教程
    • H5实现桌面通知以及提示功能的实例
    • 移动web模拟客户端实现多方框输入密码效果【附代码】_html5教程技巧
    • 如何用canvas画出一个路线图(代码)
    • H5学习之旅-H5的格式化(4)
    • html5如何使用canvas画空心圆与实心圆
    • 《web全栈工程师的自我修养》这本书里说:不要在简历中出现Div+CSS,会减分!请教为什么这样说?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有