一、填空题
1.视口分为布局视口、视觉视口、理想视口
2视口通过<meta>标签来设置
3.初始化移动端默认样式使用的库是normalize.css
- backgound-size 中把背景图片扩展至足够大使背景图像完全覆盖背景区域的属性值是
cover
二、判断题
- background-size中的高度可以省略（√）
- 布局视口是对设备来讲最理想的视口（×）应该是理想视口
- 在开发的时候用到的1px 一定就等于1个物理像素（×）
- PC端正常大小页面，1px等于1个物理像素，但是移动端不一样
- 1个px的能显示的物理像素点的个数，就是物理像素比或屏幕像素比
物理像素就是我们常说的分辨率
- 在同一台设备上，图片的像素点和屏幕的像素点是一一对应的。如果图片分辨率越高，图片越模糊；图片分辨率越低，图片越清晰（×）
- SVG的含义为可缩放矢量图形（√）
三、选择题
- 下列选项中，用来设置盒子模型border-box计算方式的属性的是（A）
- A.box-sizing
- B.box
- C.border-sizing
- D.box-size
- 下列选项中，属于Chrome浏览器的内核的是（B）
- A.Blink
- B.WebKit
- C.Presto
- D.Gecko
- 下列选项中，用来定义矩形的标签的是（B）
A.（圆）
B.（矩形）
C.（线）
D.（多边形） - 下列选项中，能够清除标签单击时高亮效果的是（A）
A.-webkit-tap-highlight-color（设置点击链接的时候出现的高亮颜色。）
B.-webkit-appearance（改变按钮和其他控件的外观,使其外观类似于原生控件）
C.-webkit-touch-callout（当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。）
D.-webkit-tap-heighlight-callout
四、简单题
1.请简述什么是视口。
- 视觉视口：就是浏览器网站的区域
打开一个网站时，所看到的网站的宽度就是视觉视口，会根据浏览器的放缩而变的。
- 理想视口：设备的宽度
meta标签：设备视口多宽，布局视口就有多宽
2.请简述视口标签的属性及含义
<meta name="viewport" content="width=device-width, initial-scale=1.0">
name="viewport" 视口标签属性
content:
- width=device-width 视口宽度为设备宽度
- user-scalable=no/0 不允许用户缩放页面
- user-scalable=1 允许用户缩放页面
- initial-scale=1.0 初始页面缩放倍数
- maximum-scale=1.0 最大缩放倍数
- minimum-scale=1.0 最小缩放倍数
五、编程题
不同显示设备的分辨率是不同的。
下面有两张图片，一张是50px50px的图片，另外一张是100px100px的图片
素材如下，自己右击保存
素材1：
素材2：
我们可以看到他们在资源管理器中明显大小不同，清晰度相同
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><imgsrc="/source/img/50.png"><imgsrc="/source/img/100.png"></body></html>
现在，我们要通过一系列设置，让这两张图显示一样的大小
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>img:nth-child(2) { width: 50px; height: 50px; } </style></head><body><imgsrc="/source/img/50.png"><imgsrc="/source/img/100.png"></body></html>
:nth-child( n ) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
