目錄
相比px而言,在响应式web设计中,em有何优势?
em
html
px
我把html中所有长宽全部改用百分比,为了更好的适配不同尺寸的显示设备,而字体这块一直没有很好的解决办法,1em=16px,em的值并不是根据显示器宽度设置的百分比,那为什么还要将px改为em?我该怎么让我的字体大小也能有效的配合整体的百分比宽度?
回复内容:
px 是相对于屏幕分辨率而言的,一个小格子就代表一个 px 在不同分辨率的屏幕上,高分屏的 px 字体看起来会比低分屏的“小”,但事实上它们是一样大小的。em 是根据元素字体大小定义的(如果本元素没有定义字体大小那么就以父元素字体大小为准,以此类推),字体大小是多少 px,该元素的 1em 就等于多少 px,所以 em 的优势就是可以根据屏幕分辨率的变化等比例地缩放字体。但是用 em 很不方便的地方就是随时都要考虑元素的字体大小,为了弥补这个缺点便出现了 rem。
rem 跟 em 不同的地方在于 rem 是根据根元素(html)的字体大小来确定的,像一般默认的 html 的字体大小是 16px
<span class="nt">html</span> <span class="p">{</span> <span class="k">font-size</span><span class="o">:</span> <span class="m">16px</span><span class="p">;</span> <span class="p">}</span>
登入後複製
1em是等于父对象的字体大小.
要靠@media来控制不同分辨率下默认字体大小, 然后靠em控制该分辨率下的字体大小. 意义在于,你使用高分屏的时候,12px正好的字,在他上面就小了很多,你要修改px就要每个都改。
em只要在body上写2em,里面就自然2倍了。
倍儿爽。 并不是1em=16px
em是一个相对单位,他的大小是相对于父级设定的字体大小的。
比如
这是父级元素
这是子级元素
这是子级元素
这种情况下,1em就=16px;
如果这样写
这是父级元素
这是子级元素
这是子级元素
这种情况下,1em就=12px;
同理,如果把1em改成0.5em,那么就是6px; 1.相对于父级字体,方便比例选取
2.方便自适应于各种屏幕(移动开发时依靠字体默认大小来确定显示的大小)
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
<🎜>:種植花園 - 完整的突變指南
3 週前
By DDD
<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
如何修復KB5055612無法在Windows 10中安裝?
3 週前
By DDD
藍王子:如何到達地下室
1 個月前
By DDD
北端:融合系統,解釋
3 週前
By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲
