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

最新推荐文章于 2023-06-28 16:52:15 发布

萌狼蓝天

最新推荐文章于 2023-06-28 16:52:15 发布

阅读量3k

点赞数 2

文章标签： css html css3 html5 svg

原创文章谢绝转载！不允许搬运！不授权任何人！

本文链接：https://blog.csdn.net/ks2686/article/details/124031411

版权

萌狼蓝天 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>