贵州网站建设seo,西安市住房和城乡建设官网,站长素材网app免费下载,企业网站开发成本前端
作为一个前端开发工程师#xff0c;关于这些长度单位还是得了解一下。虽然在日常的开发中px、%用的多些#xff0c;也会用到vh、vw#xff0c;其他的虽然用的少但也得了解#xff0c;说不定就能解决你样式中的问题呢。
计量单位
在css中计量单位分相对长度单位和绝…前端
作为一个前端开发工程师关于这些长度单位还是得了解一下。虽然在日常的开发中px、%用的多些也会用到vh、vw其他的虽然用的少但也得了解说不定就能解决你样式中的问题呢。
计量单位
在css中计量单位分相对长度单位和绝对长度单位
相对长度单位em、ex、ch、rem、vw、vh、vmin、vmax、%绝对长度单位cm、mm、in、px、pt、pt、pc
今天就具体介绍一下其中的em、rem、px。其他的感兴趣的可以自己去了解。
em、px、rem
em、px、和 rem 都是用于指定元素大小的单位它们在 CSS 中有不同的用途和特性。 px像素 px 是最基本的长度单位表示相对于显示器屏幕分辨率的一个点。1 像素等于屏幕上的一个点。px 是绝对单位不受父元素的影响。当使用 px 时元素的大小将始终相对于屏幕分辨率。 div {width: 100px;height: 50px;font-size: 16px;
}em em 是相对单位它是相对于元素的字体大小来计算的。如果没有设置字体大小则相对于父元素的字体大小。例如如果父元素的字体大小为 16px设置子元素的 font-size: 2em则子元素的字体大小为 2 * 16px 32px。 body {font-size: 16px;
}div {font-size: 2em; /* 相对于父元素字体大小即 32px */
}rem根元素的相对单位 rem 与 em 类似但是相对的是根元素的字体大小。rem 是相对于文档的根元素html 元素的字体大小。这使得 rem 更易于控制整个页面的大小。 html {font-size: 16px; /* 设置根元素字体大小 */
}div {font-size: 2rem; /* 相对于根元素字体大小即 32px */
}什么时候用哪个单位呢
选择使用哪个单位px、em、rem通常取决于的设计和开发需求。以下是一些建议 使用 px 当希望元素的大小在不受父元素字体大小影响的情况下保持固定。对于一些固定大小的元素如边框、间距等通常使用 px 更为合适。 div {width: 100px;padding: 10px;border: 1px solid #000;
}使用 em 当希望元素的大小相对于其父元素的字体大小进行缩放。对于一些相对尺寸如文本大小和相对布局的情况em 可以提供更灵活的解决方案。 body {font-size: 16px;
}div {font-size: 1.5em; /* 相对于父元素字体大小即 24px */margin-bottom: 1em; /* 相对于父元素字体大小即 16px */
}使用 rem 当希望元素的大小相对于根元素的字体大小进行缩放这样可以更容易控制整个页面的大小。rem 通常用于设置全局的基础字体大小然后其他元素使用 em 进行相对尺寸设置。 html {font-size: 16px; /* 设置根元素字体大小 */
}div {font-size: 2rem; /* 相对于根元素字体大小即 32px */margin-bottom: 1rem; /* 相对于根元素字体大小即 16px */
}选择合适的单位也要考虑到响应式设计的需求。相对单位em、rem通常更适用于响应式设计因为它们可以根据上下文动态地适应变化的环境而绝对单位px在这方面相对较死板。
小结
px 是绝对单位不受父元素影响。em 是相对于元素字体大小的单位或者相对于父元素字体大小的单位。rem 是相对于根元素字体大小的单位因此更容易控制整个页面的大小。
