學(xué)習(xí)是一件非常充實(shí)的過(guò)程，特別是把自己的樂(lè)趣變成工作的時(shí)候，很多朋友就喜歡學(xué)習(xí)web前端，所以學(xué)習(xí)前端，也希望從事前端的工作，但是因?yàn)槿鄙賹?shí)戰(zhàn)經(jīng)驗(yàn)，所以很多都是卡在面試這關(guān)上，下面小猿圈總結(jié)了web前端中HTML5+CSS3面試題。

一、移動(dòng)端（Android IOS）怎么做好用戶體驗(yàn)?

1.清晰的視覺(jué)縱線

2.信息的分組、極致的減法

3.利用選擇代替輸入

4.標(biāo)簽及文字的排布方式

5.依靠明文確認(rèn)密碼

6.合理的鍵盤(pán)利用

二、什么是Retina 顯示屏，帶來(lái)了什么問(wèn)題？

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)，如在同樣帶下的屏幕上，蘋(píng)果設(shè)備的retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè)

在高清顯示屏中的位圖被放大，圖片會(huì)變得模糊，因此移動(dòng)端的視覺(jué)稿通常會(huì)設(shè)計(jì)為傳統(tǒng)PC的2倍

那么，前端的應(yīng)對(duì)方案是：

設(shè)計(jì)稿切出來(lái)的圖片長(zhǎng)寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來(lái)的1/2

例如圖片寬高為：200px*200px，那么寫(xiě)法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來(lái)的1/2，例如視覺(jué)稿40px的字體，使用樣式的寫(xiě)法為20px

.css{font-size:20px}

三、ios系統(tǒng)中元素被觸摸時(shí)產(chǎn)生的半透明灰色遮罩怎么去掉

ios用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設(shè)置為0就可以去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

四、部分android系統(tǒng)中元素被點(diǎn)擊時(shí)產(chǎn)生的邊框怎么去掉

android用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果

a,button,input,textarea{

-webkit-tap-highlight-color: rgba(0,0,0,0;)

-webkit-user-modify:read-write-plaintext-only;

}

-webkit-user-modify有個(gè)副作用，就是輸入法不再能夠輸入多個(gè)字符

另外，有些機(jī)型去除不了，如小米2，對(duì)于按鈕類還有個(gè)辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽。

五、webkit表單元素的默認(rèn)外觀怎么重置

通用：.css{-webkit-appearance:none;}

偽元素改變number類型input框的默認(rèn)樣式

input[type=number]::-webkit-textfield-decoration-container {

background-color: transparent;

}

input[type=number]::-webkit-inner-spin-button {

-webkit-appearance: none;

}

input[type=number]::-webkit-outer-spin-button {

-webkit-appearance: none;

}

六、webkit表單輸入框placeholder的顏色值能改變么?

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

七、webkit表單輸入框placeholder的文字能換行么?

ios可以，android不行

在textarea標(biāo)簽下都可以換行

八、禁止ios 長(zhǎng)按時(shí)不觸發(fā)系統(tǒng)的菜單，禁止ios&android長(zhǎng)按時(shí)下載圖片

.css{-webkit-touch-callout: none}

九、禁止ios和android用戶選中文字

.css{-webkit-user-select:none}

十、打電話發(fā)短信寫(xiě)郵件怎么實(shí)現(xiàn)

打電話：<a href="tel:0755-10086">打電話給:0755-10086</a>

發(fā)短信，winphone系統(tǒng)無(wú)效<a href="sms:10086">發(fā)短信給: 10086</a>

寫(xiě)郵件：<a href=“mailto:peun@foxmail.com">peun@foxmail.com</a>

十一、模擬按鈕hover效果

移動(dòng)端觸摸按鈕的效果，可明示用戶有些事情正要發(fā)生，是一個(gè)比較好體驗(yàn)，但是移動(dòng)設(shè)備中并沒(méi)有鼠標(biāo)指針，使用css的hover并不能滿足我們的需求，還好國(guó)外有個(gè)激活移動(dòng)端css的active效果。

1. 直接在body上添加ontouchstart，同樣可激活移動(dòng)端css的active效果，比較推薦這種方式（兼容性ios5+、部分android 4+、winphone 8）。

2. 要做到全兼容的辦法，可通過(guò)綁定ontouchstart和ontouchend來(lái)控制按鈕的類名

十二、audio元素和video元素在ios和andriod中無(wú)法自動(dòng)播放

應(yīng)對(duì)方案：觸屏即播

$('html').one('touchstart',function(){

audio.play()

})

以上就是小猿圈web前端老師總結(jié)的HTML5+CSS3面試題一部分，想要查看下一部分可以觀看的我下篇文章，相信不會(huì)讓你失望的，學(xué)習(xí)前端可以到小猿圈網(wǎng)站去看一下最新最全面的前端課程。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。