那么你面试必须知道的H5C3知识点
目录
- 1、rem和em的区别
- 2、如何关闭IOS键盘首字母自动大写
- 3、什么是语义化标签
- 4、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
- 5、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
- 6、：webkit表单输入框placeholder的颜色值能改变吗？
- 7、禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片
- 8、禁止ios和android用户选中文字
- 9、自适应
- 10、响应式
- 11、布局方案
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系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
添加一个样式即可解决。
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>Documenttitle>
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-height
min-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
笔记本电脑：1280
ui图的宽度和电脑的宽度不对应该怎么办？
1. 把ui图进行等比缩放，缩放成和电脑一样的尺寸
2. 换1980的电脑
四、移动端的设计图
宽度：750
因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点。