小猿圈WEB前端之HTML5+CSS3面试题(一)
越来越多人喜欢前端岗位,毕业季已经悄然来临,很多毕业生面临找工作,那你们在狂欢快乐最后恋恋不舍之际,是否想着过几天招工作的危机。如果想要毕业之后,走向前端的岗位,那看到小编的文章后好好做一下这套题,今天小猿圈总结了一套经典的h5+css的面试题。
一、移动端(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面试题一部分,大家做的怎么样,感觉no problem的可以去试试前端的面试了,如果感觉有点难难度的话,建议大家把弱项去小猿圈学习一下,给自己加加血,争取找到一份满意的工作。
转载于:https://juejin.im/post/5d09dc7f6fb9a07edc0b5a76
小猿圈WEB前端之HTML5+CSS3面试题(一)相关推荐
- 前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题(一)
学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...
- 小猿圈web前端之jQuery抽奖系统
你有没有想过有一天可以成为千万富翁呢?你是通过自己的努力和奋斗还是其他手段获得的呢?前端程序员是通过jQuery获得的,他自己写了一个抽奖系统,下面就小猿圈前端讲师分享给大家. 效果图: <!D ...
- 小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...
- 小猿圈web前端简述canvas如何实现二维码和图片合成
你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...
- th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题
学习前端的小伙伴越来越多,问题也就越多,前面基础部分还好一些,特别是一到框架的时候,难住了一大部分人,今天小猿圈web前端讲师就为大家总结了vue-cli项目打包完成后运行文件路径报错问题,有兴趣的小 ...
- 小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
- web前端三大主流框架_小猿圈web前端之前端的主流框架都有哪些?
社会在不断发展,互联网更新换代也是飞速,web框架也是经历一代又一代的革新,那么当今时代什么框架是前端的主流框架呢?小猿圈web前端讲师查了一些资料,整理出当今时代比较流行的三种框架,下面说一下这三种 ...
- css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
- 小猿圈web前端之网站性能优化方案
现在前端不仅要能做出一个网站页面,还要把这个页面做的炫酷,那需要很大程度的优化,那么怎么优化才更好呢?小猿圈总结了一下自己优化的方案,感兴趣的朋友可以看一下. 一般网站优化都是优化后台,如接口的响应时 ...
最新文章
- python编码读法-python中文读法
- FPGA+DSP SRIO通信(一)——DSP端参数设置(通道)
- 微型计算机原理与接口技术教材,微型计算机原理与接口技术(修订本)(21世纪高职高专规划教材....
- 环球易购选品:既然选品绕不过,那就让我们好好研究
- python 正则re模块
- LeetCode 168. Excel Sheet Column Title
- vba执行linux命令,如何使用vba的shell()运行参数的.exe?
- 【转】使用FiddlerCore来测试WebAPI
- mysql链接出错_请配置/amysql/config.php文件_MySQL数据库之PHP连接mysql时mysql_connect()函数不可用...
- 阿里云毕龙飞:五个维度推进企业生产关系数字化
- Java实现单链表翻转
- pythonpid传递函数_python实现PID算法及测试的例子
- 『Windows Builder』Java Swing期末课设神器
- AdaDelta算法
- 一个简单的if控制语句
- 一道代码分析题浅析String的intern()方法
- 我为什么选择使用Go语言?
- 字节跳动取消大小周;淘宝、支付宝等阿里系App取消开屏广告;Python 3.10 beta 4发布
- uniapp页面通讯-uni.$emit、uni.$on、uni.$once、uni.$off
- 输入若干用户的用户名和密码