web前端面試題@十八(移動(dòng)端1px問題,為什么會(huì)有?如何解決?typeof和instanceof相同點(diǎn)與不同點(diǎn)?)

一、移動(dòng)端1px問題,為什么會(huì)有?如何解決?

為什么移動(dòng)端會(huì)產(chǎn)生1px問題呢?

????????因?yàn)閁I設(shè)計(jì)師在最初設(shè)計(jì)的時(shí)候使用的尺寸是按照640x960設(shè)計(jì)的,前端寫的時(shí)候是按照320x480寫的,寫1px(css),瀏覽器自動(dòng)變成2px(真實(shí)像素)。

那么前端工程師為什么不能直接寫0.5px(css)呢?

????????因?yàn)樵诶习姹镜南到y(tǒng)里寫0.5px(css)的話,會(huì)被瀏覽器解讀為0px(css),就沒有邊框了。不過在新版的系統(tǒng)里,已經(jīng)開始逐漸支持0.5px(css)這種寫法。所以如果設(shè)計(jì)師在大圖上設(shè)計(jì)了一個(gè)1px(真實(shí)像素)的線的話,前端工程師直接除以2,寫0.5px(css)就好了。

具體解決方案有哪些?

a.小數(shù)值

div { border: 1px solid #000;}

@media (-webkit-min-device-pixel-ratio: 2) { div { border: .5px solid #000; }}

b.border-image(將圖片規(guī)定為包圍 div 元素的邊框)

? ? ? {

????border-width: 1px 0px;

????-webkit-border-image: url(border.png) 2 0 stretch;

????border-image: url(border.png) 2 0 stretch;

}

c.background-img漸變

{

background:

?linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,????????linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,????????linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;?

}

d.box-shadow(向元素添加陰影)

{????????

????-webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);

????box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);

}

e.設(shè)置 Viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">?

f.transform:scale(0.5)(旋轉(zhuǎn)元素)

div { height: 1px; background: #000; transform: scaleY(0.5); transform-origin: 0 0;}

二、typeof和instanceof相同點(diǎn)與不同點(diǎn)

在javascript中,判斷一個(gè)變量的類型可以用typeof

(1)數(shù)字類型、typeof返回的值是number。比如說:typeof(1),返回值是number

(2)字符串類型,typeof返回的值是string。比如typeof(“123”返回值時(shí)string)

(3)布爾類型,typeof返回的值是boolean。比如typeof(true)返回值時(shí)boolean

(4)對象、數(shù)組、null返回的值是object。比如typeof(window),typeof(document),typeof(null)返回的值都是object

(5)函數(shù)類型,返回的值是function。比如:typeof(eval),typeof(Date)返回的值都是function。

(6)不存在的變量、函數(shù)或者undefined,將返回undefined。比如:typeof(abc)、typeof(undefined)都返回undefined

在javascript中,instanceof用于判斷某個(gè)對象是否被另一個(gè)函數(shù)構(gòu)造。

兩者的關(guān)系?

使用typeof運(yùn)算符時(shí)采用引用類型存儲(chǔ)值會(huì)出現(xiàn)一個(gè)問題,無論引用的是什么類型的對象,它都返回”object”。

ECMAScript引入了另一個(gè)Java運(yùn)算符instanceof來解決這個(gè)問題。

相同點(diǎn):Instanceof運(yùn)算符與typeof運(yùn)算符相似,用于識(shí)別正在處理的對象的類型。

不同的是:instanceof方法要求開發(fā)者明確地確認(rèn)對象為某特定類型















在javascript中,判斷一個(gè)變量的類型可以用typeof

(1)數(shù)字類型、typeof返回的值是number。比如說:typeof(1),返回值是number

(2)字符串類型,typeof返回的值是string。比如typeof(“123”返回值時(shí)string)

(3)布爾類型,typeof返回的值是boolean。比如typeof(true)返回值時(shí)boolean

(4)對象、數(shù)組、null返回的值是object。比如typeof(window),typeof(document),typeof(null)返回的值都是object

(5)函數(shù)類型,返回的值是function。比如:typeof(eval),typeof(Date)返回的值都是function。

(6)不存在的變量、函數(shù)或者undefined,將返回undefined。比如:typeof(abc)、typeof(undefined)都返回undefined


在javascript中,instanceof用于判斷某個(gè)對象是否被另一個(gè)函數(shù)構(gòu)造。


使用typeof運(yùn)算符時(shí)采用引用類型存儲(chǔ)值會(huì)出現(xiàn)一個(gè)問題,無論引用的是什么類型的對象,它都返回”object”。ECMAScript引入了另一個(gè)Java運(yùn)算符instanceof來解決這個(gè)問題。Instanceof運(yùn)算符與typeof運(yùn)算符相似,用于識(shí)別正在處理的對象的類型。與typeof方法不同的是,instanceof方法要求開發(fā)者明確地確認(rèn)對象為某特定類型

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容