萌狼藍天 2022年 3月 11日 學號：202006070225
一、填空題
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
-
下列選項中，用來設置視口初始化縮放比的是（A）
A.initial-scale（初始縮放比）
B.maximum-scale（最大縮放比）
C.minimun-scale（最小縮放比）
D.user-scalable（用戶是否可以縮放，yes or no or 1 or 0）
四、簡單題
1.請簡述什么是視口。
視口 (viewport) 代表當前可見的計算機圖形區域。
布局視口：就是在畫頁面時，設置的頁面的寬度
頁面在不同的移動設備中，布局視口是不變的，但是呈現效果是不好的。
視覺視口：就是瀏覽器網站的區域
打開一個網站時，所看到的網站的寬度就是視覺視口，會根據瀏覽器的放縮而變的。
理想視口：設備的寬度
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：
我們可以看到他們在資源管理器中明顯大小不同，清晰度相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="/source/img/50.png">
<img src="/source/img/100.png">
</body>
</html>
現在，我們要通過一系列設置，讓這兩張圖顯示一樣的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img:nth-child(2) {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<img src="/source/img/50.png">
<img src="/source/img/100.png">
</body>
</html>
我們將縮放更改為300%或者更高
通過觀察可以發現，右邊的圖像比左邊的圖像更清晰
備注:
:nth-child( n ) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型。
n 可以是數字、關鍵詞或公式。