學(xué)習(xí)是一件非常充實(shí)的過程，特別是把自己的樂趣變成工作的時(shí)候，很多朋友就喜歡學(xué)習(xí)web前端，所以學(xué)習(xí)前端，也希望從事前端的工作，但是因?yàn)槿鄙賹?shí)戰(zhàn)經(jīng)驗(yàn)，所以很多都是卡在面試這關(guān)上，下面小猿圈總結(jié)了web前端中HTML5+CSS3面試題。
一、移動端（Android IOS）怎么做好用戶體驗(yàn)?
1.清晰的視覺縱線
2.信息的分組、極致的減法
3.利用選擇代替輸入
4.標(biāo)簽及文字的排布方式
5.依靠明文確認(rèn)密碼
6.合理的鍵盤利用
二、什么是Retina 顯示屏，帶來了什么問題？
retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)，如在同樣帶下的屏幕上，蘋果設(shè)備的retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè)
在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設(shè)計(jì)為傳統(tǒng)PC的2倍
那么，前端的應(yīng)對方案是：
設(shè)計(jì)稿切出來的圖片長寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來的1/2
例如圖片寬高為：200px*200px，那么寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px
.css{font-size:20px}
三、ios系統(tǒng)中元素被觸摸時(shí)產(chǎn)生的半透明灰色遮罩怎么去掉
ios用戶點(diǎn)擊一個(gè)鏈接，會出現(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è)鏈接，會出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣，可設(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，對于按鈕類還有個(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 長按時(shí)不觸發(fā)系統(tǒng)的菜單，禁止ios&android長按時(shí)下載圖片
.css{-webkit-touch-callout: none}
九、禁止ios和android用戶選中文字
.css{-webkit-user-select:none}
十、打電話發(fā)短信寫郵件怎么實(shí)現(xiàn)
打電話：<a href="tel:0755-10086">打電話給:0755-10086</a>
發(fā)短信，winphone系統(tǒng)無效<a href="sms:10086">發(fā)短信給: 10086</a>
寫郵件：<a href=“mailto:peun@foxmail.com">peun@foxmail.com</a>
十一、模擬按鈕hover效果
移動端觸摸按鈕的效果，可明示用戶有些事情正要發(fā)生，是一個(gè)比較好體驗(yàn)，但是移動設(shè)備中并沒有鼠標(biāo)指針，使用css的hover并不能滿足我們的需求，還好國外有個(gè)激活移動端css的active效果。
1. 直接在body上添加ontouchstart，同樣可激活移動端css的active效果，比較推薦這種方式（兼容性ios5+、部分android 4+、winphone 8）。
2. 要做到全兼容的辦法，可通過綁定ontouchstart和ontouchend來控制按鈕的類名
十二、audio元素和video元素在ios和andriod中無法自動播放
應(yīng)對方案：觸屏即播
$('html').one('touchstart',function(){
? ? audio.play()
})
以上就是小猿圈web前端老師總結(jié)的HTML5+CSS3面試題一部分，想要查看下一部分可以觀看的我下篇文章，相信不會讓你失望的，學(xué)習(xí)前端可以到小猿圈網(wǎng)站去看一下最新最全面的前端課程。
