資訊專欄INFORMATION COLUMN
摘要：在桌面瀏覽器中，個(gè)像素往往是對著電腦屏幕的個(gè)物理像素，但是在移動(dòng)端，隨著屏的流行，分辨率提高了。中的并不等于設(shè)備的。蘋果四手機(jī)，變成了，但是蘋果四手機(jī)的實(shí)際屏幕尺寸并沒有變化。二之間的換算我們假設(shè)的設(shè)計(jì)稿是以為標(biāo)準(zhǔn)的。
一、vw px rem em是什么
1.vw:就是相對視口寬度(Viewport Width)。1vw = 1% * 視口寬度。也就是說，一個(gè)視口就是100vw。
2.px:px應(yīng)該是在css中使用最為普遍的單位了吧。px是屏幕設(shè)備物理上能顯示出的最小的一點(diǎn)。這個(gè)點(diǎn)不是固定寬度的，是相對長度單位。在桌面瀏覽器中，1個(gè)像素往往是對著電腦屏幕的1個(gè)物理像素，但是在移動(dòng)端，隨著Retina屏的流行，分辨率提高了。css中的1px并不等于設(shè)備的1px。比如蘋果三手機(jī)，分辨率是320 x 480。蘋果四手機(jī)，變成了640 x 960，但是蘋果四手機(jī)的實(shí)際屏幕尺寸并沒有變化。這時(shí)候的1個(gè)css像素就是等于兩個(gè)物理像素。
3.rem:是相對單位，相對于html的字體尺寸。
4.em:所有現(xiàn)代瀏覽器下，默認(rèn)字體尺寸都是16px。這時(shí),1em = 16px。em會繼承父級遲鈍，也是相對單位。
二、vw px rem之間的換算1.我們假設(shè)pad的設(shè)計(jì)稿是以1920px為標(biāo)準(zhǔn)的。那么：
100vw = 1920px
1vw = 19.2px
我們想要： 1rem = 100px（這樣方便我們在寫代碼的時(shí)候換算）
那么:
100px = 100vw / 19.2 = 1rem
所以：
1rem = 5.208vw。
這時(shí)候，我們只要給html的根元素設(shè)置：
font-size: 5.208vw即可。
2.同理的，手機(jī)端我們假設(shè)設(shè)計(jì)稿是以750px為標(biāo)準(zhǔn)的，那么:
100vw = 750px
1vw = 7.5px
我們想要： 1rem = 100px
那么：
100px = 100vw / 7.5 = 1rem
那么：
1rem = 13.33vw
好啦，本篇文章到此為止~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113739.html
摘要：注意不能做到屏幕的百分之。因?yàn)闉g覽器的最小是按如上改動(dòng)代碼選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)效果入圖可以看到寬度和高度都能按百分比變化了，但是我們會發(fā)現(xiàn)一個(gè)很麻煩的東西，設(shè)計(jì)師給我們的設(shè)計(jì)稿，我們卻必須把每個(gè)元素的像素單位換算為。動(dòng)態(tài)rem 1. 首先我們先介紹當(dāng)下的長度單位 px 像素 em 一個(gè)M的寬度 / 一個(gè)漢字的寬度 1em == 自身的font-size rem 全稱root em 是根元...
摘要：注意不能做到屏幕的百分之。因?yàn)闉g覽器的最小是按如上改動(dòng)代碼選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)效果入圖可以看到寬度和高度都能按百分比變化了，但是我們會發(fā)現(xiàn)一個(gè)很麻煩的東西，設(shè)計(jì)師給我們的設(shè)計(jì)稿，我們卻必須把每個(gè)元素的像素單位換算為。動(dòng)態(tài)rem 1. 首先我們先介紹當(dāng)下的長度單位 px 像素 em 一個(gè)M的寬度 / 一個(gè)漢字的寬度 1em == 自身的font-size rem 全稱root em 是根元...
閱讀 818·2021-09-26 09:55
閱讀 2096·2021-09-22 15:44
閱讀 1502·2019-08-30 15:54
閱讀 1358·2019-08-30 15:54
閱讀 2707·2019-08-29 16:57
閱讀 541·2019-08-29 16:26
閱讀 2519·2019-08-29 15:38
閱讀 2170·2019-08-26 11:48
