一、移動(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)對象為某特定類型