學習是一件非常充實的過程，特別是把自己的樂趣變成工作的時候，很多朋友就喜歡學習web前端，所以學習前端，也希望從事前端的工作，但是因為缺少實戰經驗，所以很多都是卡在面試這關上，下面小猿圈總結了web前端中HTML5+CSS3面試題。

一、移動端（Android IOS）怎么做好用戶體驗?

1.清晰的視覺縱線

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

3.利用選擇代替輸入

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

5.依靠明文確認密碼

6.合理的鍵盤利用

二、什么是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}

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

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

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

四、部分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標簽。

五、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;

}

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

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

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

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

ios可以，android不行

在textarea標簽下都可以換行

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

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

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

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

十、打電話發短信寫郵件怎么實現

打電話：<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>

十一、模擬按鈕hover效果

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

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

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

十二、audio元素和video元素在ios和andriod中無法自動播放

應對方案：觸屏即播

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

audio.play()

})

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。