小猿圈WEB前端之HTML5+CSS3面試題（一）

愈來愈多人喜歡前端崗位，畢業季已經悄然來臨，不少畢業生面臨找工做，那大家在狂歡快樂最後依依不捨之際，是否想着過幾天招工做的危機。若是想要畢業以後，走向前端的崗位，那看到小編的文章後好好作一下這套題，今天小猿圈總結了一套經典的h5+css的面試題。

1、移動端（Android IOS）怎麼作好用戶體驗?

1.清晰的視覺縱線

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

3.利用選擇代替輸入

4.標籤及文字的排布方式

5.依靠明文確認密碼

6.合理的鍵盤利用

2、什麼是Retina 顯示屏，帶來了什麼問題？

retina：一種具有超高像素密度的液晶屏，一樣大小的屏幕上顯示的像素點由1個變爲多個，如在一樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變爲4個

在高清顯示屏中的位圖被放大，圖片會變得模糊，所以移動端的視覺稿一般會設計爲傳統PC的2倍

那麼，前端的應對方案是：

設計稿切出來的圖片長寬保證爲偶數，並使用backgroud-size把圖片縮小爲原來的1/2

例如圖片寬高爲：200px*200px，那麼寫法以下

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

其它元素的取值爲原來的1/2，例如視覺稿40px的字體，使用樣式的寫法爲20px

.css{font-size:20px}

3、ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩

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

4、部分android系統中元素被點擊時產生的邊框怎麼去掉

android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果

a,button,input,textarea{

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

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

}

-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符

另外，有些機型去除不了，如小米2，對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤。

5、webkit表單元素的默認外觀怎麼重置

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

僞元素改變number類型input框的默認樣式

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;

}

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

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

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

7、webkit表單輸入框placeholder的文字能換行麼?

ios能夠，android不行

在textarea標籤下均可以換行

8、禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

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

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

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

10、打電話發短信寫郵件怎麼實現

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

發短信，winphone系統無效<a href="sms:10086">發短信給: 10086</a>

寫郵件：<a href=「mailto:peun@foxmail.com">peun@foxmail.com</a>

11、模擬按鈕hover效果

移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，可是移動設備中並無鼠標指針，使用css的hover並不能知足咱們的需求，還好國外有個激活移動端css的active效果。

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

2. 要作到全兼容的辦法，可經過綁定ontouchstart和ontouchend來控制按鈕的類名

12、audio元素和video元素在ios和andriod中沒法自動播放

應對方案：觸屏即播

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

audio.play()

})

以上就是小猿圈web前端老師總結的HTML5+CSS3面試題一部分，你們作的怎麼樣，感受no problem的能夠去試試前端的面試了，若是感受有點難難度的話，建議你們把弱項去小猿圈學習一下，給本身加加血，爭取找到一份滿意的工做。