美文网首页让前端飞小猿圈-IT自学人的小圈子前端开发
小猿圈WEB前端之HTML5+CSS3面试题(一)

小猿圈WEB前端之HTML5+CSS3面试题(一)

作者: f673630174f6 | 来源:发表于2019-05-06 15:07 被阅读0次

    学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习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面试题一部分,想要查看下一部分可以观看的我下篇文章,相信不会让你失望的前端自学交流群:820024416,学习前端可以到小猿圈网站去看一下最新最全面的前端课程。

    相关文章

      网友评论

        本文标题:小猿圈WEB前端之HTML5+CSS3面试题(一)

        本文链接:https://www.haomeiwen.com/subject/rsaroqtx.html