【前端】【响应式设计】【移动端】响应式设计作业01：视口、二倍图-阿里云开发者社区

【前端】【响应式设计】【移动端】响应式设计作业01：视口、二倍图

2023-05-29 287

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【前端】【响应式设计】【移动端】响应式设计作业01：视口、二倍图

一、填空题

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) 代表当前可见的计算机图形区域。

10215fca10b81775139c3cdf7f191548_2571021-20220311194646352-441469099.png

视觉视口：就是浏览器网站的区域
打开一个网站时，所看到的网站的宽度就是视觉视口，会根据浏览器的放缩而变的。

理想视口：设备的宽度
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><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>

951e950233a6720c9379faac811f482e_2571021-20220311194644911-1445760550.png

现在，我们要通过一系列设置，让这两张图显示一样的大小

<!DOCTYPE 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>