知识点"/>
那么你面试必须知道的H5C3知识点
1、rem和em的区别
rem是相对于根元素(html)的font-size
em是相对于父元素的font-size。
2、如何关闭IOS键盘首字母自动大写
<input type="text" autocapitalize='off'>
只需要给input输入框加上一个属性即可。
3、什么是语义化标签
1、易读性和维护性会更好
2、在seo上，蜘蛛抓取更好
3、IE8不兼容HTML5标签，可以通过htm5shiv.js解决这个问题。
4、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
1、区别
:是伪类，::是伪元素，主要是为了区分
2、是什么，作用
元素before之前，元素after之后。
清除浮动，样式布局等…
5、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
添加一个样式即可解决。
<style>a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0);}
</style>
rgba (0,0,0,0)则表示完全不透明的白色,也即是无色；
6、：webkit表单输入框placeholder的颜色值能改变吗？
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>input::-webkit-input-placeholder {color: red;}</style><body><input type="text" placeholder="默认值"></body>
</html>7、禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片
/*禁止ios 长按时触发系统的菜单，禁止ios&android长按时下载图片*/
html,body{touch-callout: none;-webkit-touch-callout: none;user-select:none; //禁止选中文字-webkit-user-select:none;
}
8、禁止ios和android用户选中文字
html,body{user-select:none;-webkit-user-select:none;
}
9、自适应
淘宝无限适配【移动端】：淘宝无限适配 + 布局单位使用rem
10、响应式
响应式主要是通过媒体查询来根据屏幕的大小来改变样式。
1. 是什么？一个URL可以响应多端
2. 语法结构@media only screen and (max-width: 1000px){ul li:last-child{display: none;}}only : 可以排除不支持媒体查询的浏览器screen ： 设备类型max-width | max-heightmin-width | min-height
3. 响应式图片【性能优化】<picture><source srcset="1.jpg" media='(min-width:1000px)'><source srcset="2.jpg" media='(min-width:700px)'><img srcset="3.jpg"></picture>
11、布局方案
一、什么情况下采用响应式布局数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局例如：公司的官网、专题页面特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。二、pc + 移动端应该做什么样的布局方案注意：访问量还可以或者比较大，类似于淘宝网。pc是一套，会加入一点点响应式。移动端是一套，会使用自适应的布局方式。三、pc的设计图ui：1980笔记本电脑：1280ui图的宽度和电脑的宽度不对应该怎么办？1. 把ui图进行等比缩放，缩放成和电脑一样的尺寸2. 换1980的电脑四、移动端的设计图宽度：750因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点。
更多推荐
那么你面试必须知道的H5C3知识点
发布评论